移动H5前端性能五大优化方案（实战篇）

最新推荐文章于 2024-08-12 15:29:16 发布

weixin_34233618

最新推荐文章于 2024-08-12 15:29:16 发布

阅读量495

点赞数

原文链接：https://juejin.im/post/5aba050f51882521d657988b

版权

移动H5前端性能优化

概述

1. PC优化手法在移动端相同适合使用 2. 在移动端我们提出3s加载完首屏资源 3. 根据第二点，首屏加载3s完或使用Loading 4. 根据联通3G网络均匀338KB/s(2.71Mb/s)，所以首屏资源不该超过1014KB 5. 移动端因手机配置原因，除加载外呈现页面速度也是优化重点 6. 根据第五点，要合理处理代码削减呈现页面的损耗 7. 根据第二、第五点，一切影响首屏加载和呈现页面的代码应在处理逻辑中后置 8. 加载完结后用户交互使用时也需注意功能

优化方案

[数据加载优化]

数据加载是最为耗时的进程，可能会占到总耗时的80%时刻，因此是优化的重中之重

#####· 尽量减少HTTP请求

由于移动端WebView能够同时响应的请求为4个（Android 4个，iOS 5后可以6个），所以要尽量缩减页面的请求个数，首次加载的请求个数不能超过4个
a) CSS、JavaScript代码合并
b) 小图片进行合并，并且运用雪碧图
复制代码

#####· 使用缓存

运用缓存能够减少向服务器的请求数，节约加载time，所以所有静态资源都要在服务器端设置缓存，而且尽量运用长Cache（备注：长Cache资源的更新可运用唯一标志）
a) 缓存全部可缓存的资源
b) 运用长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
复制代码

#####· 避免重定向

重定向会影响加载速度，所以在服务器正确设置避免重定向
复制代码

#####· 第三方资源进行异步加载

第三方资源不可控会影响页面的加载和渲染，因而要异步加载第三方资源
复制代码

[脚本执行优化]

脚本处理不妥会堵塞页面加载、烘托，因此在使用时需当留意

· CSS写在头部，JavaScript写在尾部或异步

· 防止图片和iFrame等的空Src
空Src会从头加载当时页面，影响速度和效率

· 尽量防止重设图片大小
重设图片大小是指在页面、CSS、JavaScript等中屡次重置图片大小，屡次重设图片大小会引发图片的屡次重绘，影响性能

· 图片尽量防止运用DataURL
DataURL图片没有运用图片的紧缩算法文件会变大，而且要解码后再烘托，加载慢耗时长
复制代码

[优化CSS]

· 尽量防止写在HTML标签中写Style特点

· 防止CSS表达式
CSS表达式的履行需跳出CSS树的烘托，因而请防止CSS表达式

· 移除空的CSS规矩
空的CSS规矩增加了CSS文件的大小，且影响CSS树的履行，所以需移除空的CSS规矩

· 正确运用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

· 不乱用Float
Float在烘托时核算量比较大，尽量削减运用

· 不乱用Web字体
Web字体需求下载，解析，重绘当时页面，尽量削减运用

· 不声明过多的Font-size
过多的Font-size引发CSS树的功率

· 值为0时不需求任何单位
为了浏览器的兼容性和功能，值为0时不要带单位

· 标准化各种浏览器前缀
a) 无前缀应放在最终
b) CSS动画只用 （-webkit- 无前缀）两种即可
c) 其它前缀为 -webkit- -moz- -ms- 无前缀 四种，（-o-Opera浏览器改用blink内核，所以筛选）

· 防止让选择符看起来像正则表达式
高级选择器履行耗时长且不易读懂，防止运用
复制代码

[JavaScript执行优化]

· 削减重绘和回流
a) 防止不必要的Dom操作
b) 尽量改动Class而不是Style，运用classList替代className
c) 防止运用document.write
d) 削减drawImage

· 缓存Dom挑选与核算
每次Dom挑选都要核算，缓存他

· 缓存列表.length
每次.length都要核算，用一个变量保存这个值

· 尽量运用事情署理，防止批量绑定事情

· 尽量运用ID挑选器
ID挑选器是最快的

· TOUCH事情优化
运用touchstart、touchend替代click，因快影响速度快。但应注意Touch响应过快，易引发误操作
复制代码

[渲染优化]

· HTML运用Viewport
Viewport能够加快页面的烘托，请运用以下代码
< meta name=”viewport” content=”width=device-width, initial-scale=1″>

· 削减Dom节点
Dom节点太多影响页面的烘托，应尽量削减Dom节点

· 动画优化
a) 尽量运用CSS3动画
b) 合理运用requestAnimationFrame动画替代setTimeout
c) 恰当运用Canvas动画 5个元素以内运用css动画，5个以上运用Canvas动画（iOS8可运用webGL）

· 高频事情优化
Touchmove、Scroll 事情可导致屡次烘托
a) 运用requestAnimationFrame监听帧改变，使得在正确的时刻进行烘托
b) 添加呼应改变的时刻距离，削减重绘次数

· GPU加快
CSS中以下特点（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU烘托，请合理运用
PS：过渡运用会引发手机过耗电

复制代码

欢迎关注“IT实战联盟”公众号哦~~~

转载于:https://juejin.im/post/5aba050f51882521d657988b