h5 加载完成_Webview加载H5优化小记

Webview加载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(