移动H5前端性能优化

加载优化:

减少HTTP请求(要尽量减少页面的请求数)

                ①合并css,javascript

                ②合并小图片,使用雪碧图

什么是雪碧图？
雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的距离隔开，就解决了上述的两个问题。

显示雪碧图的条件：

1）需要一个设置好宽和高的容器

2）需要设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。

调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）

缓存

使用缓存可以减少向服务器请求数,节省时间,所以将所有的静态资源都要在服务器端设置缓存,并且尽量使用长cache(长cache资源的更新可使用时间戳)

                   ①缓存一切可缓存的资源

                  ②使用长cache(使用时间戳更新cache)

                  ③使用外联式引入css,javascript

压缩HTML,CSS,JAVAscript

减少资源大小可以加快网页显示速度

                  ①压缩(多余的空格,换行符和缩进)

                  ②启用GZip

无阻塞

写在HTML头部的javascript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此css放在页面头部并使用link方式引入,避免在HTML标签中写style,javascript放在页面结尾

使用首屏加载

首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化,

按需加载

 将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量

                ①Lazyload

                ②滚屏加载

                ③通过Media Query加载

预加载

大型重资源页面可使用增加loading的方法,资源加载完成后在显示压面.但loading时间过长,会造成用户流失

可以在当前页加载下一页资源,提升速度

压缩图片

图片是最占流量资源的,因此尽量避免使用它,使用时选择最合适的格式,合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示

                  ①使用智图

                  ②使用其它方式代替图片

                  ③使用srcset

                  ④选择合适的图片

                  ⑤选择合适的大小

减少Cookie

cookie会影响加载速度,所以静态资源域名不使用cookie

避免重定向

重定向会影响加载速度,所以在服务器正确设置避免重定向

异步加载第三方资源

脚本执行优化

脚本处理不当会阻塞页面加载,渲染,因此在使用时需当注意

css写在头部,javascript写在尾部或异步

避免图片和iframe等的空src

空src会重新加载当前页面,影响速度和效率

尽量避免重设图片大小

重设图片大小是指在页面,css,javascript等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能

css优化

尽量避免写在HTML标签中写style属性

 ①避免css表达式

      css表达式的执行需跳出css树的渲染,因此避免css表达式

 ②移除空的css规则

       空的css规则增加了css文件的大小,且影响css树的执行,所以需移除空的css规则

 ③正确使用Display的属性

      display属性会影响页面的渲染,因此请合理使用

         display:inline 后不应该再使用width,height,margin,padding以及float

         display:inline-block 后不应该在使用float

         display:block 后不应该再使用vertial-align

          display:table-* 后不应该再使用margin或者flaot

 ④不滥用Float

          float在渲染时计算量比较大,尽量减少使用

 ⑤不滥用Web字体

          web字体需要下载,解析,重绘当前页面,尽量减少使用

 ⑥不声明过多的font-size

          过多的font-size引发css树的效率

 ⑦值为0时不需要任何单位

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

 ⑧标准化各种浏览器前缀

          无前缀的应放在最后

          css动画只用-webkit-,其他前缀有:-moz-,-ms-,-o-

javascript执行优化

减少重绘和回流

       避免不必要的Dom操作

       尽量改变class而不是style,使用classList代替className

       避免使用document.write

       减少drawImage

缓存Dom选择与计算

缓存列表length

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

 尽量使用事件代理,避免批量绑定事件

尽量使用ID选择器

Touch事件优化

           使用touchstart,touchend,代替click,因快影响速度快

渲染优化

HTML使用Viewport

          viewport可以加速页面的渲染.

        <meta name="viewport" content="width=device-width,initial-scale=1">

减少Dom节点

           Dom节点太多影响页面的渲染,应尽量减少Dom节点

动画优化

          尽量使用css3动画

          合理使用ewquestAnimationFrame动画代替setTimeout

           适当使用Canvas动画5个元素以内使用css动画

高频事件优化

          Touchmove,Scroll事件可导致多次渲染

          使用requestAnimationFrame监听帧变化,使得在正确的时间进行渲染

          增加响应变化的时间间隔减少重绘次数

GPU加速

          css中以下属性(css3 transition,css3 3Dtransforms.Opacity,Canvas,Video)来触发GPU渲染