干货移动端h5前端性能优化.docxVIP

[导读] 得益于智能手机的普及和各行各业互联网+的运动，移动端的市场占比疯狂增长。 2016年1月艾瑞咨询发布的2015年电商数据显示，2015年中国移动端网购交易额同比暴涨123 2%，在网购总交易额中的占比首次超越PC端达到55%。技术上，HTML5大行其道：1：有数据显示，截至2015，有80%的App全部或部分基于HTML5。2：谷歌浏览器于9月1日起不在支持自动播放Flash。3：亚马逊旗下网站（包括A门户在内）的所有广告将不再使用flash。在可预见的未来，flash广告将被HTML5广告所取代。移动端+HTML5，这个组合对前端工程师来说是个不小的挑战：如何让开发的页面能有更好的体验？这就是我们今天讨论的话题：移动端HTML5页面前端性能优化。如何优化HTML5在移动设置上的性能表现，首先需要明确以下几个原则：1、PC优化手段在Mobile端同样适用。2、在Mobile侧我们提出三秒种渲染完成首屏指标。3、基于第二点，首屏加载3秒完成或使用Loading。4、基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB。5、Mobile端因手机配置原因，除加载外渲染速度也是优化重点。6、基于第五点，要合理处理代码减少渲染损耗。7、基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置。8、加载完成后用户交互使用时也需注意性能。?接