如何通过流式渲染提升用户体验?

什么是流式渲染?

流式渲染的核心理念是将 HTML 文档分割成小块(chunk),并逐步地发送给客户端,而非等待整个页面完整生成后再进行传输。这种方式能够极大地提升用户的初始加载体验,特别是在网络条件不佳或者页面内容复杂的情况下。

流式渲染并非新兴技术,早在 90 年代,网页浏览器就已开始运用这种模式来处理 HTML 文档。不过,在 SPA(单页应用)大行其道的时期,由于其核心在于客户端动态渲染内容,流式渲染未能引起广泛关注。然而,现今随着服务端渲染技术的日臻成熟,流式渲染已成为显著优化首屏加载性能的有力手段。

Node.js 实现简单流式渲染

HTTP 是 Node.js 中的一等公民,其在设计时就充分考虑了流式传输和低延迟特性。这使得 Node.js 极为适合作为 Web 库或框架的构建基础。
———— Node.js 官网

Node.js 从设计之初就将流式传输数据纳入考量,以下是一个简单的示例代码:

const Koa = require('koa');
const app = new Koa();// 假设数据需要 5 秒的时间来获取
renderAsyncString = async () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve('<h1>Hello World</h1>');}, 5000);})
}app.use(async (ctx, next) => {ctx.type = 'html';ctx.body = await renderAsyncString();await next();
});app.listen(3000, () => {console.log('App is listening on port 3000');
});

这是一个简化的业务场景,运行之后,会出现长达 5 秒的白屏,然后才显示出"Hello World"这段文字。

毫无疑问,没有用户会愿意忍受一个长达 5 秒的白屏网页!在 web.dev 对于 TTFB(Time To First Byte,首字节时间)的介绍中提到,加载第一个字节的时间应当控制在 800ms 以内,才能称得上是优质的 Web 网站服务。

为了改善这种情况,我们可以借助流式渲染技术。比如,先向用户呈现一个加载中的提示或者骨架屏,以此来优化用户体验。下面是改进后的代码:

const Koa = require('koa');
const app = new Koa();
const Stream = require('stream');// 假设数据需要 5 秒的时间来获取
renderAsyncString = async () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve('<h1>Hello World</h1>');}, 5000);})
}app.use(async (ctx, next) => {const rs = new Stream.Readable();rs._read = () => {};ctx.type = 'html';rs.push('<h1>loading...</h1>');ctx.body = rs;renderAsyncString().then((string) => {rs.push(`<script>document.querySelector('h1').innerHTML = '${string}';</script>`);})
});app.listen(3000, () => {console.log('App is listening on port 3000');
});

采用流式渲染后,页面最初会显示"loading…",然后在 5 秒后更新为"Hello World"。

需要特别注意的是,Safari 浏览器对于何时触发流式传输可能存在一些限制(以下内容未找到官方说明,而是通过实践总结得出):

  • 传输的 chunk 大小需大于 512 字节。若小于此值,可能无法有效触发流式传输,影响用户体验。
  • 传输的内容必须能够在屏幕上实际渲染。例如,传输<div style="display:none;">...</div>这样隐藏的内容可能是无效的,无法实现流式渲染的预期效果。

声明式 Shadow DOM,不依赖 javascript 实现

在上述的代码中,我们运用了一定的 JavaScript 代码。本质上,我们需要预先渲染一部分 HTML 标签作为占位,随后再用新的 HTML 标签对其进行替换。使用 JavaScript 来实现这一过程相对容易,但如果禁用了 JavaScript 呢?

这就可能需要借助一些 Shadow DOM 的技巧!众多组件化设计的前端框架都包含了 slot(插槽)的概念,在 Shadow DOM 中也提供了 slot 标签,其可用于创建可插入的 Web Components。在 Chrome 111 及以上版本中,我们能够使用声明式 Shadow DOM,无需依赖 JavaScript,在服务器端就能实现 shadow DOM 的功能。以下是一个声明式 Shadow DOM 的示例:

    <template shadowrootmode="open"><header>Header</header><main><slot name="hole"></slot></main><footer>Footer</footer></template><div slot="hole">插入一段文字!</div>

从中可以清晰地看到,我们的文字成功插入到了 slot 标签之中。利用声明式 Shadow DOM,我们能够对之前的示例进行改写:

const Koa = require('koa');
const app = new Koa();
const Stream = require('stream');// 假设数据需要 5 秒的时间来获取
renderAsyncString = async () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve('<h1>Hello World</h1>');}, 5000);})
}app.use(async (ctx, next) => {const rs = new Stream.Readable();rs._read = () => {};ctx.type = 'html';rs.push(`<template shadowrootmode="open"><slot name="hole"><h1>loading</h1></slot></template>`);ctx.body = rs;renderAsyncString().then((string) => {rs.push(`<h1 slot="hole">${string}</h1>`);rs.push(null);})
});app.listen(3000, () => {console.log('App is listening on port 3000');
});

运行这段改写后的代码,其结果与之前完全相同。更为重要的是,即便我们禁用了浏览器的 JavaScript,代码依然能够正常运行!

声明式 Shadow DOM 是一个相对较新的特性,您可以在这篇文档中获取更多详细信息。

react 实现流式渲染

现在让我们转换视角,来看看 React 框架中的流式渲染。自 React 18 版本之后,在框架层面上开始支持流式渲染。下面是使用 nextjs 对之前的示例进行改写的代码:

import { Suspense } from 'eact'const renderAsyncString = async () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve('Hello World!');}, 5000);})
}async function Main() {const string = await renderAsyncString();return <h1>{string}</h1>
}export default async function App() {return (<Suspense fallback={<h1>loading...</h1>} ><Main /></Suspense>)
}

运行这段代码,其效果与之前的示例完全一致,并且同样无需运行任何客户端的 JavaScript 代码。

关于 React 的流式渲染,您可以在官方的技术层面解释中获取更深入的信息。在本文中,仅作为对流式渲染的概要介绍,不对其进行更为细致的讲解。

总结

本文从理论层面深入探讨了流式渲染的相关实现方案。理论上,流式渲染的概念和实现相对简单。HTTP 标准和 Node.js 早在很久以前就对这一特性提供了支持。然而,在实际的工程应用中,流式渲染并非易事。以 React 为例,要实现流式渲染,不仅需要 React 自身作为用户界面(UI)框架提供支持,还需要借助像 nextjs 这样的元框架(meta framework)来赋予服务端相应的能力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【从零开始学架构 架构基础】四 架构设计的复杂度来源:可扩展性复杂度来源

架构设计的复杂度来源其实就是架构设计要解决的问题&#xff0c;主要有如下几个&#xff1a;高性能、高可用、可扩展、低成本、安全、规模。复杂度的关键&#xff0c;就是新旧技术之间不是完全的替代关系&#xff0c;有交叉&#xff0c;有各自的特点&#xff0c;所以才需要具体…

新书速览|Linux C与C++一线开发实践

《Linux C与C一线开发实践》 本书内容 Linux C/C编程在Linux应用程序开发中占有重要的地位&#xff0c;掌握这项技术将在就业竞争中立于不败之地。《Linux C与C一线开发实践》内容针对初中级读者&#xff0c;贴近软件公司一线开发实践。全书厚达620多页&#xff0c;知识点丰富…

Java中String和StringBuilder的区别

当然可以&#xff0c;我们可以通过面试问答的形式来探讨String和StringBuilder的区别。 面试官&#xff1a;请解释一下Java中String和StringBuilder的区别。 面试回答&#xff1a; 1. 不可变性&#xff08;Immutability&#xff09; String&#xff1a;String对象是不可变的…

微信小程序添加点击事件

在微信小程序中&#xff0c;给<view>组件添加点击事件非常直接&#xff0c;你可以使用bindtap属性来绑定一个事件处理函数。下面是添加点击事件的基本步骤和示例代码&#xff1a; 步骤&#xff1a; 在WXML文件中&#xff1a;给需要添加点击事件的<view>标签添加bi…

第六周周报

摘要 本周重点跟着网课学习了pytorch框架下张量的各种常用操作API&#xff0c;为后面跑模型做准备&#xff0c;因为看的视频比较偏向原理&#xff0c;现在对张量有了一个新的认识。其次在时序的研究上&#xff0c;最近我在看图神经网络跟时序结合的方向&#xff0c;所以本周学…

Qt自定义类型

概述 在使用Qt创建用户界面时&#xff0c;特别是那些具有特殊控件和特性的界面时&#xff0c;开发人员有时需要创建新的数据类型&#xff0c;以便与Qt现有的值类型集一起使用或代替它们。 QSize、QColor和QString等标准类型都可以存储在QVariant对象中&#xff0c;作为基于qo…

51单片机第6步_stdlib.h库函数

本章重点学习stdlib.h库函数。 #include <REG51.h> //包含头文件REG51.h,使能51内部寄存器; #include <stdlib.h> //float atof (char *s1); //参数s1字符串可包含正负号,小数点或E(e)来表示指数部分,如123.456或123e-2; //若首字符是非数据字符,或为正负号…

es6语法复习一

es6语法 1.var 变量提升 2.let 不存在变量提升&#xff0c;只能定义一次 3.const 先定义再使用&#xff0c;定义好来不能修改 4.解构赋值 [a,b,c][1,2,3],{a,b,c}{a:1,b:2,c:3} 5.模版字符串 let aaa; ${a} is ok 6.对象简化写法 const school{ name, change, improve(){ cons…

