当前位置: 首页 > news >正文

如何使用流式渲染技术提升用户体验

提示:记录工作中遇到的需求及解决办法

文章目录

  • 什么是流式渲染?
  • Node.js 实现简单流式渲染
  • 声明式 Shadow DOM,不依赖 javascript 实现
  • react 实现流式渲染
  • 总结


提示:以下是本篇文章正文内容,下面案例可供参考

什么是流式渲染?

流式渲染主要思想是将HTML文档分块(chunk)并逐块发送到客户端,而不是等待整个页面完全生成后再发送。

流式渲染不是什么新鲜的技术。早在90年代,网页浏览器就已经开始使用这种方式来处理HTML文档。

在 SPA (单页应用)流行的时代,由于 SPA 的核心是客户端动态地渲染内容,流式渲染没有得到太多关注。如今,随着服务端渲染相关技术的成熟,流式渲染成为可以显著提升首屏加载性能的利器。

素材来源于文章

Node.js 实现简单流式渲染

HTTP is a first-class citizen in Node.js, designed with streaming and low latency in mind. This makes Node.js well suited for the foundation of a web library or framework.


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 的

http://www.lryc.cn/news/509490.html

相关文章:

  • 【接口自动化连载】使用yaml配置文件自动生成接口case
  • 前端安全 常见的攻击类型及防御措施
  • 来道面试题——CopyOnWriteArrayList
  • 【Rust自学】5.1. 定义并实例化struct
  • React 生命周期完整指南
  • python中os._exit(0) 强制关闭进程后来杀死线程
  • LeetCode:257. 二叉树的所有路径
  • RSICV国产芯片之CHV208
  • 理解神经网络
  • Android 之 List 简述
  • 设计模式の中介者发布订阅备忘录模式
  • 云手机群控能用来做什么?
  • fpgafor循环语句使用
  • 【FastAPI】BaseHTTPMiddleware类
  • Solon v3.0.5 发布!(Spring 可以退休了吗?)
  • 网络安全攻防演练中的常见计策
  • SD卡模块布局布线设计
  • Flask-----SQLAlchemy教程
  • STM32 高级 物联网通信之CAN通讯
  • “乡村探索者”:村旅游网站的移动应用开发
  • 前端案例---自定义鼠标右键菜单
  • 浅谈归一化
  • lodash常用函数
  • 触控算法总结
  • 齐次矩阵包含平移和旋转
  • Move AI技术浅析(四):运动跟踪与估计
  • NCR+可变电荷块3——NCB/cell绘图1
  • 数据仓库是什么?数据仓库简介
  • AI的进阶之路:从机器学习到深度学习的演变(二)
  • C++中属性(Attributes)