让骨架屏更快渲染

背景

随着用户对网页性能的追求，骨架屏（Skeleton Screen）成为了一种越来越受欢迎的前端优化技术。骨架屏可以在页面内容加载时展示一个简单的占位符，以给用户一种页面正在加载的感觉，同时也可以避免空白页面造成的焦虑。

然而，由于骨架屏通常是通过 JavaScript 动态创建并插入 DOM 元素实现的，这会导致页面加载速度变慢，尤其是在移动设备上。因此，在本文中，我们将介绍如何优化骨架屏的渲染速度，以提高用户体验。

技术原理

延迟加载

骨架屏的主要问题在于它需要等待所有页面资源加载完成才能被渲染出来。为了解决这个问题，我们可以使用延迟加载技术。具体来说，我们可以让骨架屏先于其他页面元素加载，并在其他资源加载完毕后再显示真实内容。这样可以让用户更快地看到页面，从而提高用户体验。

具体实现方法如下：

---- ----- ---
---- ---------------------------------

---- -------- ---
---- --------------- --------------------------------

--------
------------- - ---------- -
  -- ------
  ------------------------------------------------ - --------
  -- -----
  ------------------------------------------------- - -------
--
---------

在这个例子中，我们将真实内容通过 display:none; 隐藏，并在页面加载完成后再显示出来。同时，我们也将骨架屏的显示时间推迟到了真实内容加载完成之后。

占位符

除了延迟加载之外，我们还可以通过占位符技术来优化骨架屏的渲染速度。具体来说，我们可以预先计算好每个元素的大小和位置，并创建一个纯 CSS 的占位符，用于占据页面上相应元素的位置。这样，在 JavaScript 动态创建 DOM 元素时，浏览器就不需要重新计算元素的大小和位置，从而提高渲染速度。

具体实现方法如下：

---- ----- --- -- ---
----- ---------------- -----------------------

---- ---- -- ---
---- -----------------
  ---- ------------- -------------------
  ---- ----------- -------------------
  ---- ------------------ -------------------
------

-- --------------- --
------------------- -
  ------ -----
  ------- -----
  -------------- ----
-

----------------- -
  ------- -----
  ----------- -----
  ------ ------
-

------------------------ -
  ------- -----
  ----------- -----
  ------ ------
-

在这个例子中，我们分别为头像、姓名和描述创建了占位符，并将它们的大小和位置通过 CSS 指定好。当页面加载时，这些元素将先被创建成占位符，然后在数据加载完成后再动态替换为真实内容。

总结

通过延迟加载和占位符技术，我们可以显著提高骨架屏的渲染速度，从而提高用户体验。当然，这些技术也可以用于其他需要动态创建 DOM 元素的场景中。

希望本文对您有所

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12370