简介
随着 PWA 应用的兴起，前端性能优化越来越受到关注。其中，页面加载速度是一个关键指标。在页面还没有渲染出来之前，用户需要等待一段时间，等待时间过长会让用户感到不耐烦并且离开页面。因此，优化页面的加载速度就成为了至关重要的一环。
为了更好地应对页面加载速度的优化问题，现在常见的方法是采用骨架屏加载技术。
骨架屏加载技术就是预先展示页面大致的结构，让用户得到一种加载速度快的感觉，从而提高用户体验和用户留存率。本文将介绍 PWA 应用中骨架屏加载的实践方法和注意点。
实践
骨架屏加载的实现方式很多，但是我们要考虑的是如何将其应用到 PWA 应用中并且达到最佳效果。
下面我们将结合一些实例，介绍如何实现一个基于 PWA 技术的骨架屏加载效果。
1. 利用 Service Worker 缓存页面骨架
PWA 应用中最重要的一项技术就是 Service Worker，不仅可以让网页在离线状态下工作，还可以有效地缓存数据和页面骨架。
我们可以在 Service Worker 中缓存骨架屏页面，这样在下一次访问时就可以很快地展示出页面骨架，提高用户体验和留存率。
-- -------------------- ---- -------
-- - ------- ---------
-------------------------------- --------------- -
----------------
-------------------------------------------------- -
------ --------------
--------------
--------------------
----------------
-----------------
---
--
--
---
-- - -------- --------
--------------------------------- --------------- -
----------------
--------------------------------------- -
------ ------------
------------------------------------- -
------ --------------------------------- --
--------- --- -----------------
-------------------------- -
------ -------------------------
--
--
--
--
---
-- - ----- ----------------
------------------------------ --------------- -
------------------
--------------------------------------------------- -
-- ---------- -
------ ---------
-
------ ---------------------
--
--
---2. 优化骨架屏的展示效果
骨架屏加载的效果也是很重要的一点。简单的黑色和白色渲染可能会显得过于单调，因此我们可以考虑使用渐进式骨架屏（PSS）实现更好的效果。
PSS 的实现方式很简单，就是在骨架屏的某些区域加入逐渐变化的动画效果。下面是一个简单的示例。
-- -------------------- ---- -------
--------- -
---------- ---- ---- ------ ---------
----------------- --------
--------- ---------
-------- --
--------- -------
-
--------------- -
---------- ---- -- ------ ---------
-------------------- -------
----------- --------
-------- ---
------- -------------
------- -----
----- -------
-------- ----
--------- ---------
---- --
---------- -----------------
------ --------- - -------
-------- ---
-
--------------- -
----------------- -----
-------------- ----
-------------- -----
--------- -------
-------- -----
--------- ---------
-
---------------------- -
---------- ----- -- ----------- ---------
----------------- -----
-------- ---
------- -----
----- -----
--------- ---------
---- --
------ ----
-------- -----
-
------------------- ---- -
-- -
---------- ------------------
-
---- -
---------- -----------------
-
-
------------------- ---- -
-- -
---------- ------------------
-
---- -
---------- -----------------
-
-
------------------- ----- -
-- -
---------- -----------------
-
--- -
---------- ---------------
-
---- -
---------- ----------------
-
-3. 结合图片占位符实现更好的效果
网页中经常使用图片，而图片的加载速度往往是比较慢的，因此我们可以考虑结合图片占位符进行更好的效果展示。
图片占位符就是指在图片没有加载完成之前，使用一种占位的方式展示图片的效果。这种技术已经被广泛应用于各个网站中，例如目前较流行的 LQIP 和 SQIP。
对于骨架屏的页面，我们可以利用图片占位符的方式，优化图片的加载效果。下面是一个简单的示例。
<div class="skeleton-frame"> <img class="skeleton-image" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M15.719%208.285l-1.438-1.428c-.353-.352-.934-.352-1.287%200l-1.43%201.428c-.352.351-.352.932%200%201.284l1.431%201.429c.353.351.934.351%201.287%200l1.438-1.429c.352-.352.352-.933%200-1.284zM21%203.5v17c0%201.104-.896%202-2%202h-14c-1.104%200-2-.896-2-2v-17c0-1.104.896-2 2-2h14c1.104%200%202%20.896%202%202zM19%201.5h-14c-.553%200-1%20.448-1%201v17c0%20.552.447%201%201%201h14c.553%200%201-.448%201-1v-17c0-.552-.447-1-1-1z%27%2F%3E%3C%2Fsvg%3E" data-src="/img/example.jpg"> </div>
总结
骨架屏加载是 PWA 应用中一种很有效的优化页面性能的方法。它可以减少用户等待时间、提高用户体验和留存率。在实践中，我们可以结合 Service Worker 缓存页面骨架、使用渐进式骨架屏和图片占位符等技术，达到更好的优化效果。
当然，还有很多细节问题需要注意，例如页面布局、加载顺序等。只有在细节上做好了，才能真正地优化页面加载速度，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a0bd0968c7c53b0c2a64b