容器预建

提前创建 Webview 容器

  • 创建时机：闲时创建。Webview 只能在主线程创建，但又不能阻碍主流程，因此需要在 IdleHandler 时机处理。与前端的 requestIdleCallback 、React Scheduler 概念相似。
  • 创建个数：一般仅创建一个，当预创建的 Webview 容器被使用后，再重新预创建（考虑内存状态）

网络建连优化

  • 利用 DNS 预解析以及 DNS 缓存，让请求解析更快。
  • 利用 CDN、域名智能调度等方案，自动选择链路较短的服务。

资源离线化

将 H5 资源提前下载（或内置）到 App 中。这样加载资源时就可以通过 App 内部的请求拦截机制转发本地资源，避免网络请求。

资源分级下发

根据用户设备信息（机型、系统等）下发不同的资源包，尽可能减少资源请求大小。（如低端机不使用高清图等）

资源预加载

对于可能会在后续页面中使用到的资源，通过预加载机制提前加载这些资源，以减少后续页面的加载时间。

可使用 Prefetch 实现这个效果，浏览器会在空闲时间下载指定的资源。

<link rel="prefetch" href="/images/big.jpeg" />
  • 1.

数据预取

将数据获取时机前置，通常是与 Webview 初始化并行，并由客户端发起数据请求。

H5 优化手段_加载

数据缓存

将页面数据存入缓存；下次进入页面，优先使用缓存数据

对于敏感数据、可能对用户造成较大误解的，不建议缓存，比如积分、金币、红包、金额等与钱有关的数据。

其他相对次要的数据，可以使用缓存，比如收藏记录、粉丝数数据等。

数据缓存还应该设定缓存时效，避免数据差异过大。建议缓存一小时，具体可以根据业务决定。

预渲染 NSR

在上一个页面的空闲状态，客户端进行 NSR 处理，提前请求数据、输出 HTML 文档并缓存。

文件优化

通过压缩CSS、JavaScript和HTML文件的大小，减少网络传输时间。同时，将多个CSS和JavaScript文件合并成一个可以减少请求次数，加快页面加载速度。

图片优化

使用图片压缩工具减小图像文件的大小，采用适当的压缩格式（如JPEG、WebP），合理使用CSS Sprite或Base64编码来减少对图片的请求次数。

资源缓存优化

设置合适的缓存策略，利用浏览器缓存机制，尽量减少重复请求，提高页面加载速度。通过设置HTTP响应头中的Cache-Control和Expires来控制静态资源的缓存时间。

延迟加载

对于非关键内容，如图片、广告等，使用懒加载技术，延迟加载这些资源，当用户滚动到它们所在的位置时再进行加载，减少首次加载的时间。

DOM操作优化

减少不必要的DOM操作，尽量使用批处理和缓存DOM查询结果来提高性能。避免频繁的重排和重绘操作，可以使用CSS3动画代替JavaScript动画。

使用Web Workers和Service Worker

将一些耗时的计算或网络请求任务放到Web Workers中进行并行处理，利用Service Worker实现离线缓存、消息推送等功能，提高应用的响应速度和离线体验。

减少重定向和请求次数

避免不必要的重定向和请求，合理使用缓存、本地存储等技术来减少服务器请求次数。

清理无用资源

定期清理不再使用的资源，如未使用的JavaScript库、样式表和图片等，以减少应用的体积。

性能监测和优化

使用工具对H5应用进行性能监测和分析，发现性能瓶颈，并针对性地进行优化，保持应用的高性能状态。