`
烁烁Bo11
  • 浏览: 10053 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

移动端HTML5性能优化

阅读更多
移动端HTML5性能优化

[导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长。 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 2%,在网购总交易额中的占比首次超越PC端达到55%。

技术上,HTML5大行其道:

1:有数据显示,截至2015,有80%的App全部或部分基于HTML5。

2:谷歌浏览器于9月1日起不在支持自动播放Flash。

3:亚马逊旗下网站(包括Amazon.com门户在内)的所有广告将不再使用flash。在可预见的未来,flash广告将被HTML5广告所取代。

移动端+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、加载完成后用户交互使用时也需注意性能。

我们针对其中几个代表性方案进行探讨:

加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素优化也是不能忽略的。

1、减少HTTP请求

因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个,建议优化要点为以下2点:

1、合并CSS、Java

2、合并小图片,使用雪碧图

2、缓存

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

1、缓存一切可缓存的资源

2、使用长Cache(使用时间戳更新Cache)

3、使用外联式引用CSS、Java

3、压缩HTML、CSS、Java

减少资源大小可以加快网页显示速度,所以要对HTML、CSS、Java等进行代码压缩,并在服务器端设置GZip。

1、压缩(例如,多余的空格、换行符和缩进)

2、启用GZip

4、无阻塞

写在HTML头部的Java(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,Java放在页面尾部或使用异步方式加载

5、使用首屏加载

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

6、按需加载

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

1、LazyLoad

2、滚屏加载

3、通过Media Query加载

另外,提醒大家一点:按需加载会导致大量重绘,影响渲染性能。

7、预加载

大型重资源页面(如游戏)可使用增加Loading的方法,资源加载完成后再显示页面,但Loading时间过长,会造成用户流失。

1、可感知Loading(如进入空间游戏的Loading)

2、不可感知的Loading(如提前加载下一页)

3、对用户行为分析,可以在当前页加载下一页资源,提升速度。

8、压缩图片

图片是最占流量的资源,因此尽量避免使用他,使用时选择最合适的格式(实现需求的前提下,以大小判断),合适的大小,然后使用智图压缩,同时在代码中用Srcset来按需显示。

1、使用智图

2、使用其它方式代替图片(使用CSS3;使用SVG;使用IconFont)

3、使用Srcset

4、选择合适的图片(webP优于JPG;PNG8优于GIF)

5、选择合适的大小(首次加载不大于1014KB;基于手机屏幕一般宽度不宽于640)

提醒大家一点:过度压缩图片大小影响图片显示效果。

9、减少Cookie,避免重定向以及异步加载第三方资源

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



脚本执行优化
脚本处理不当会阻塞页面加载、渲染,因此在使用时需要注意以下几点:

1、CSS写在头部,Java写在尾部或异步。

2、避免图片和iFrame等的空Src,空Src会重新加载当前页面,影响速度和效率。

3、尽量避免重设图片大小,重设图片大小是指在页面、CSS、Java等中多次重置图片大小,多次重设图片大小会引发图片的多次重绘,影响性能。

4、图片尽量避免使用DataURL,DataURL图片没有使用图片的压缩算法文件会变大,并且要解码后再渲染,加载慢耗时长。



CSS优化
1、尽量避免写在HTML标签中写Style属性。

2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染,因此请避免CSS表达式。

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

4、正确使用Display的属性,Display属性会影响页面的渲染,建议各位站长要合理使用。

(1)、display:inline后不应该再使用width、height、margin、padding以及float

(2)、display:inline-block后不应该再使用float

(3)、display:block后不应该再使用vertical-align

(4)、display:table-*后不应该再使用margin或者float

5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。

6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面,尽量减少使用。

7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。

8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位。

9、标准化各种浏览器前缀

(1)、无前缀应放在最后。

(2)、CSS动画只用(-webkit- 无前缀)两种即可。

(3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种(-o-Opera浏览器改用blink内核,所以淘汰)。

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

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



Java执行优化
1、减少重绘和回流

(1)、避免不必要的Dom操作

(2)、尽量改变Class而不是Style,使用classList代替className

(3)、避免使用document.write

(4)、减少drawImage

2、缓存Dom选择与计算,每次Dom选择都要计算,缓存他。

3、缓存列表.length,每次.length都要计算,用一个变量保存这个值。

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

5、尽量使用ID选择器,ID选择器是最快的。

6、TOUCH事件优化,使用touchstart、touchend代替click,因快影响速度快,但应注意Touch响应过快,易引发误操作。



渲染优化
HTML文档是以包含文档编码信息的数据流方式在网络间传输,页面的编码信息一般会在HTTP响应的头部信息或在文档内的HTML标记中指明,客户端浏览器只有在确定了页面编码后才能正确的渲染页面,所以在绘制页面或执行任何的java代码前,大部分的浏览器(ie6、ie7、ie8除外)都 会缓冲一定字节的数据来从中查找编码信息,不同的浏览器当中预缓冲的字节数是不一样的。

1、HTML使用Viewport

Viewport可以加速页面的渲染,请使用以下代码:


2、减少Dom节点

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

3、动画优化

(1)、尽量使用CSS3动画。

(2)、合理使用requestAnimationFrame动画代替setTimeout。

(3)、适当使用Canvas动画5个元素以内使用css动画,5个以上使用Canvas动画(iOS8可使用webGL)。

4、高频事件优化

Touchmove、Scroll事件可导致多次渲染。

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

(2)、增加响应变化的时间间隔,减少重绘次数。

5、GPU加速

CSS中以下属性(CSS3 transitions、CSS3 3Dtransforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用。(PS:过渡使用会引发手机过耗电增加。)
分享到:
评论

相关推荐

    从实验出发的移动端性能优化

    周祺提到的几个书籍资源分别是《高性能网站建设指南》、《高性能Web应用开发》、《HTML5权威指南》和《移动Web性能优化》。这些资源为开发者提供了深入学习性能优化的途径,涵盖了性能优化的基础知识、最佳实践以及...

    HTML5缓存机制浅析:移动端Web加载性能优化

    摘要:本文作者,腾讯游戏平台与社区产品部安卓开发组高级工程师贺辉超详细分析了各种缓存机制的原理、用法及特点,并针对Android移动端Web性能加载优化的需求,帮助开发者选择如何利用适当缓存机制来提高Web的加载...

    移动端购物车自动结算html5代码

    9. **优化性能**:为了避免不必要的重绘和回流,可以使用`requestAnimationFrame`来安排代码在浏览器下一次绘制之前执行,或者利用`textContent`而不是`innerHTML`来改变文本内容,因为前者不会解析HTML。...

    HTML5移动端实战源码

    5. 移动端性能优化:如减少HTTP请求、压缩资源、懒加载、使用Web Worker等方法提高网页性能。 6. 实战案例分析:可能包含一些实际的移动网页或应用开发项目,如天气应用、新闻滚动、游戏等,帮助学生巩固理论知识并...

    移动端html5带小数点的数字软键盘

    综上所述,创建一个移动端html5带小数点的数字软键盘涉及到HTML5的新特性,JavaScript事件处理,响应式设计,以及跨平台兼容性等多个方面。通过理解和运用这些知识点,开发者能够构建出符合需求且用户体验良好的数字...

    HTML5移动端导航栏

    综上所述,HTML5移动端导航栏的设计和开发涉及到许多技术和细节,需要结合语义化、响应式设计、交互性、可访问性以及性能优化等多个方面进行综合考虑。通过熟练掌握这些知识点,开发者可以构建出高效、美观且易用的...

    移动端html5实现列表左滑删除

    8. 兼容性和性能优化:确保这个功能在各种设备和浏览器上都能正常工作,可能需要考虑触控事件的兼容性问题。此外,为了优化性能,避免频繁的DOM操作,可以使用批处理更新或虚拟DOM技术。 综上所述,移动端HTML5实现...

    移动端H5商城模板源码-34个页面

    在实际使用中,开发者还需要考虑SEO优化、性能优化、兼容性测试等多方面问题。对于前端开发者,理解并掌握HTML5和JavaScript的基本语法,以及如何运用它们来构建响应式布局和交互,是使用这个模板前的必备技能。而...

    html5移动端表格设计.docx

    3. **性能优化**:减少资源加载时间,使用合适的技术如服务端渲染、延迟加载等。 4. **用户体验**:确保操作直观,信息易于理解,符合用户习惯。 5. **兼容性**:测试页面在不同浏览器和操作系统上的表现,确保广泛...

    html5网站支持移动端

    综上所述,HTML5在移动端的支持使得企业网站不仅能够在不同平台上保持一致性和兼容性,还能够提供丰富的交互功能和优化的用户体验。通过合理运用HTML5的新特性,我们可以创建出既美观又实用的移动端网站,满足用户在...

    移动端H5 UI框架

    首先,H5(HTML5)是超文本标记语言的最新版本,它增强了网页的互动性和多媒体支持,为移动设备提供了更好的性能和适应性。HTML5框架则是在HTML5基础上构建的,它们通常包括CSS(层叠样式表)和JavaScript库,以简化...

    移动端 html5 锁死不让滚动条滚动

    标题“移动端html5锁死不让滚动条滚动”所描述的问题正是这种需求的一个实例。在HTML5中,我们可以通过监听触摸事件来实现这一功能。以下是一个详细的解释和实践方法: 首先,我们需要了解`ontouchstart`和`...

    HTML5移动端图片上传滤镜特效.zip

    在移动端,性能优化是关键。考虑到移动设备的计算能力相对有限,开发者可能会使用Web Worker来实现图片处理的异步操作,避免阻塞主线程,提高用户体验。同时,通过懒加载策略,只在用户需要时才处理图片,可以进一步...

    移动端、h5省市区三级联动

    6. **性能优化**:在移动端,性能是个关键因素。为了提高加载速度和运行效率,可能会使用异步加载数据,只在需要时才加载下级区域数据,或者使用虚拟滚动等技术减少渲染的DOM元素数量。 7. **用户体验优化**:除了...

    移动端精美的HTML5音乐播放器

    【移动端精美的HTML5音乐播放器】是一款专为手机和平板等移动设备设计的音乐播放器,它利用了HTML5的音频API和jQuery库来实现流畅、互动性强的音乐播放功能。HTML5作为现代网页开发的标准,其音频元素(`<audio>`)...

    h5移动端部门树展示

    7. **性能优化**: 对于大规模的数据,一次性加载可能会导致页面卡顿。可以使用懒加载策略,只加载可视区域内的节点,其余节点在滚动到相应位置时动态加载。 8. **触摸友好**: 考虑到移动端的触摸操作,需优化...

    整套移动端h5页面源码

    9. **性能优化**:代码分割、懒加载、预加载等技术可以优化加载速度,提高用户体验。 10. **测试**:单元测试和集成测试确保代码质量,如Jest、Mocha或Enzyme等工具可用于JavaScript测试。 商城静态代码可能包括...

    H5移动端商城网站模板

    12. **性能优化**:对于移动端,性能尤为重要。需要考虑减少HTTP请求、压缩资源、使用懒加载、优化图片和视频等方法,提升页面加载速度。 13. **测试与适配**:在多种设备和浏览器上进行兼容性测试,确保商城在各种...

    HTML5+JQuery Mobile 移动端WebApp案例

    HTML5和JQuery Mobile是构建移动WebApp的两个关键技术,它们共同为开发者提供了在移动...通过解压并分析"HTM5Demo"中的代码,你可以更直观地了解这两个技术如何协同工作,进而创建出高性能、高交互性的移动Web应用。

Global site tag (gtag.js) - Google Analytics