力扣2438.二的幂数组中查询范围内的乘积

力扣2438.二的幂数组中查询范围内的乘积 lowbit求所有2的幂 accumulate函数(begin,end,start,way)求和/积的方式求积并取模 const int N 1e9 7;class Solution {public:int lowbit(int x){return x & -x;}vector<int> productQueries(int n, vector<vector&l…

[NSSCTF]-Reverse:[SWPUCTF 2021 新生赛]easyapp(安卓逆向,异或)

无壳 把后缀名改为zip&#xff0c;找到apk 查看jadx 这里调用了MainActivity的lambda$onCreate$0$MainActivity&#xff0c;然后又调用了Encoder进行异或。 exp&#xff1a; result棿棢棢棲棥棷棊棐棁棚棨棨棵棢棌 key987654321 flag for i in range(len(result)):flagchr(…

HarmonyOS开发:应用完整性校验

简介 为了确保应用的完整性和来源可靠&#xff0c;OpenHarmony需要对应用进行签名和验签。 应用开发阶段&#xff1a; 开发者完成开发并生成安装包后&#xff0c;需要开发者对安装包进行签名&#xff0c;以证明安装包发布到设备的过程中没有被篡改。OpenHarmony的应用完整性校…

Foxit Reader与PDF交互性:探索高级功能

引言 PDF&#xff08;Portable Document Format&#xff09;文件格式以其跨平台的一致性和丰富的多媒体支持而广受欢迎。Foxit Reader作为一款功能全面的PDF阅读器&#xff0c;不仅提供了基本的查看和导航功能&#xff0c;还支持PDF文件中的多种交互式元素。本文将深入探讨Fox…

SQL Server中 MERGE 语句

在 SQL Server 中,MERGE 语句用于根据两个表之间的条件来插入、更新或删除记录。它通常用于同步两个表的数据,其中一个表是源表(包含要插入或更新的数据),另一个是目标表(数据要插入或更新的表)。 1、本文内容 语法参数备注触发器的实现权限有关索引的最佳做法MERGE 的…

探索sklearn的贝叶斯奥秘:朴素贝叶斯分类器全解析

&#x1f680; 探索sklearn的贝叶斯奥秘&#xff1a;朴素贝叶斯分类器全解析 朴素贝叶斯分类器是一类基于贝叶斯定理的简单概率分类器&#xff0c;它们在文本分类、垃圾邮件识别等领域表现出色。在Python的sklearn库中&#xff0c;朴素贝叶斯分类器以其实现简单和效率高效而受…

关于响应式编程的理解与SpringCloudGateway的理解

关于响应式编程的理解与SpringCloudGateway的理解 一. 响应式编程与函数式编程的区别二. 响应式编程中常用的组件2.1 RxJava定义2.2 Rxjava基本概念2.3 RxJava 用法 三 SpringcloudGateway四 常见的四种限流规则 一. 响应式编程与函数式编程的区别 总的来说&#xff0c;响应式编…

qt中的枚举值-QMetaEnum

QMetaEnum 测试代码hcpp 讲解 测试代码 h #include <QMainWindow> #include <QDebug>QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public QMainWindow {Q_OBJECTpublic:MainWindow(QWidget *parent nullptr);~M…

GPIO和PIN

文章目录 1 GPIO和Pin1.1 GPIO和Pin基础概念1.2 GPIO输入模式1.3 GPIO输出模式1.4 GPIO的HAL库1.4.1 一些HAL库表示1.4.2 HAL库常用GPIO函数1.4.3 GPIO点亮led灯程序例子 1 GPIO和Pin 1.1 GPIO和Pin基础概念 ​ 单片机有很多的引脚&#xff0c;为了操控每一个引脚&#xff0c…

grpc学习golang版( 四、多服务示例 )

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 第五章 多proto文件示例 第六章 服务器流式传输 第七章 客户端流式传输 第八章 双向流示例 文章目录 一、前言二、定义proto文件三、编写server服务端四、编写Client客…

MySQL之可扩展性(九)

可扩展性 直接连接 2.修改应用的配置 还有一个分发负载的办法是重新配置应用。例如&#xff0c;你可以配置多个机器来分担生成大报表操作的负载。每台机器可以配置成连接到不同的MySQL备库&#xff0c;并为第N个用户或网站生成报表。 这样的系统很容易实现&#xff0c;但如果…

使用Python自动化收集和处理视频资源的教程

在这篇教程中&#xff0c;我们将介绍如何利用Python脚本自动化收集和处理视频资源。这篇文章将帮助您掌握基本的网络自动化技术&#xff0c;并使用相关库进行视频资源的获取和保存。以下是具体的实现步骤和代码示例。 环境准备 在开始之前&#xff0c;请确保您的工作环境中已…