简约流畅页面展现，提升用户体验--智能骨架屏自动生成

2023-10-04 02:16:20

提升用户体验减少页面加载时间的前端解决方案--非侵入式骨架屏

无论是电竞游戏还是日常网页冲浪，快速的加载速度都是用户体验的基本需求。网页页面初始加载的空白时间常常被认为是用户体验最差的部分。即使网页加载内容再丰富，再精彩，也会因为初始空白时间的存在而大打折扣，用户可能在等待加载的过程中失去耐心而离开页面。

针对这一痛点，近年来行业内涌现了许多骨架屏的解决方案，但是它们或多或少都存在一定的局限性。有的操作复杂，开发与维护成本过高；有的渲染效果粗糙，用户体验不佳；有的只适用于特定的框架或技术栈，通用性不强。

为了解决这些痛点，本文提出一种前端非侵入式骨架屏自动生成方案，该方案无需修改任何前端代码，只需在 HTML 中添加一个额外的属性即可，极大的降低了开发与维护成本，并且生成效果优异，可以完美的还原页面的布局和结构，并且具有很强的通用性，适用于任何框架或技术栈。

该方案的原理如下：

页面加载时，浏览器会解析 HTML 代码并构建 DOM 树。
我们利用一个 Mutation Observer 来监听 DOM 树的变化。
当 DOM 树发生变化时，Mutation Observer 会触发一个回调函数。
在回调函数中，我们遍历 DOM 树，找到所有需要显示骨架屏的元素。
然后，我们为这些元素添加一个额外的属性，这个属性的值是元素的宽高以及背景色。
浏览器会根据这个属性的值来生成骨架屏。

该方案的实现步骤如下：

在 HTML 中添加一个 script 标签，引入骨架屏库。
在 script 标签中，添加代码来实例化一个 Mutation Observer。
在 Mutation Observer 的回调函数中，遍历 DOM 树，找到所有需要显示骨架屏的元素。
然后，我们为这些元素添加一个额外的属性，这个属性的值是元素的宽高以及背景色。

该方案的示例代码如下：

<script src="skeleton-screen.js"></script>
<script>
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            const addedNodes = mutation.addedNodes;
            addedNodes.forEach(node => {
                if (node.nodeName === 'DIV') {
                    node.setAttribute('skeleton-screen', 'true');
                }
            });
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
</script>