SPA 中的骨架屏预加载技巧

在现代 Web 开发中，单页面应用（Single Page Application，SPA）的兴起让用户体验得到了很大的提升。然而，SPA 的局部刷新却也带来了一个新的问题——页面应用的首屏加载过程变得更加复杂和缓慢。这时，骨架屏（Skeleton Screen）的出现，为解决这一问题提供了一个非常好的解决方案。

骨架屏是一种过渡状态的 Web 页面，通常使用大量占位符元素填充页面，用于提供用户的阅读体验，以代替由前端框架初始化渲染所带来的白屏等待时间。下面，本文将为大家介绍 SPA 中的骨架屏预加载技巧，帮助你提升 Web 网站的用户体验。

预备知识

在开始本文之前，我们需要先了解一些基础知识。

React

React 是 Facebook 意欲提供高性能、易用并轻量级的 JavaScript 框架，目前被广泛应用于前端应用的构建。React 通过构建可重用和可组合的 UI 组件和 Abstraction，尽可能简化了 JavaScript 应用的开发流程。

Ant Design

Ant Design 是一套基于 React 的企业级 UI 设计语言和组件库，其提供了丰富的可自定义的 React UI 组件、比较标准的设计规范和良好的文档。

骨架屏

骨架屏属于前端优化方案的一种，其通过一套专有的算法和模板，将页面初次加载时所关联的元素以及其样式信息预先定义出来。当页面渲染时，骨架屏所预先定义的样式和白色占位符被替换为实际的内容，用户体验得到了大大的提升。

SPA 中的骨架屏预加载

下面我们将为大家介绍 SPA 中使用骨架屏预加载的技巧，为您提升 Web 站点的用户体验。

1. 抽象公用骨架屏组件

我们首先需要定义一个骨架屏模板，并将其抽象成一个公用的组件，以在整个应用中都可以共享。

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

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

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

2. 通过预取数据初始化骨架屏

现实中请求后端接口是不可避免的，我们可以从后端得到需要渲染的数据，然后在组件挂载前先渲染骨架屏并发起网络请求，等待数据返回，在未获取到数据时使用“骨架屏”代替数据。下面展示了一个未优化的渲染方式，下一步讲解中你将会看到优化后的更新骨架屏方法。

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

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

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

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

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

3. 使用代理对象更新骨架屏

更新骨架屏最重要的一步就是寻找一个依赖充足的代理对象来承载，我们可以在内存中开辟一块空白区域，将新数据（真实数据）和骨架屏对象动态绑定在内存上，然后通过代理模式去代理内存空间里面的值，在请求到真实数据之前所有的 getter 方法数据都会返回“骨架屏”的内容，在请求到真实数据之后，会访问到真实数据。

修改上一个步骤中的代码：

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

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

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

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

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

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

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

这个优化方案看起来有点复杂，但是我们可以将 wrapperWithSkeleton 函数简化，在这个函数中，我们新建一个 obj 对象，然后通过 Object.entries(...propsList).forEach() 来更新这个对象，将这个对象返回即可。

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

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

    ------ ----
-

最后，我们将所有的数据结构配置都改成对象格式即可：

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

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

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

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

总结

通过代理模式，我们已经成功地利用骨架屏技术优化了单页面应用中的页面加载速度和用户体验。值得注意的是，本文中只是介绍了一种骨架屏预加载的技巧，但实际应用中还有很多优化方法与技巧，希望各位开发者可以进一步研究和应用。谢谢阅读！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/664d6b39d3423812e4cfaa66

阅读全文

