常见的web前端性能优化

1、

　　语义化HTML：语义化HTML的好处是可使代码简洁清晰、支持不一样设备、利于搜索引擎、便于团队开发；

　　减小DOM节点：加速页面渲染；

　　给图片加上正确的宽高值：这能够减小页面重绘，同时防止图片缩放；

　　防止src属性和link的href属性为空：当值为空时，浏览器极可能会把当前页面当成其属性值加载；

　　正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；

　　连接为目录或首页的地址后面加”/”，如http://www.baidu.com/；

　　用LINK而不用@import方式导入样式；

　　样式放在页头，JS放在页尾；

2、

　　避免使用 CSS Expressions(CSS表达式)：如如background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;

　　避免使用 CSS Filter（CSS滤镜）；

　　使用CSS缩写，减小代码量；

　　经过CSSSprites把同类图片合成一张，减小图片请求；

　　减小查询层级：如.header .logo要好过.header .top .logo；

　　减小查询范围：如.header>li要好过.header li；

　　避免TAG标签与CLASS或ID并存：如a.top、button#submit；

　　删除重复的CSS；

3、

　　尽可能少用全局变量；

　　使用事件代理绑定事件，如将事件绑定在body上进行代理；

　　避免频繁操做DOM节点；

　　不使用EVAL；

　　减小对象查找，如a.b.c.d这种查找方式很是耗性能，尽量把它定义在变量里；

　　类型转换：把数字转换成字符串使用”" + 1，浮点数转换成整型使用Math.floor()或者Math.round()；

　　避免对字符串进行循环操做，譬如替换、查找，应使用正则表达式；

　　删除重复的JS；

4、

　　尽可能合并CSS、JS文件，或将其直接写在页面上，减小HTTP请求；

　　压缩CSS、JS文件，缩短文件传输时间；避免404错误：特别要避免给404指定一个停摆页面，不然全部404错误都将会加载一次页面；

　　通常要求减小DNS查询次数，如同一个页面的请求资源尽可能少的使用不一样的主机名，这能够减小网站并行下载的数量，但不少网站为了加速下载资源实际上是特地用了多个主机　名，这里要作一个权衡；

　　使用CDN加速，使用户从离本身最近的服务器下载文件；

　　减小Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减小 Cookie 的反复传输对主域名的影响；

　　为文件头指定Expires，使内容具备缓存性；

　　使用gzip压缩内容；

 

 

 

加载方面的优化：

　　减小HTTP请求。

由于手机浏览器同时响应请求为4个请求（Android支持4个，iOS 5后可支持6个），因此要尽可能减小页面的请求数，首次加载同时请求数不能超过4个。a) 合并CSS、JavaScript；b) 合并小图片，使用雪碧图（CSS SPRITE）；

　　缓存。

使用缓存能够减小向服务器的请求数，节省加载时间，因此全部静态资源都要在服务器端设置缓存，而且尽可能使用长Cache（长Cache资源的更新可以使用时间戳）。

a) 缓存一切可缓存的资源；b) 使用长Cache（使用时间戳更新Cache）；c) 使用外联式引用CSS、JavaScript；

　　压缩HTML、CSS、JavaScript。

减小资源大小能够加快网页显示速度，因此要对HTML、CSS、JavaScript等进行代码压缩，并在服务器端设置GZip。a) 压缩（例如，多余的空格、换行符和缩进）；b) 启用GZip；

　　确保无阻塞。

写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，所以CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾部或使用异步方式加载

　　使用首屏加载。

首屏的快速显示，能够大大提高用户对页面速度的感知，所以应尽可能针对首屏的快速显示作优化。

　　按需加载。

将不影响首屏的资源和当前屏幕资源不用的资源放到用户须要时才加载，能够大大提高重要资源的显示速度和下降整体流量（PS：按需加载会致使大量重绘，影响渲染性能）。

a) LazyLoad；b) 滚屏加载；c) 经过Media Query加载；

　　预加载。

大型重资源页面（如游戏）可以使用增长Loading的方法，资源加载完成后再显示页面。但Loading时间过长，会形成用户流失。对用户行为分析，能够在当前页加载下一页资源，提高速度；a) 可感知Loading(如进入空间游戏的Loading)；b) 不可感知的Loading（如提早加载下一页）；

