问题描述
随着前端技术的不断发展，越来越多的应用采用单页面应用（SPA）架构，通过前端路由来实现页面间的无刷新跳转。然而，由于这种跳转方式是异步加载页面内容的，用户在页面跳转过程中会看到空白页面的闪动，这会给用户带来不好的体验。
原因分析
空白页面闪动的原因是由于在路由异步加载页面内容时，加载完成前页面处于空白状态，这种跳转方式无法避免。但可以通过一些技术手段来减少空白页面的时间。
通常情况下，页面中需要加载的静态资源，包括样式、脚本和图片等，在第一次加载完成后会被浏览器缓存起来，再次访问时就可以直接从缓存中获取，而不需要重新发起请求。那么，如何让SPA页面在加载完成后尽可能减少空白时间呢？
解决方案
1. 预加载
预加载是一种提前加载页面所需资源的方法，可以减少页面加载时间。通常情况下，SPA应用中会采用第三方库如PreloadJS或loadjs等来实现预加载。
-- -------------------- ---- -------
-- -------------
----- -------- - -
----- ---------------------- --- -------------
----- ---------------------- --- -------------
----- ---------------------- --- -------------
----- ------------------------- --- ---------------
----- ------------------------- --- --------------
--
----- ------ - --- --------------------------
------------------------------
--------------------- -------- -- -
-- ----------
---2. 骨架屏
骨架屏是一种展示加载中状态的页面效果，通常情况下，骨架屏通过页面占位元素来模拟页面结构，展示出“页面正在加载”的状态，让用户感觉页面正在加载中而不是刷白的闪动。
-- -------------------- ---- -------
---- ------- ---
---- -------------------------
---- ---------------------
---- ---------------------
---- ----------------
-------------
------
---- ---------------------
-------- -------------------- ---- -------
-- ----- --
----------------- -
---------- ------- ---- ---------
-
----------------- - --- -
----------------- -----
--------- ---------
-
----------------- - -------------------------- -
-------- ---
--------- ---------
----- --
---- --
------ --
------- --
-------- ---
----------------- -----
---------- ---------------- -- ---------
-
---------- ---------------- -
-- -
---------- ------------------
-
--- -
---------- -----------------
-
---- -
---------- ------------------
-
-3. SSR（服务器端渲染）
SSR是一种将前端页面的渲染工作放在服务器端完成的技术手段，采用这种方式可以在页面请求时直接返回渲染好的页面，避免了前端构建和路由渲染带来的页面空白时间。
-- -------------------- ---- -------
-- --- -------
----- ------- - -------------------
----- ------ - ---------------------
----- -------- - -----------------------------------------------
--------- ---------------------------------------- --------
---
--------------- ----- ---- -- -
----- ------- - -
---- --------
------ ---- -----
----- -
----- ----------------
----- --------------- ---------------------------------------------
-
--
---------------------------- -------- ----- ----- -- -
-- ----- -
-------------------
------------------------------ ------ --------
- ---- -
---------------
-
---
---总结
通过预加载、骨架屏和SSR等方式，我们可以有效地减少SPA应用中空白页面的闪动问题，达到更好的用户体验。这也提醒我们，在开发SPA应用时需要考虑前端性能优化和体验设计，尽可能减少用户的等待时间和空白页面的显示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbdf0ff6b2d6eab31f6a15