为什么骨架屏对网站至关重要？

原文来源于：程序员成长指北；作者：八岁小孩学编程

如有侵权，联系删除

前言

平常在我们点进一个网站的时候，或许会看见一个一些动态的灰色条状物，他们代替着本应该出现在这里的内容，作为一种「加载态」的展现方式而呈现，这里我们就拿掘金来举例，进入掘金的首页，按下F12，进入开发者模式后点击「Network」，选择「低速3G」，这时候我们再刷新一次，就可以很清楚的看见一个灰色块了

而这里的灰色块，便是「骨架屏」，现在绝大多数的大厂的网站都会用骨架屏的方案来代替原先的转圈loading了，虽然都是加载态的一种方式，但是相较于干巴巴的转圈，这种在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，填充好本应该展现的内容，给人一种「创造即时转换的错觉」，这也是为什么各个大厂都愿意选择骨架屏来作为加载态的原因

❝

补充：骨架屏是一个「低保真度」的用户界面，信息逐渐加载到其中。它为用户提供了一个视觉提示，即内容正在加载到每个 UI 元素中

❞

骨架屏的好处

无论是Facebook、YouTube，还是国内的知乎，哔哩哔哩，他们都无一例外的采用了骨架屏的方式，这也侧面说明了目前对于加载态的一个还不错的解决方案就是骨架屏，这里我们来讲一下骨架屏的好处：

• 「提高页面加载速度」：骨架屏可以在页面真正加载完毕之前，展示出网页的基本结构和布局。这样，用户可以在等待其他资源加载的过程中，看到页面的基本信息，从而降低等待时间，提高用户体验

• 「提升页面响应速度」：如果网站的响应速度很慢，可能会导致用户流失。骨架屏技术可以优化页面响应速度，使用户能够更快地看到网页的基本信息。这样，用户会感到网页更加互动和易用，而不是等待一个加载状态

• 「提高页面可访问性」：骨架屏技术可以提高网站的可访问性。对于使用屏幕阅读器、放大镜等辅助技术的用户，骨架屏可以为他们提供更好的用户体验，因为它们可以看到页面的基本结构和布局

• 「提高用户满意度」：用户访问一个网站时，第一印象很重要。如果网站加载慢，用户可能会感到失望，从而流失。骨架屏技术可以提供一个更快、更流畅的用户体验，从而增加用户满意度

骨架屏的原理

在进行实际项目开发的时候，一般会让你实现「空态」和「加载态」，后端会给你一个请求接口返回的参数，比如这里我们将「sending」作为请求完接口返回的参数，当「sending==0」的时候，我们这时候就可以返回「空态」，也就是我们常见的报错页面，这些一般需要我们单独去写一份的；当「sending==1」的时候，我们则进入「加载态」，也就是我们常见的加载页面，当资源请求完成后再进行页面的替换即可，这也就是骨架屏的基本实现原理 目前市面上的骨架屏方案大致有三种：

• 手动维护骨架屏的代码

• 使用图片作为骨架屏

• 自动生成骨架屏

手动维护骨架屏的代码的优势是「可定制化高」，但相对的缺点就是这无疑会增加开发者的心智负担；而使用图片作为骨架屏，虽然也比较的耗费人力，但和开发的关系不大了😂；重点来说一下第三种，自动生成骨架屏。

自动生成骨架屏

自动生成骨架屏大大降低了开发成本，但它的缺陷是很明显的，很难做到一套方案吃遍天下鲜。

比如Facebook的「自动化骨架屏技术」，如果放在一个主打视频的网站，如YouTube的话，多半会出现一些兼容问题，并且如果业务需求比较的复杂的时候，这时候还是需要我们自己去手动实现一个骨架屏。

虽然仍然存在一定的问题，但如果是在一个大项目里面，是可以去自己实现一个自动化生成骨架屏的，因为这时候更多的是为自己的项目而服务，不需要去考虑其他的情况，相对来说出现兼容问题的可能性也要低些。

这里来介绍一下饿了么开源的webpack插件「page-skeleton-webpack-plugin」，该插件根据项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过webpack 打包到对应的静态路由页面中

❝

插件原理：利用「Puppeteer」控制「无头Chrome」在服务端打开正在开发中的页面，并在等待页面加载完成后，通过删除或添加元素并使用层叠样式覆盖现有元素，以灰色块的形式隐藏文本、图像和其他内容，同时保留页面布局和样式。然后将修改后的 HTML 和 CSS 样式提取出来，并使用 webpack 插件将其注入到最终生成的「HTML」中

❞

下面按照生成骨架屏的步骤来进行解析：

1. 将页面分块

「page-skeleton-webpack-plugin」插件将页面划分成不同的块，如文本块、图片块、按钮快等，通过分块的方式对每个块进行处理，这样也就不会破坏页面的整体样式和布局，当插件自动生成完骨架屏的时候，也不会出现与真实页面布局差异过大的问题

2. 针对不同的块进行骨架屏化

这里可以查看一种自动化生成骨架屏的方案，这篇文章详细介绍了不同的块是如何进行处理的，这里我就不再过多的去赘述了

将骨架屏打包进项目

这里要注意的一点是，我们所看见的骨架屏的展示，都是在开发过程中的，之所以没有选择在构建的时候去生成，是为了方便我们在开发的时候可以事实的进行观测，以方便我们随时进行修改

总结

不要小瞧了这点优化，这部分的优化对于一个需要大量用户访问的网站来说是非常重要的，因为：

❝

It only takes 3 seconds for the user to abandon a product.

❞

一项研究表明，在 200 毫秒到 1 秒内，人们会觉得他们在自己的行动流中。1 秒后没有任何反馈，他们很可能会失去注意力，10 秒后，用户的注意力很可能会完全失去,这也是为什么大厂都会不约而同的去进行这个优化🐱