第146天:移动H5前端性能优化

移动H5前端性能优化

一、概述

1. PC优化手段在Mobile侧同样适用

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

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

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

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

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

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

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

二、优化方案

1、[加载优化]

加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点

· 减少HTTP请求

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

a) 合并CSS、JavaScript

b) 合并小图片,使用雪碧图

· 缓存

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

a) 缓存一切可缓存的资源

b) 使用长Cache(使用时间戳更新Cache)

c) 使用外联式引用CSS、JavaScript

· 压缩HTML、CSS、JavaScript

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

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

b) 启用Gzip

· 无阻塞

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

· 使用首屏加载

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

· 按需加载

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

PS:按需加载会导致大量重绘,影响渲染性能

a) LazyLoad

b) 滚屏加载

c) 通过Media Query加载

· 预加载

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

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

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

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

· 压缩图片

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

PS:过度压缩图片大小影响图片显示效果

a) 使用智图( [http://zhitu.tencent.com/](http://zhitu.tencent.com/) )

b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)

c) 使用Srcset

d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)

e) 选择合适的大小(1. 首次加载不大于1014KB 2. 不宽于640(基于手机屏幕一般宽度))

· 减少Cookie

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

· 避免重定向

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

· 异步加载第三方资源

第三方资源不可控会影响页面的加载和显示,因此要异步加载第三方资源

2、[脚本执行优化]

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

(1)CSS写在头部,JavaScript写在尾部或异步

(2)避免图片和iFrame等的空Src

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

(3)尽量避免重设图片大小

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

(4)图片尽量避免使用DataURL

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

[CSS优化]

(5)尽量避免写在HTML标签中写Style属性

(6)避免CSS表达式

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

(7)移除空的CSS规则

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

(8)正确使用Display的属性

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

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

b) display:inline-block后不应该再使用float

c) display:block后不应该再使用vertical-align

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

(9) 不滥用Float

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

(10)不滥用Web字体

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

(11)不声明过多的Font-size

过多的Font-size引发CSS树的效率

(12)值为0时不需要任何单位

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

(13)标准化各种浏览器前缀

a) 无前缀应放在最后

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

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

(14)避免让选择符看起来像正则表达式

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

3、[JavaScript执行优化]

(1)减少重绘和回流

a) 避免不必要的Dom操作

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

c) 避免使用document.write

d) 减少drawImage

(2)缓存Dom选择与计算

每次Dom选择都要计算,缓存他

(3)缓存列表.length

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

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

(5)尽量使用ID选择器

ID选择器是最快的

(6)TOUCH事件优化

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

4、[渲染优化]

(1)HTML使用Viewport

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

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

(2)减少Dom节点

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

(3)动画优化

a) 尽量使用CSS3动画

b) 合理使用requestAnimationFrame动画代替setTimeout

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

(4)高频事件优化

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

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

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

(5)GPU加速

CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏惶心 - 技术博客

为博客标题自定义字体

最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。(其实我的博客也弄了只不过他们不看而已)。

4164
来自专栏疯狂的小程序

关于微信小程序内置组件swiper,circular使用分享

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技...

67610
来自专栏大前端开发

微信小程序之图片选择、预览与上传

所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升...

7235
来自专栏小狼的世界

Vimperator的有用操作

可以有一个变通的办法复制,先按下"Ctrl+V",然后再用快捷键复制,接下来Vim的快捷键又起作用了。现在还有一个困惑的地方是不用鼠标,如何选中网页中自己希望的...

933
来自专栏前端小叙

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zo...

6769
来自专栏高爽的专栏

HTML DOM(一):认识DOM

什么是DOM?        通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,Java...

2350
来自专栏惶心 - 技术博客

Grouper.html: 分享群组的最佳方式

之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个...

1726
来自专栏前端人人

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

3344
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3535
来自专栏coding for love

CSS入门1-认识html之标签

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1102

扫码关注云+社区

领取腾讯云代金券