容器预建
提前创建 Webview 容器
- 创建时机：闲时创建。Webview 只能在主线程创建，但又不能阻碍主流程，因此需要在 IdleHandler 时机处理。与前端的 requestIdleCallback 、React Scheduler 概念相似。
- 创建个数：一般仅创建一个，当预创建的 Webview 容器被使用后，再重新预创建（考虑内存状态）
网络建连优化
- 利用 DNS 预解析以及 DNS 缓存，让请求解析更快。
- 利用 CDN、域名智能调度等方案，自动选择链路较短的服务。
资源离线化
将 H5 资源提前下载（或内置）到 App 中。这样加载资源时就可以通过 App 内部的请求拦截机制转发本地资源，避免网络请求。
资源分级下发
根据用户设备信息（机型、系统等）下发不同的资源包，尽可能减少资源请求大小。（如低端机不使用高清图等）
资源预加载
对于可能会在后续页面中使用到的资源，通过预加载机制提前加载这些资源，以减少后续页面的加载时间。
可使用 Prefetch 实现这个效果，浏览器会在空闲时间下载指定的资源。
<link rel="prefetch" href="/images/big.jpeg" />
数据预取
将数据获取时机前置，通常是与 Webview 初始化并行，并由客户端发起数据请求。
数据缓存
将页面数据存入缓存；下次进入页面，优先使用缓存数据
对于敏感数据、可能对用户造成较大误解的，不建议缓存，比如积分、金币、红包、金额等与钱有关的数据。
其他相对次要的数据，可以使用缓存，比如收藏记录、粉丝数数据等。
数据缓存还应该设定缓存时效，避免数据差异过大。建议缓存一小时，具体可以根据业务决定。
预渲染 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应用进行性能监测和分析，发现性能瓶颈，并针对性地进行优化，保持应用的高性能状态。
扫一扫
2249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
