随着移动互联网的发展，越来越多的网站变成了移动端优先的网站，因此前端开发者需要在保证网站功能和性能的前提下，提供更好的用户体验。PWA（Progressive Web App）作为新一代的 Web 应用技术，为前端开发者提供了不错的选择。但是在使用过程中，我们发现一个问题：在页面切换时会出现白屏的情况，这极大地影响了用户的体验。为此，本文将分享一些解决页面切换白屏问题的经验。
什么是 PWA
PWA 是一种利用现代 Web 浏览器的技术，将 Web 应用程序转变为类似手机 App 的应用程序。它具有一些像原生应用程序一样的特性，例如离线访问，接近原本的应用程序的启动时间和任意应用程序的集成。PWA 是一个灵活的现代 Web 应用程序设计模式，可以更轻松地提供更好的用户体验。
问题描述
PWA 在应用到实际项目中时，我们经常会发现页面切换时会出现白屏的情况，这极大地影响了用户的体验。比如在使用类似滴滴出行等应用时，打开新页面时会突然出现白屏，让人非常不爽。
这个问题是由于在 PWA 中，我们通常采用将整个页面都缓存起来的策略，也就是说，当页面切换时，我们需要从缓存中读取页面资源，然后再渲染页面。而这个读取缓存的过程可能会很耗时，从而导致白屏现象的出现。
解决方法
下面，我们将介绍两种解决页面切换白屏问题的方法：
1. 页面预加载
我们可以采用页面预加载的方式，提前加载下一个页面中的资源。这样，在页面切换时，我们就可以从预加载的缓存中读取资源，而不需要再从网络中下载资源，从而加快页面的渲染速度，避免白屏现象的出现。
--- - ----- -- -------- ---------------- - ----- ------ - ------------------------------- -------------------------- ----------- --------------------------- ----- ------------------------- ------------ ---------------------------------- - --- - ---- -- -------- --------------- - ----- ----------- - ------------------------------------- --------------------- - --- ----- -------- - --------------------------------- ---------------------------- ----- ---------------------------------- --------------------- -- -------- -
在上面的示例代码中，我们先创建一个 link 元素，将其 rel 属性设置为 preload，并将其 href 属性设置为下一个页面的 URL 地址，将其 as 属性设置为 document。这表示预加载下一个页面的 HTML 文档。然后，当我们需要切换到下一个页面时，我们先预加载下一个页面，然后再将 iframe 的 src 属性设置为下一个页面的 URL 地址，这样就可以避免白屏现象的出现了。
2. 页面骨架屏
另外一种解决页面切换白屏问题的方法是使用页面骨架屏。当页面切换时，我们可以先显示一个页面骨架屏，等待页面资源加载完成后再渲染页面内容。这样，即使页面资源加载过程中出现了延迟，用户也不会感到很明显的卡顿，也不会看到白屏的情况了。
--------- - -------- ----- ---------------- ------- ------------ ------- - --------- ----- - ------ ------ ------- ------ ----------------- -------- ------------- ----- -
---
- -----
--
-------- -------------- -
----- ----------- - -------------------------------------
--------------------- - -
---- -----------------
---- -------------------
---- -------------------
---- -------------------
------
--
-
---
- ----
--
-------- --------------- -
--------------- -- -----
----- ----------- - -------------------------------------
----- -------- - ---------------------------------
---------------------------- -----
----------------------------------
-在上面的示例代码中，我们定义了一个骨架屏样式，并在切换页面时显示骨架屏。然后，我们再用 iframe 加载下一个页面的地址，等页面加载完成后，再把 iframe 显示出来，这样就可以避免白屏现象的出现了。
结论
本文介绍了两种解决页面切换白屏问题的方法：页面预加载和页面骨架屏。在使用 PWA 技术开发应用时，前端开发者需要注意白屏问题的存在，适当地使用这些技巧，从而提高用户的体验，创造更好的用户体验，更好地满足移动 Web 应用的需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672e122beedcc8a97c8723af