没有IE9+、Chrome、Firefox等现代化浏览器,我都不好意思给你看!
一线城市的陕西人,回西安吧,这里需要你们!

移动端H5前端性能优化点

[前端开发] 来源:php100 人气:734 2017-03-08 16:18:59 评论:-
赞:14

移动端+HTML5,这个组合对前端工程师来说是个不小的挑战:如何让开发的页面能有更好的体验?

如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:

1、PC优化手段在Mobile端同样适用。

2、在Mobile侧我们提出三秒种渲染完成首屏指标。

3、基于第二点,首屏加载3秒完成或使用Loading。

4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。

5、Mobile端因手机配置原因,除加载外渲染速度也是优化重点。

6、基于第五点,要合理处理代码减少渲染损耗。

7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。

8、加载完成后用户交互使用时也需注意性能。

blob.png

加载优化

对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的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。另外,重定向会影响加载速度,所以在服务器正确设置避免重定向。还有,第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源。

 

渲染优化

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:过渡使用会引发手机过耗电增加。)




icon喜欢(14)

评论这篇文章

数据加载中...