H5性能优化小结

h5

移动端‘火’了,优化问题就来了。PC端的优化手段适不适合移动端呢?答案是适合的。访问了越大的网站,更是需要优化。优化方向可从:加载,渲染,脚本,css这4个方向出发。

一:加载优化

1.通过合并css,javascript文件或者将小图片如icon合并成雪碧图来减少Http请求。手机端浏览器对我们发出的请求数量有限制,首次加载请求数不能超过4个。

2.通过将css,javascript,html等代码进行压缩,并在服务器要开启Gzip.减少资源大小。资源越少,网页显示速度越快。开启Gzip可以对用户请求的页面进行压缩处理,以达到节省网络带宽,提高网站速度的作用。

3.图片优化。1).用svg,css3等代替图片。2).选择最适合的格式:webP优于JPG,PGN优于GIF。3).最优的大小,过大导致加载过慢,过小导致图片不清晰。4).使用css Srcset。

4.使用缓存,减少对服务器的请求。1).使用时间戳更新Cache.2).缓存一切可缓存的静态资源。3).引用css,js文件,使用外联方式。

5.减少渲染阻塞。1).css样式不用<style>方式写在<head>,采用Link方式。2).Js不写在<head>,js写在</body>前面或者异步加载。

还有:

二:渲染优化

1.开启GPU优化,上一篇文章也有分享到,利弊可以看一下,合理使用。

2.头部加上<meta name=”viewport” content=”width=device-width, initial-scale=1″> viewport可以加快页面渲染。

3.去除多余的Dom节点。

4.频繁的事件导致页面重渲染。优化手段:增加响应变化的时间间隔,减少重绘次数。

三:脚本优化

1.减少对DOM操作,从而减少重绘和回流。

2.缓存要计算的值,比如列表高度或者列表长度等。

3.使用事件代理,而不批量绑定事件。

4.使用ID选择器,速度最快。

5.CLICK事件用touchstart、touchend,响应速度快,but,有时候也会导致误操作。

四:css优化

1.尽量不写内联,内部样式,而采用外链的方式。

2.减少Float的使用,float布局渲染时计算量大。

3.减少高级选择器的使用,计算耗时长而去不易读懂。

4.数值为o,不加单位。

5.减少font-size声明。font-size过多,会影响css树的效率。

6.减少web字体使用。使用web字体需下载,解析,重绘页面。

7.正确规范使用display属性。1)display:block,后不加vertical-align。2)display:inline-block后不加float。3)display:inline,后面不加width,height,float,padding,marging。4)display:table-*不加margin或者float.

还有很多优化的方面,这边只是小部分。大家可以靠我们万能的百度和谷歌,通过实践不断强化优化意识。建议做移动页面前需先补充一些优化知识,这样做出来的页面才能有质量上的提升。

 

 

 

7