Webview加载H5优化小记 _H5

一、概述
1、背景

鉴于H5的优势，客户端的很多业务都由H5来实现，Webview成了App中H5业务的唯一载体。
WebView组件是IOS组件体系中非常重要的一个，之前的UIWebView 存在严重的性能和内存消耗问题，iOS 8之后推出WKWebView，旨在代替UIWebView；
WKWebView在性能、稳定性、内存占用上有很大的提升，支持更多的html5特性，高达60fps的滚动刷新率以及内置手势；可以通过KVO监控网络加载的进度，获取网页title；
实践中，大部分App的H5业务将由WKWebview承载。

2、H5页面的体验问题
从用户角度，相比Native页面，H5页面的体验问题主要有两点：

页面打开时间慢：打开一个 H5 页面需要做一系列处理，会有一段白屏时间，体验糟糕。
响应流畅度较差：由于 WebKit 的渲染机制，单线程，历史包袱等原因，页面刷新/交互的性能体验不如原生。

这里讨论的是：第一点，怎样减少白屏时间。
二、Webview打开H5
通过Webview打开H5页面，请求并得到 HTML、css 和 JAVAScript 等资源并对其进行处理从而渲染出 Web 页面。
1、加载流程

初始化Webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资源 ->DOM 渲染 -> 解析 JS 执行 -> JS 请求数据 -> 解析渲染 -> 下载渲染图片-> 页面完整展示

文章插图

DOM渲染之前耗时主要在两部分：初始化Webview 和数据请求，一般Webview首次初始化在400ms这个量级，二次加载能少一个量级。
数据请求依赖网络，网络请求一般经过：DNS查询、TCP 连接、HTTP 请求和响应。数据包括HTML、JS和CSS资源，这些都是在webview在loadRequest：之后做的，这一阶段，用户所见到的都是白屏。(虽然4G已经成为主流，但是4G延迟明显高于Wifi) 。

2、H5页面渲染
对H5页面的渲染，主要包括：渲染树构建、布局及绘制，具体可分为：

处理 HTML 标记并构建 DOM 树。
处理 CSS 标记并构建 CSSOM(CSS Object Model) 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，以计算每个节点的几何信息。
将各个节点绘制到屏幕上。

说明：这五个步骤并不一定一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM 。具体参考：DOM渲染机制与常见性能优化
3、总结

分析Webview打开H5打开的过程，我们发现，在H5优化中，前端重任在肩；

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad 。加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage 。渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline 。复制代码