性能优化

通用优化策略

1、网络优化

• 1、减少 http 连接次数，开启长连接
• 2、启动 http2,一个 tcp 连接可以发送所个请求，并且是二进制传输效率比较高
• 3、nginx 可以开启缓存策略，同时开启 gzip
• 4、开启 DNS 预解析(prefetch)，缩短 DNS 的解析时间

2、资源优化

• 1、静态资源压缩合并，减少 HTTP 请求次数
• 2、非核心代码异步加载
• 4、使用 CND 网络加速
• 5、使用 SSR 后端渲染

3、渲染优化

• 1、路由进行懒加载的方式
• 2、使用骨架屏，loding,让用户无感知等待
• 3、尽量减少 dom 操作，减少重绘与重排
• 4、合理的运用截流、防抖函数
• 5、对于长时间计算的任务，可以开启一个 work 去做，减少主进程阻塞时间

重排和重绘

• 重绘(repaint): 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此 损耗较少
• 回流(重排 reflow): 当元素的尺寸、结构或触发某些属性时，浏览器会重新渲染页面，称为回流。此时，浏览器需要重新经过计算，计算后还需要重新页面布局，因此是较重的操作。

事件委托

• 如果有一个列表，列表每一项都需要绑定一个事件，如果有 100 个事件就会绑定 100 次，内存开销比较大
• 事件委托利用事件冒泡的原理，把事件绑定在父元素，通过 target 找到对应的子元素

首屏优化策略

路由懒加载

• 如果是 SPA ，优先保证首页加载。

服务端渲染 SSR

• 如果是纯 H5 页面，SSR 就是首屏优化的终极方案。

App 预取

如果 H5 在 App webview 中展示，可以使用 App 预取资源

• 在列表页，App 预取数据（一般是标题、首页文本，不包括图片、视频）
• 进入详情页，H5 直接即可渲染 App 预取的数据
• 可能会造成“浪费”：预期了，但用户未进入该详情页 —— 不过没关系，现在流量便宜

例如，你在浏览朋友圈时，可以快速的打开某个公众号的文章。

这里可以联想到 prefetch ，不过它是预取 js css 等静态资源，并不是首屏的内容。 不要混淆。

分页

根据显示设备的高度，设计尽量少的页面内容。即，首评内容尽量少，其他内容上滑时加载。

图片 lazyLoad

先加载内容，再加载图片。
注意，提前设置图片容器的尺寸，尽量重绘，不要重排。

离线包 hybrid

提前将 html css js 等下载到 App 内。
当在 App 内打开页面时，webview 使用 file:// 协议加载本地的 html css js ，然后再 ajax 请求数据，再渲染。