Swift页面切换时出现空白屏问题求助（WKWebView混合应用）

嗨，我来帮你搞定这个切换页面时的白屏困扰！先给你拆解下问题根源：你把HTML加载和本地数据库查询都放在viewDidAppear里执行，这个方法是视图已经显示到屏幕上之后才触发的。如果数据库查询或者HTML加载操作有点耗时，主线程会被直接阻塞，用户自然会看到几秒白屏，直到这些操作完成页面才会出来。

下面给你几个针对性的优化方案，按优先级排序：

1. 提前初始化WKWebView并预加载HTML #

把WKWebView的创建、HTML加载逻辑移到viewDidLoad里——这个方法在视图还没显示的时候就会执行，相当于提前在后台准备资源，等用户切换过来时，页面已经差不多就绪了。

示例代码：

class LoginViewController: UIViewController, WKNavigationDelegate {
    private var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 提前初始化WKWebView
        let webConfig = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: webConfig)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        // 预加载本地HTML文件
        if let fileURL = Bundle.main.url(forResource: "login", withExtension: "html") {
            webView.loadFileURL(fileURL, allowingReadAccessTo: fileURL.deletingLastPathComponent())
        }
        
        // 后台线程执行数据库查询，不阻塞主线程
        DispatchQueue.global(qos: .background).async {
            let pageData = self.fetchDataFromLocalDB()
            
            // 查询完成后切回主线程，把数据注入WebView
            DispatchQueue.main.async {
                self.injectDataToWebView(data: pageData)
            }
        }
    }
    
    // 本地数据库查询逻辑
    private func fetchDataFromLocalDB() -> [String: Any] {
        // 这里写你的数据库查询代码
        return ["userID": "123", "nickname": "testUser"]
    }
    
    // 把数据注入WebView供前端使用
    private func injectDataToWebView(data: [String: Any]) {
        guard let jsonData = try? JSONSerialization.data(withJSONObject: data),
              let jsonStr = String(data: jsonData, encoding: .utf8) else {
            return
        }
        let injectScript = "window.pageLocalData = \(jsonStr);"
        webView.evaluateJavaScript(injectScript) { _, error in
            if let err = error {
                print("注入数据失败：\(err.localizedDescription)")
            }
        }
    }
    
    // 视图显示后仅做必要的收尾操作
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // 比如适配WebView的frame到当前屏幕尺寸
        webView.frame = view.bounds
    }
}

2. 数据库查询必须异步执行 #

不管你把数据库操作放在哪个生命周期方法里，绝对不要在主线程执行耗时的数据库读写。用DispatchQueue.global().async把数据库操作扔到后台线程，完成后再切回主线程更新WebView，这样UI就不会被卡住了。

3. 添加加载占位图（提升用户体验） #

如果预加载还是有短暂空白，可以在WebView上方加个加载指示器（比如系统的UIActivityIndicatorView或者自定义加载动画），等WebView加载完成后再隐藏它，让用户知道页面正在准备中。

示例代码片段：

private let loadingIndicator = UIActivityIndicatorView(style: .large)

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 添加加载指示器到视图
    loadingIndicator.center = view.center
    loadingIndicator.startAnimating()
    view.addSubview(loadingIndicator)
    
    // ... 其他初始化代码
}

// WKNavigationDelegate代理方法：页面加载完成时调用
func webViewDidFinishNavigation(_ webView: WKWebView) {
    loadingIndicator.stopAnimating()
    loadingIndicator.removeFromSuperview()
}

4. 避免重复加载（可选优化） #

如果这个ViewController会被多次push/pop，记得在viewDidAppear里判断WebView是否已经加载过内容，避免每次切换都重新加载HTML，浪费资源。

内容的提问来源于stack exchange，提问作者ashwini technopurple