文档章节

web 前端性能

东街小霸王
 东街小霸王
发布于 2017/08/28 10:16
字数 586
阅读 2
收藏 0

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要。

前端性能优化分为如下几个方面:

一、代码部署:

1、代码的压缩与合并
2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息。
3、使用内容分发网络 CDN
4、为文件设置Last-Modified、Expires和Etag
5、使用GZIP压缩传送
6、权衡DNS查找次数(使用不同域名会增加DNS查找)
7、避免不必要的重定向(加"/")

二、编码

1.html:

1、使用结构清晰,简单,语义化标签
2、避免空的src和href
3、不要在HTML中缩放图片

2.css:

1、精简css选择器 2、把CSS放到顶部
3、避免@import方式引入样式
4、css中使用base64图片数据取代图片文件,减少请求数,在线转base64网站:http://tool.css-js.com/base64.html
5、使用css动画来取代javascript动画
6、使用字体图标,图标库网站:http://fontawesome.io/icons/,在线制作网站:www.iconfont.cn
7、使用css sprite
8、使用svg图形
9、避免使用CSS表达式

a {star : expression(onfocus=this.blur)}

10、避免使用滤镜

3.javascript:

1、减少引用库的个数
2、使用requirejs或seajs异步加载js
3、JS放到页面底部引入
4、避免全局查找
5、减少属性查找
6、使用原生方法
7、用switch语句代替复杂的if else语句
8、减少语句数,比如说多个变量声明可以写成一句
9、使用字面量表达式来初始化数组或者对象
10、使用DocumentFragments或innerHTML取代复杂的元素注入
11、使用事件代理(事件委托)
12、避免多次访问dom选择集
13、高频触发事件设置使用函数节流,如:onmousemove、onmouseover
14、使用Web Storage缓存数据
15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

本文转载自:https://my.oschina.net/liuyuantao/blog/1507021

共有 人打赏支持
东街小霸王
粉丝 2
博文 61
码字总数 17472
作品 0
深圳
OneAPM x 腾讯 | OneAPM 技术公开课·深圳 报名:前端性能大作战!

「 OneAPM 技术公开课」由应用性能管理第一品牌 OneAPM 发起,内容面向 IT 开发和运维人员。云集技术牛人、知名架构师、实践专家共同探讨技术热点。 11月28日,OneAPM 技术公开课第五期将走进...

OneAPM蓝海讯通
2015/11/16
60
0
谈谈css的加载及加载循序

谈谈css的加载及加载循序 Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客2017-12-231 阅读 css 前言 关于前端css性能优化,网上很多类似文章,我之前也写过,《[网站前端性能优...

Haorooms博客-前端博客-前端技术,记录web前端开发的技术博客
2017/12/23
0
0
史上最全的前端资源大汇总

1.前言 最近有很多朋友问我有没有相关的书籍推荐,希望能够自学一下前端。 正好最近在查阅文章的时候,发现有朋友已经进行过总结。 经过沟通和“行贿”��,终于取得转载权利,在此感谢晚晴...

mr_lp
2017/01/13
0
0
性能测试知多少---了解前端性能

我的上一篇博文中讲到了响应时间,我们在做性能测试时,能过工具可以屏蔽客户端呈现时间,通过局域网的高宽带可以忽略数据传输速度的障碍。这并不是说他们不会对系统造成性能影响。相反,从用...

长平狐
2013/03/12
78
0
8个能够有效帮助你提高jQuery代码性能(performance)的技巧

日期:2012/02/22 来源:GBin1.com jQuery越来越流行了,大家可能也会发现,在浏览网站过程中,越来越多的网站开始使用jQuery来构建以前需要使用flash来实现的超酷动态效果,事实上jQuery已经...

gbin1
2012/02/22
381
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash各类扩展详解

Bash各类扩展详解 Bash中主要包括大括号扩展、波浪号扩展、变量扩展、子命令扩展、文件名扩展和算数扩展。这些扩展组合在一起为Bash带来了极大的易用性。掌握这些扩展的用法和功能,能够为B...

小陶小陶
37分钟前
1
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
5
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
1
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
1
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部