　　压缩图片。

图片是最占流量的资源，所以尽可能避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，而后使用智图压缩，同时在代码中用Srcset来按需显示（PS：过分压缩图片大小影响图片显示效果）。

a) 使用智图（雪碧图）；

b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)；

c) 使用Srcset；

d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)；

e) 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕通常宽度））；

　　减小Cookie、避免重定向以及异步加载第三方资源。

Cookie会影响加载速度，因此静态资源域名不使用Cookie。此外，重定向也会影响加载速度，因此在服务器正确设置避免重定向。最后，第三方资源不可控会影响页面的加载和显示，所以要异步加载第三方资源。

 

 

脚本执行优化：

脚本处理不当会阻塞页面加载、渲染，所以在使用时需当注意：

· CSS写在头部，JavaScript写在尾部或异步。

· 避免图片和iFrame等的空Src。

　　空Src会从新加载当前页面，影响速度和效率。

· 尽可能避免重设图片大小。

重设图片大小是指在页面、CSS、JavaScript等中屡次重置图片大小，屡次重设图片大小会引起图片的屡次重绘，影响性能。

· 图片尽可能避免使用DataURL。

DataURL图片没有使用图片的压缩算法文件会变大，而且要解码后再渲染，加载慢耗时长。

 

 

CSS优化：

尽可能避免写在HTML标签中写Style属性。

· 避免CSS表达式CSS表达式的执行需跳出CSS树的渲染，所以请避免CSS表达式

· 移除空的CSS规则空的CSS规则增长了CSS文件的大小，且影响CSS树的执行，因此需移除空的CSS规则

· 正确使用Display的属性Display属性会影响页面的渲染，所以请合理使用a) display:inline后不该该再使用width、height、margin、padding以及floatb) display:inline-block后不该该再使用floatc) display:block后不该该再使用vertical-alignd) display:table-*后不该该再使用margin或者float

· 不滥用Float。

Float在渲染时计算量比较大，尽可能减小使用

· 不滥用Web字体。

Web字体须要下载，解析，重绘当前页面，尽可能减小使用

· 不声明过多的Font-size。

过多的Font-size引起CSS树的效率

· 值为0时不须要任何单位。

为了浏览器的兼容性和性能，值为0时不要带单位

· 标准化各类浏览器前缀。

a) 无前缀应放在最后

b) CSS动画只用 （-webkit- 无前缀）两种便可

c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，因此淘汰）

· 避免让选择符看起来像正则表达式。

高级选择器执行耗时长且不易读懂，避免使用

 

 

JavaScript执行优化：

· 减小重绘和回流。

a) 避免没必要要的Dom操做

b) 尽可能改变Class而不是Style，使用classList代替className

　　　　为document.getElementById("myDIV").classList.add("mystyle"); 　　d iv元素添加class

c) 避免使用document.write

d) 减小drawImage

　　var c=document.getElementById("myCanvas");

　　 var ctx=c.getContext("2d");

　　 var img=document.getElementById("scream");

　　 img.onload = function(){

　　　　　//向画布上绘制图片

 　　 　　  ctx.drawImage(img,10,10);

　　 }

· 缓存Dom选择与计算。

每次Dom选择都要计算，缓存它

· 缓存列表.length。

每次.length都要计算，用一个变量保存这个值

· 尽可能使用事件代理，避免批量绑定事件

· 尽可能使用ID选择器。

ID选择器是最快的

· TOUCH事件优化。

使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引起误操做

 

 

渲染优化

· HTML使用Viewport。

Viewport能够加速页面的渲染，请使用如下代码<meta name=”viewport” content=”width=device-width, initial-scale=1″>

· 减小Dom节点。

Dom节点太多影响页面的渲染，应尽可能减小Dom节点

· 动画优化。

a) 尽可能使用CSS3动画

b) 合理使用requestAnimationFrame动画代替setTimeoutc) 适当使用Canvas动画 5个元素之内使用css动画，5个以上使用Canvas动画（iOS8可以使用webGL）

· 高频事件优化。

Touchmove、Scroll 事件可致使屡次渲染a) 使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染b) 增长响应变化的时间间隔，减小重绘次数

· GPU加速。

CSS中如下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用（PS：过渡使用会引起手机过耗电增长）