移动端WebView性能优化

前言

在App的开发过程当中，随着业务的发展，愈来愈多的公司会选择内嵌 WebView，可是便利性的同时，WebView 的性能却有着很大的问题，备受争议。 做为移动开发者应该从哪些方面去优化webView就一个很值得研究的话题。

---

从网页加载提及

咱们从App中打开一个网页，到网页所有加载和渲染和显示完展示出来所须要花费得时间要比native长很多，这中间经历的阶段大体以下：

1. WebView初始化
2. 创建链接
3. 接受页面和样式
4. 页面渲染和脚本下载解析
5. 后端处理数据
6. 前端接受数据
7. 渲染数据

在这几个阶段中网页会经历从无反馈、白屏、正在加载，对用户的使用体验是不好的。

---

优化分析

要对webView进行性能优化 应该针对性的对以上几个阶段所消耗的时间进行优化。

WebView初始化

当在App中第一次打开一个网页，系统首先作的并非直接创建链接，而是启 动浏览器内核。因此第一次webView的初始化要花费大量时间。

优化方法：

• 提早初始化webview
• 客户端代理数据请求

提早初始化webview能够分为：

1. 提早初始化全局webView

当App刚启动时就初始化全局webView并隐藏，当用户访问了webView时，直接使用这个 webView加载对应网页。缺点是须要额外消耗内存。还有须要webView切换时须要清除页面痕迹，容易形成内存泄漏。

2. 设置webView的缓冲池。

App启动后。在webView的缓冲池初始化多个webView。须要加载网页时能够去缓冲池中去取出新的webView。不须要时就能够直接销毁，同时初始化新的webView放进缓冲池中。缺点是相比而言须要更大的额外内存消耗。可是确保减小webView初始化消耗的时间和下降清除页面所形成的内存泄漏

3. 客户端代理数据请求

在初始化的同时，经过 Native 来完成一些网络请求等过程，而后在回传给WebView，使得 WebView初始化不是彻底的阻塞后续过程。

---

创建链接

在创建链接过程当中主要消耗时间：

1. DNS解析服务器地址
2. 链接服务器
3. 服务器处理数据

优化方法：

1. 客户端采用统一的API域名。利用系统对DNS的缓存。减小每次请求的DNS解析时间。
2. 服务器分段输出网页数据

---

页面渲染

一般状况下，CSS 不会阻塞 HTML 的解析，但若是 CSS 后面有 JS，则会阻 塞 JS 的执行直到 CSS 加载完成(即使 JS 是内联的脚本)，从而间接阻塞 HTML 的 解析。

优化方法：

1.CSS 的加载会在 HTML 解析到 CSS 的标签时开始，因此 CSS 的标签要尽 量靠前。 2.可是，CSS 连接下面不能有任何的 JS 标签(包括很简单的内联 JS)，不然会 阻塞 HTML 的解析。 3.若是必需要在头部增长内联脚本，必定要放在 CSS 标签以前。

---

WebView 性能优化总结

• WebView 初始化慢，能够在初始化同时先请求数据，让后端和网络不要闲着。
• 后端处理慢，可让服务器分 trunk 输出，在后端计算的同时前端也加载网络 静态资源。
• 脚本执行慢，就让脚本在最后运行，不阻塞页面解析。
• 同时，合理的预加载、预缓存可让加载速度的瓶颈更小。
• WebView 初始化慢，就随时初始化好一个 WebView 待用。
• DNS 和连接慢，想办法复用客户端使用的域名和连接。 脚本执行慢，能够把框架代码拆分出来，在请求页面以前就执行好。