Farlanki.

如何提高Web的首屏展示速度

字数统计: 520阅读时长: 1 min
2021/06/05 Share

如何提高 Web 的首屏展示速度,是一个很常见的问题。下面就罗列一下…

预创建 WebView

预创建 WebView 可能是其中最直观的一种。由于 WebView 初始化也是需要时间的,所以可以在空闲的时候将 WebView 预创建好,缓存起来。在有需要的时候将 WebView 拿出来就可以了。
优化时间:WebView 创建耗时

预渲染

预渲染依赖预创建实现。在预创建 WebView 之后,再进行 loadRequest 的操作。那么在需要的时候取得 WebView , 此时的 WebView 就已经是加载好的 WebView 了,比预创建更加彻底。
优化时间:WebView 创建耗时 + 网页加载耗时

数据预取

数据预取的意思是,上层知道了 WebView 即将打开什么 URL ,或者子资源。先通过网络请求将 HTML 或者子资源下载下来。在 WebView 进行真正的 loadRequest 的操作的时候,或者下载子资源的时候,对请求进行拦截,直接返回之前下载好的资源。
优化时间:网页加载中的资源下载耗时

数据预取 2

还有另外一种数据预取方式,不是通过拦截 loadRequest,而是将资源的请求使用 jsb 来实现。客户端收到 jsb 调用后,查找是否有下载好的资源。这种方式只能优化子资源的下载耗时
优化时间:子资源的下载耗时

模板预渲染

和数据预取2搭配一起使用的是模板预渲染。意思是先让 WebView 加载一个只有框架没有内容的网页,然后网页的可变内容使用 jsb 方式拿到。
优化时间:主文档加载耗时

DNS 预热

待补充

参考

  1. 头条公众号技术文章,网址忘了,找到再补充。

彩蛋

竟然在知乎上看到了现任字节 CEO 的一个回答,回答时间在 2014 年。当年加入了字节的同学,现在应该都变成巨佬了吧

CATALOG
  1. 1. 预创建 WebView
  2. 2. 预渲染
  3. 3. 数据预取
  4. 4. 数据预取 2
  5. 5. 模板预渲染
  6. 6. DNS 预热
    1. 6.0.1. 参考
    2. 6.0.2. 彩蛋