详解iOS WebView加载时序和缓存问题总结

简介

本文主要介绍iOS系统中WebView的加载时序、缓存机制及相关问题的总结。

WebView加载时序

WebView的加载时序可以分为以下几个阶段：

发起请求：调用WebView加载网页时，首先会发起一个HTTP请求。
解析HTML：WebView接收到HTTP响应后，会将HTML解析成DOM树和CSSOM树。
解析JS：通过DOM树和CSSOM树计算出页面的布局信息，然后会解析JS脚本。
绘制：计算完成后，将根据渲染树中的每个节点的信息绘制页面。

WebView缓存机制

WebView有两种缓存机制：内存缓存和硬盘缓存。

内存缓存是WebView对一些经常访问的数据进行缓存，以提高访问性能。

硬盘缓存是将 WebView 加载的数据缓存到磁盘上，以便下次访问时不必重新下载数据。有两种硬盘缓存：document 和 resources。document 缓存存储 HTML 文档以及可能的 CSS 和 JS 文件，而 resources 缓存存储页面中的图片和其他文件。

在iOS 9及以上系统版本中，Apple加入了一个新的缓存机制：App Transport Security（ATS）。

该机制要求WebView只能访问使用HTTPS协议并且在ATS白名单中的网站。若不是使用HTTPS连接，则需要设置相关属性才能启用非HTTPS的连接。另外，ATS机制还规定了响应缓存必须要使用HTTPS协议。

下面介绍一下如何在WebView中设置缓存机制。

设置缓存

在iOS中，设置缓存需要通过NSURLRequest和NSURLSessionConfiguration两个类来实现。

let cacheSizeMemory = 10 * 1024 * 1024; // 10 MB
let cacheSizeDisk = 50 * 1024 * 1024; // 50 MB
let configuration = URLSessionConfiguration.default
configuration.urlCache = URLCache(memoryCapacity: cacheSizeMemory, diskCapacity: cacheSizeDisk, diskPath: "myCachePath")
let session = URLSession(configuration: configuration)
let url = URL(string: "http://www.example.com/")!
let request = URLRequest(url: url)

session.dataTask(with: request) { (data, response, error) in
    if let error = error {
        print("Error with request: \(error)")
    } else {
        print("Data: \(data)")
    }
}.resume()

清理缓存

通过修改URLCache的MemoryCapacity和DiskCapacity属性可以进行缓存大小的控制。

URLCache.shared.removeAllCachedResponses()

WebView常见问题

下面列举几个常见的问题及解决方法。

无法与外部链接交互

在iOS中，WebView默认会禁止与外部链接进行交互操作，如跳转到其他app等。需要在ViewController中加入如下代码：

override func viewDidLoad() {
    super.viewDidLoad()
    webView.navigationDelegate = self
    webView.uiDelegate = self
    let request = URLRequest(url: URL(string: "http://www.example.com/")!)
    webView.load(request)
    webView.scrollView.isScrollEnabled = false
    webView.scrollView.bounces = false
}

extension ViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if navigationAction.targetFrame == nil {
            webView.load(navigationAction.request)
        }

        decisionHandler(.allow)
    }
}