前言
随着前端页面的复杂化,我们需要更快速、高效的方式来渲染页面。传统的的同步渲染方式已经无法满足需求,所以需要采用新的技术来进行页面渲染。在这个背景下,BigPipe 诞生了。BigPipe 技术基于 Facebook 开源的 BigPipe 技术,用于解决服务端渲染的性能问题。weg-bigpipe 就是基于该技术开发的 npm 包。本文就是要介绍如何使用 npm 包 weg-bigpipe 来优化前端页面渲染,提高页面性能。
安装
npm install --save weg-bigpipe
使用方式
weg-bigpipe 最重要的一个特性就是让我们拆分一个页面成为多个 Pagelets(页面片段),这些 Pagelets 可以独立渲染、并发加载,大大提高了页面渲染的效率。
创建 server
要使用 weg-bigpipe 开始优化页面渲染,首先我们需要创建一个 Express 服务器并引入 weg-bigpipe:
const express = require('express'); const armyknife = require('weg-bigpipe'); const app = express(); app.use(armyknife());
注意:使用之前需要安装 Express 和 weg-bigpipe。
创建 Pagelet
-- -------------------- ---- ------- ----- ------- - ------------------------------- ----- -------------- - --- --------- --- ----------------- ---- --------------------- --- ------------------- --- ---------------------- - -- --- -- -- - ---------------------- - ----- ---------- --------------- - ----------------- ---------------- - ----- --------- ---------------- - -------- ----------------- -------------------- --
Pagelet 的属性分别是:
- id:Pagelet 的唯一标识 ID,同一页面不能重复,发生重复会引起覆盖,数据丢失。
- css:Pagelet 需要的 CSS 样式文件,支持数组(多个文件)和单个文件。
- js:Pagelet 需要的 JS 文件,支持数组(多个文件)和单个文件。
- handler:Pagelet 的渲染方法,返回值可以是数据对象,也可以是渲染后的 HTML 字符串。
在示例代码中,handler
方法返回一个数据对象,其中 res.render('index')
会渲染模板并返回 HTML 字符串。
渲染 Pagelet
-- -------------------- ---- ------- ------------ ----- ---- -- - -------------------- --------------------------------- ----------------------------------- ------------------------- ---------------------------- ---------- ---
当我们访问根路径时,initialPagelet.toHTML()
方法会将 Pagelet 渲染成 HTML 字符串返回,并输出到浏览器中。使用这种方法可以在一个 request-response 循环中构建一个多 Pagelet 的页面。
原理
在服务器端,使用 BigPipe 可以对页面进行分块,划分成多个 Pagelets,每个 Pagelet 都是一个独立的组件,可以独立渲染、并发加载。比如,在产品列表页面中,我们可以通过使用 BigPipe 将商品卡片的渲染单独划分为一个 Pagelet,在发起页面请求时,页面会先渲染出固定的结构和 CSS,然后通过 JSON 数据返回 Pagelet 并插入到页面中。这种策略可以有效地避免过度渲染造成页面响应过慢的问题。
总结
通过上述的介绍,我们了解了如何使用 npm 包 weg-bigipe 来优化前端页面渲染,提高页面性能。weg-bigpipe 帮助我们将一个页面分成多个 Pagelets,让 Pagelets 可以独立渲染、并发加载,提高了页面的响应速度。使用 BigPipe 技术能够很好地解决服务端渲染的性能问题,以此为基础,可以进行更加高效的前端页面开发。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde58