移动 H5（PC Web）前端性能优化指南

时间 2019-11-12

标签移动 h5 web 前端性能优化指南栏目无线繁體版

原文原文链接

原文地址https://zhuanlan.zhihu.com/p/25176904?utm_source=wechat_session&utm_medium=social&utm_member=MzFiZGQwMmUwMGNjYjNlYmJkMWY4MmZjMTY4MjdlZmY%3D%0Acss

移动 H5 （PC Web）前端性能优化指南

概述html

PC 优化手段在 Mobile 侧一样适用
在 Mobile 侧咱们提出三秒种渲染完成首屏指标
基于第二点，首屏加载 3 秒完成或使用 Loading
基于联通 3G 网络平均 338KB/s ( 2.71Mb/s )，因此首屏资源不该超过 1014KB
Mobile 侧因手机配置缘由，除加载外渲染速度也是优化重点
基于第五点，要合理处理代码减小渲染损耗
基于第2、第五点，全部影响首屏加载和渲染的代码应在处理逻辑中后置
加载完成后用户交互使用时也需注意性能

熊D注：鉴于第 1 条简单修改了一下标题

优化指南前端

[加载优化]

加载过程是最为耗时的过程，可能会占到总耗时的 80% 时间，所以是优化的重点html5

减小 HTTP 请求

由于手机浏览器同时响应请求为 4 个请求（Android 支持4个，iOS 5 后可支持 6 个），因此要尽可能减小页面的请求数，首次加载同时请求数不能超过 4 个css3

合并 CSS、JavaScript
合并小图片，使用雪碧图

缓存

使用缓存能够减小向服务器的请求数，节省加载时间，因此全部静态资源都要在服务器端设置缓存，而且尽可能使用长 Cache（长 Cache 资源的更新可以使用时间戳）git

缓存一切可缓存的资源
使用长 Cache（使用时间戳更新 Cache）
使用外联式引用 CSS、JavaScript

熊D注：也许使用 MD5 指纹更加可靠

压缩 HTML、CSS、JavaScript

减小资源大小能够加快网页显示速度，因此要对 HTML、CSS、JavaScript 等进行代码压缩，并在服务器端设置 GZipgithub

压缩（例如，多余的空格、换行符和缩进）
启用 GZip

无阻塞

写在 HTML 头部的 JavaScript（无异步），和写在 HTML 标签中的 Style 会阻塞页面的渲染，所以 CSS 放在页面头部并使用 Link 方式引入，避免在 HTML 标签中写 Style，JavaScript 放在页面尾部或使用异步方式加载。web

熊D注：即便用 async 和 defer 属性

使用首屏加载

首屏的快速显示，能够大大提高用户对页面速度的感知，所以应尽可能针对首屏的快速显示作优化正则表达式

熊D注：注意可交互元素的状态管理

按需加载

将不影响首屏的资源和当前屏幕资源不用的资源放到用户须要时才加载，能够大大提高重要资源的显示速度和下降整体流量
PS：按需加载会致使大量重绘，影响渲染性能算法

LazyLoad
滚屏加载
经过 Media Query 加载

预加载

大型重资源页面（如游戏）可以使用增长 Loading 的方法，资源加载完成后再显示页面。但 Loading 时间过长，会形成用户流失
对用户行为分析，能够在当前页加载下一页资源，提高速度

可感知 Loading（如进入空间游戏的 Loading）
不可感知的 Loading（如提早加载下一页）

压缩图片

图片是最占流量的资源，所以尽可能避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，而后使用智图压缩，同时在代码中用 Srcset 来按需显示
PS：过分压缩图片大小影响图片显示效果

使用智图（智图_图片压缩在线工具_在线制做webp ）
使用其它方式代替图片（1. 使用 CSS3； 2. 使用 SVG； 3. 使用 IconFont）
使用 Srcset
选择合适的图片（1. webP 优于 JPG； 2. PNG8 优于 GIF）
选择合适的大小（1. 首次加载不大于 1014KB； 2. 不宽于 640（基于手机屏幕通常宽度））