猜你喜欢

  • 如何在 Headless CMS 中使用 webhooks？

    Webhooks 是一种让你的服务在某个事件发生时主动发出 HTTP 请求的机制，通常用于将数据从一个系统传递到另一个系统，是各种系统集成中常用的方式之一。在 Headless CMS 中使用 Web...

    5 个月前
  • CSS Grid 布局：如何使用 grid-area 属性设置元素位置和大小

    CSS Grid 布局：如何使用 grid-area 属性设置元素位置和大小 CSS Grid 布局是一种强大的布局方式，它可以让我们更灵活地控制网页的布局。在 CSS Grid 布局中，我们可以使用...

    5 个月前
  • 解决在 MongoDB with Mongoose 中出现的 Embedded Document Cast Error

    在使用 MongoDB 和 Mongoose 进行前端开发时，经常会涉及到嵌套文档（Embedded Documents）的操作。然而，有时候我们会遇到 Embedded Document Cast ...

    5 个月前
  • CSS Grid 布局：如何使用 grid-template-columns 属性设定列宽

    什么是 CSS Grid 布局 CSS Grid 布局是一种利用网格化布局来排版的 CSS 技术，它的出现在很大程度上解决了过去使用 Float 和 Flexbox 布局所遇到的限制问题。

    5 个月前
  • Cypress E2E 测试：如何进行无头测试

    在前端开发的过程中，测试是非常关键的一步。而 E2E 测试是一个可以完全模拟用户行为的测试流程，可以测试整个应用是否符合用户需求和功能要求。而 Cypress 是一个 JS 编写的 E2E 测试框架，...

    5 个月前
  • Hapi 中如何初始化 MongoDB 数据库

    在使用 Hapi 进行 web 开发时，我们通常会需要一个数据库来存储和管理数据。MongoDB 是一个非关系型数据库，在 Node.js 中也有很好的支持。本文将引导您在 Hapi 中如何初始化 M...

    5 个月前
  • 优化 Java 应用程序的性能

    Java 是广泛使用的高级编程语言之一，无论是开发后端服务还是前端应用都有很好的应用场景。但是随着应用规模的增大，性能问题也可能随之出现。在这篇文章中，我们将探讨一些优化 Java 应用程序的技巧，以...

    5 个月前
  • Deno 中的 tsconfig.json 配置详解

    Deno 是一个现代化的 JavaScript/TypeScript 运行时环境，其采用了 V8 引擎和 Rust 语言完成。使用 Deno 可以快速构建跨平台的 Web 应用程序和命令行工具。

    5 个月前
  • CSS Grid 布局：如何使用 grid-template-areas 属性实现网格区域的命名

    在现代的前端页面布局中，CSS Grid 布局已经成为了非常强大的工具。它不仅能够处理简单的网格布局，还可以快速创建复杂的布局。在这篇教程中，我们将会讨论一个非常有用的 Grid 布局特性，即 gri...

    5 个月前
  • Tailwind 中如何设置圆角矩形框？

    Tailwind 中如何设置圆角矩形框？ 前言 Tailwind 是一种 CSS 框架，可以快速帮助你构建应用程序，尤其是应对紧凑时间表生成的快速原型或应用程序的情况。

    5 个月前
  • ECMAScript 2021：类的新特性

    ECMAScript 2021是JavaScript最新的语言规范，其中包括了许多新的特性。其中，类的新特性是值得注意的一部分，因为JavaScript开发者普遍使用类来组织和管理代码。

    5 个月前
  • Mongoose 中的 Object ID：详解

    在 MongoDB 数据库中，每个文档必须包含一个唯一的 _id 属性。Mongoose 是一个流行的 Node.js ODM（对象文档映射器），它为我们提供了一个 ObjectId 类型，用于创建 ...

    5 个月前
  • 如何实现自动化部署 webpack 打包后的代码？

    当我们完成了前端项目的开发，我们需要将代码部署到生产环境上。手动部署可能会导致出错，而自动化部署则可以避免这些问题。在本文中，我将详细介绍如何使用 Jenkins 实现自动化部署 webpack 打包...

    5 个月前
  • 闲鱼无障碍设计心路历程

    闲鱼无障碍设计心路历程 背景 随着科技的发展，越来越多的人使用智能设备来进行各种生活活动，例如购物、娱乐、社交等等。然而，对于一些视力、听力或者其他身体障碍的人来说，这些过程可能充满了挑战。

    5 个月前
  • 如何在 Elasticsearch 中优化查询性能

    如何在 Elasticsearch 中优化查询性能 Elasticsearch 是流行的开源搜索引擎，由 Apache Lucene 构建。它是一个分布式文档存储和全文搜索引擎。

    5 个月前
  • Socket.io 如何处理卡顿和失去响应？

    在前端开发过程中，Socket.io 是一个经典的库，为开发人员提供了在 Web 应用程序中使用实时通信的能力。然而，有时当我们使用 Socket.io 时，会出现卡顿和失去响应这一类的问题。

    5 个月前
  • 如何在 Vue.js 中使用 RxJS 处理组件间通信

    Vue.js 和 RxJS 是两个非常流行的前端技术，Vue.js 用于搭建应用程序，而 RxJS 则是响应式编程的实现者。在 Vue.js 中使用 RxJS 可以更好地处理组件间的通信。

    5 个月前
  • 在 Mongoose 中处理不同类型的数据库 Id

    Mongoose 是一个 Node.js 中使用 MongoDB 的优秀对象模型工具，它通过定义 Schema、Model 等不同的方式，使得我们可以在 Node.js 中方便地操作 MongoDB ...

    5 个月前
  • 使用 Express.js 搭建一个微型电子商务网站

    在这篇文章中，我们将探讨如何使用 Express.js 搭建一个微型电子商务网站。随着互联网的发展，电子商务已经成为商业领域的必备工具之一。本文将为您提供深入的学习和指导，包括如何使用 Express...

    5 个月前
  • Flexbox 实现自适应布局的注意事项和技巧

    在前端开发中，常常需要使用到布局技术。其中，自适应布局是非常重要的一种技术。而 Flexbox（弹性盒子）正是前端开发中常用的实现自适应布局的一种技术。然而，在使用 Flexbox 进行自适应布局时，...

    5 个月前

相关推荐

    暂无文章