移动 H5 前端性能优化

[PolluxLee]

# 加载优化

1. 减少 HTTP 请求

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

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

2. 缓存

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

3. 压缩HTML、CSS、JavaScript、图片

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

对图片进行压缩

4. 使用首屏加载

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

5. 按需加载（懒加载）

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

6. 预加载

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

7. 减少 DNS 查询
减少 DNS 请求数可能会减少并行下载数，组件可以分散在 2~4 个不同域名

# 渲染优化

1. 合理使用选择器

• 不使用嵌套过多过于复杂的选择器。

• 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用。

• 不要使用类选择器和 ID 选择器修饰元素标签，如 h3#markdown-content，这样多此一举，还会降低效率。

• 不要为了追求速度而放弃可读性与可维护性

2. 减少使用昂贵的属性

• box-shadow
• border-radius
• filter
• 透明度
• :nth-child

3. 优化回流和重绘

浏览器回流、重绘 #75

4. 不建议使用 @import

使用 @import 引入 CSS 会影响浏览器的并行下载。使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。这就导致浏览器无法并行下载所需的样式文件

多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在@import 后面的 js 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载

5. 减少 DOM 数

6. 最小化 iframe 数量

7. 使用事件委托

# 图片优化

• 2k 左右的图片可以使用 base64 内联在 CSS 中
• 比较小的多个图片或图标，可使用 sprite 图，减少请求
• 首屏外的图片采用延迟加载
• 使用css、svg、canvas 或 iconfont 代替图片
• webp、bpg、sharpP 等新图片格式来替代原始格式，这些具有更好的压缩比

Writing...