减小 Cookie

Cookie 会影响加载速度，因此静态资源域名不使用 Cookie

避免重定向

重定向会影响加载速度，因此在服务器正确设置避免重定向

异步加载第三方资源

第三方资源不可控会影响页面的加载和显示，所以要异步加载第三方资源

[脚本执行优化]

脚本处理不当会阻塞页面加载、渲染，所以在使用时需当注意

CSS 写在头部，JavaScript 写在尾部或异步
避免图片和 iFrame 等的空 Src

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

尽可能避免重设图片大小

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

图片尽可能避免使用 DataURL

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

熊D注：使用 DataURL 来显示的图片通常尺寸都较小或结构较简单，推荐优先使用 CSS 实现

[CSS 优化]

尽可能避免写在 HTML 标签中写 Style 属性
避免 CSS 表达式

CSS 表达式的执行需跳出 CSS 树的渲染，所以请避免 CSS 表达式

移除空的 CSS 规则

空的 CSS 规则增长了 CSS 文件的大小，且影响 CSS 树的执行，因此需移除空的 CSS 规则

正确使用 Display 的属性

Display 属性会影响页面的渲染，所以请合理使用

display: inline 后不该该再使用 width、height、margin、padding 以及 float
display: inline-block 后不该该再使用 float
display: block 后不该该再使用 vertical-align
display: table-* 后不该该再使用 margin 或者 float

不滥用 Float

Float 在渲染时计算量比较大，尽可能减小使用

不滥用Web字体

Web 字体须要下载，解析，重绘当前页面，尽可能减小使用

不声明过多的 Font-size

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

值为 0 时不须要任何单位

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

标准化各类浏览器前缀

无前缀应放在最后
CSS 动画只用（-webkit- 无前缀）两种便可
其它前缀为 -webkit- -moz- -ms- 无前缀四种，（-o- Opera 浏览器改用 blink 内核，因此淘汰）

熊D注：出于兼容性考虑是否弃用 -o- 有待看具体项目需求

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

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

熊D注：此外，嵌套过深的选择器也应慎用，权重较大，解析速度慢且不利于 CSS 的模块化

[JavaScript 执行优化]

减小重绘和回流

避免没必要要的 Dom 操做
尽可能改变 Class 而不是 Style，使用 classList 代替 className
避免使用 document.write
减小 drawImage

缓存 Dom 选择与计算

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

缓存列表 .length

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

熊D注：执行过程当中，任何使用超过两次的变量，都应考虑缓存该变量以提升执行效率

尽可能使用事件代理，避免批量绑定事件
尽可能使用 ID 选择器

ID 选择器是最快的

TOUCH 事件优化

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

[渲染优化]

HTML 使用 Viewport

Viewport 能够加速页面的渲染，请使用如下代码

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

减小 Dom 节点

Dom 节点太多影响页面的渲染，应尽可能减小 Dom 节点

动画优化

尽可能使用 CSS3 动画
合理使用 requestAnimationFrame 动画代替 setTimeout
适当使用 Canvas 动画 5 个元素之内使用 css 动画，5 个以上使用 Canvas 动画（iOS8 可以使用 webGL）

高频事件优化

Touchmove、Scroll 事件可致使屡次渲染

使用 requestAnimationFrame 监听帧变化，使得在正确的时间进行渲染
增长响应变化的时间间隔，减小重绘次数

GPU 加速

CSS 中如下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发 GPU 渲染，请合理使用
PS：过渡使用会引起手机过耗电增长

熊D注：推荐拓展阅读 > CSS动画属性性能 & 高性能 CSS3 动画

参考资料

本文由 @米随随发表在移动H5前端性能优化指南读后深表赞同，特来搬砖最后：感谢原做者写的好文~敬礼~