📅 最后修改于: 2023-12-03 15:28:59.529000 🧑 作者: Mango
在 Web 应用程序开发中，骨架加载（Skeletal Loading）是一种技术，它可以让 Web 应用程序快速加载，并在后台加载应用程序的主要内容。骨架加载的核心思想是，先呈现一个基础的站点模板，再在后台加载应用程序的主要内容，这样用户可以更快地与站点交互。
骨架加载是一个简单有效的技术，可以大幅提高浏览器首次渲染速度。它的实现方式是：在网页内容完全生成前，先让浏览器加载一个基础骨架框架，然后以异步的方式加载主要内容，让用户可以在等待的同时进行交互，从而获得更好的用户体验。
在实际应用中，骨架加载可以用于许多场景，包括：
使用骨架加载可以获得以下几个优点：
通过骨架加载，用户可以更快地看到站点的基本结构，减少等待时间，提高满意度。
由于较快的渲染速度和更好的用户体验，用户更可能留在网站上，进行进一步的浏览、交互。
搜索引擎的爬虫可以更顺畅地爬取站点的基本结构，从而更好地理解网站的主题和结构。
骨架加载的实现分为两个方面：
骨架加载模板是网站的基础模板，通常由非依赖性的HTML、CSS和JS组成。在这个模板中，可以使用占位符来占据主要内容的位置。
骨架加载的核心就是异步加载主要内容。在网页生成时，主要内容并不会立即下载和呈现到页面上，而是在基础模板生成后，以异步的方式加载主要内容。
以下是一个简单的骨架加载代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skeletal Loading Demo</title>
<script src="skeleton.js"></script>
<link rel="stylesheet" href="skeleton.css">
</head>
<body>
<header>
<!-- header content -->
</header>
<div id="main">
<div class="skeleton">
<!-- skeleton for main content -->
</div>
</div>
<footer>
<!-- footer content -->
</footer>
<script>
var skeleton = new Skeleton({
container: '#main',
contentUrl: '/api/content',
skeletonUrl: '/skeleton/main.html'
});
</script>
</body>
</html>
在这个示例中，我们加载了 skeleton.js 和 skeleton.css 两个文件，它们包含了骨架加载的主要逻辑和样式。在页面中，我们只显示了头部、底部和一个占位符 DIV 元素。骨架加载的核心逻辑是通过 Skeleton 对象来完成的，我们可以通过参数对象传递需要加载的资源地址、骨架模板和主要内容。在这个示例中，主要内容的地址是 /api/content，骨架模板的地址是 /skeleton/main.html。
function Skeleton(options) {
this.container = options.container;
this.contentUrl = options.contentUrl;
this.skeletonUrl = options.skeletonUrl;
this.containerEl = document.querySelector(this.container);
this.skeletonEl = this.containerEl.querySelector('.skeleton');
this.loadContent();
}
Skeleton.prototype.loadContent = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', this.contentUrl, true);
xhr.onload = function() {
var content = xhr.responseText;
this.containerEl.innerHTML = content;
this.skeletonEl.remove();
}.bind(this);
xhr.send();
};
这是一个简化的 Skeleton 对象的实现。在初始化对象时，我们把需要加载的资源地址、骨架模板和主要内容保存在对象属性中。在 loadContent 方法中，我们使用 XMLHttpRequest 对象异步加载主要内容，然后在加载完成后，用获取到的内容替换掉骨架模板元素。最后，我们在页面中移除骨架元素。
骨架加载是一个非常实用的技术，可以在 web 应用程序中提高首次渲染速度和用户留存率，改善用户体验，并帮助搜索引擎更好地理解网站。实现骨架加载并不复杂，只需要设计好一个骨架模板，并使用异步加载技术获取主要内容。