前言
在现代 web 应用中，单页应用（SPA）已成为一个不可忽视的趋势和需求，而相应地，加载速度和用户体验的优化也日益受到关注。其中，骨架屏（Skeleton Screen）作为一种优化手段，在优化 SPA 的加载速度和用户体验方面具有重要意义。本文将围绕几个方面展开，介绍如何实现基于 Vue 的 SPA 应用的骨架屏优化方案。
骨架屏是什么？
骨架屏是指在页面首次渲染之前，先渲染出页面框架的一种技术，使得页面在加载过程中呈现出占位符或占位图，提高用户体验和页面加载速度，同时也有助于增加用户对页面的信任感。常见的骨架屏形式有文字占位符、图片占位符、列表占位符等。
骨架屏的实现方案
基于手写 CSS 或 SVG 实现骨架屏
最简单的骨架屏实现方式是通过手写 CSS 或 SVG 来实现，在样式中使用特定的占位符来代替真实的内容，并在页面首次渲染之前直接渲染出整个骨架屏。这种方式适合一些简单的场景，对页面的性能影响较小。
示例代码：
<div class="skeleton"> <div class="skeleton-image"></div> <div class="skeleton-text"></div> </div>
-- -------------------- ---- ------- --------- - ----------------- -------- - --------------- - ------ ----- ------- ------ ----------------- ----- - -------------- - ----------- ----- ------ ---- ------- ----- ----------------- ----- -
基于第三方插件实现骨架屏
除手写 CSS 或 SVG 之外，还可以基于一些第三方插件来实现骨架屏的功能，如 vue-content-loader、vue-skeleton-loading 等。这些插件提供了丰富的骨架屏组件和配置项，可以满足更复杂的需求。
示例代码：
<skeleton-theme color="#f5f5f5" highlight-color="#ccc"> <skeleton circle :count="1" /> <skeleton-text width="60%" /> <skeleton-image height="200px" /> </skeleton-theme>
基于服务端渲染实现骨架屏
服务端渲染（SSR）是一种在服务端生成静态 HTML，再将其发送到客户端进行显示的技术，相比于单纯的 SPA，SSR 可以更快地渲染出页面，并且也便于 SEO。在基于 Vue 的项目中，可以通过 Vue SSR 来实现 SSR。在 SSR 的过程中，可以通过模板引擎和 CSS 内联等手段，实现骨架屏的预渲染。
示例代码：
-- -------------------- ---- -------
---- ---------
---- ------ ---
---- ---------------
--------------- --------------- -----------------------
--------- ------ ---------- --
-------------- ----------- --
--------------- -------------- --
-----------------
------
---- ---- ---
------------- ------------- --
-------- -------------------- ---- -------
------ --- ---- ------
------ ----------- ---- --------------------
------ ------- ------- -- -
----- --- - --- -----
----- -
------- ------
--
--------- -
-- ------
------------------- -- -
----------- - -----
---------------- - -- -- -
-- ------
----------------------- -- ---------------------------
--
---
--
--------- -
------ -------- -
-------------- - ------ - ----- --------- - ---
---
--
---
------ - --- --
--骨架屏的优化方案
请求分离
在 SPA 中，由于页面的一部分内容可能是异步加载的，因此渲染骨架屏时要注意哪些东西应该优先显示。一种优化方式是将骨架屏相对独立的部分先行加载，而将可能会影响骨架屏展示的远程数据请求进行分离，优先显示其他页面内容，减少用户等待的时间。
图片加载
随着页面越来越复杂，图片的占比越来越大，而图片的下载时间也成为影响页面加载速度和用户体验的重要因素之一。在渲染骨架屏时，如果直接使用图片占位符，可能会出现闪现的情况，因此一种解决方案是在骨架屏加载完成之后再异步下载和加载图片，避免出现闪现的问题。
进度条式骨架屏
传统的骨架屏通常是一个静态的占位符，展示出来的只是页面的大致结构，但对于某些用户来说，无法准确地获取页面加载的进度信息，因此进度条式的骨架屏也是一种有效的优化方式。它可以通过计算已经加载的部分所占整个页面的比例来实现进度条的动态变化，给用户提供更直观和准确的加载进度信息，增强用户体验和信任感。
总结
骨架屏优化是一种有效的 SPA 加载速度和用户体验优化手段，对于当今 Web 应用中存在的复杂性和信息量大的特点来说，优化骨架屏的方式和设计思路也在不断地丰富和完善。基于 Vue 的骨架屏实现方式既有手写 CSS 或 SVG 的简单方式，也有基于第三方插件和服务端渲染的高级方式，而在骨架屏的优化方面，可从请求分离、图片加载、进度条式骨架屏等多个方面入手，以提升页面的加载速度和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483277b48841e989429ca94