极致性能优化:前端SSR渲染利器Qwik.js | 京东云技术团队

引言

前端性能已成为网站和应用成功的关键要素之一。用户期望快速加载的页面和流畅的交互,而前端框架的选择对于实现这些目标至关重要。然而,传统的前端框架在某些情况下可能面临性能挑战且存在技术壁垒。

在这个充满挑战的背景下,我们引入了 Qwik.js 框架。Qwik.js 不仅是一个前端框架,更是一种前端性能的终极解决方案。它不仅提供了卓越的性能,还以其独特的特点和优势脱颖而出。

让我们一起深入探索 Qwik.js,发现它如何超越传统,成为前端性能优化的新标杆。

一、现有框架的问题

1.传统CSR方案

慢加载时间: CSR 技术通常要求在浏览器中加载和渲染整个页面,这导致初始页面加载时间较长。用户必须等待页面完全加载才能进行交互。

搜索引擎优化(SEO)问题: 由于页面内容是在客户端生成的,搜索引擎爬虫可能无法正确解析和索引页面内容,这影响了网站的 SEO 效果。

不利于低带宽用户: 对于低带宽用户或网络条件较差的用户,CSR 页面加载时间更长,用户体验更差。

首屏渲染延迟: CSR 通常需要等待 JavaScript 文件的下载和执行,这导致了首屏渲染的延迟,影响了用户的第一印象。

问题分析

A. 渲染阶段耗时分析

B. 请求链路分析

C. 浏览器执行渲染分析

2. 传统SSR方案

复杂的水合过程: 涉及复杂的水合过程,包括将数据传输到客户端并在客户端重新渲染页面。这增加了页面加载时间和网络开销。

A. 请求链路分析

B. 浏览器执行渲染分析

什么是水合(Hydration)?

“hydration”(水合)是指通过客户端JavaScript将静态HTML网页转化为动态网页的过程,以实现对HTML元素的事件处理。这个过程可以通过将事件处理程序附加到HTML元素上来完成

深入了解水合(hydration)过程 水合的难点在于知道我们需要什么事件处理程序以及它们应该附加到哪里。

WHAT(什么):事件处理程序是一个封闭包,包含了事件处理程序的行为。它定义了当用户触发此事件时应该发生什么。

WHERE(哪里):指的是需要将WHAT(事件处理程序)附加到的DOM元素的位置,这包括了事件类型。

更复杂的部分在于,WHAT(事件处理程序)是一个封闭包,它封闭了APP_STATE(应用程序状态)和FRAMEWORK_STATE(框架内部状态):

APP_STATE(应用程序状态):这是应用程序的状态。APP_STATE通常是人们所说的状态。没有APP_STATE,您的应用程序将无法向用户展示任何动态内容。

FRAMEWORK_STATE(框架内部状态):这是框架的内部状态。没有FRAMEWORK_STATE,框架不知道应该更新哪些DOM节点以及何时应该更新它们。这包括组件树和对渲染函数的引用等内容。

那么,我们如何恢复WHAT(APP_STATE + FRAMEWORK_STATE)和WHERE呢?方法是通过下载并执行当前HTML中的组件。在HTML中下载和执行已渲染的组件是水合的昂贵部分。

换句话说,水合是一种通过在浏览器中急切地执行应用程序代码来恢复APP_STATE和FRAMEWORK_STATE的方法,它涉及以下步骤:

  1. 下载组件代码。
  2. 执行组件代码。
  3. 恢复WHAT(事件处理程序闭包)和WHERE(DOM元素),以获取事件处理程序闭包。
  4. 将WHAT(事件处理程序闭包)附加到WHERE(DOM元素)。

这个过程的关键是将APP_STATE和FRAMEWORK_STATE从已渲染的组件中恢复,以确保应用程序在客户端获得正确的状态和行为。这对于实现前端与后端的协同工作以提供动态用户体验至关重要。

二、Qwik.js框架的特点

可恢复性(Resumability):一种无开销的水合替代方案 那么,如何设计一个没有水合且没有开销的系统呢?

为了消除开销,框架不仅必须避免恢复(RECOVERY),还必须避免上述所提到的第四步。第四步是将WHAT附加到WHERE,这是可以避免的成本。

要避免这种成本,您需要三样东西:

  1. 将所有所需的信息序列化为HTML的一部分。序列化的信息需要包括WHAT、WHERE、APP_STATE和FRAMEWORK_STATE。
  2. 一个全局事件处理程序,依赖事件冒泡来拦截所有事件。事件处理程序需要是全局的,这样我们就不需要急切地在特定的DOM元素上单独注册所有事件。
  3. 一个工厂函数,可以延迟恢复事件处理程序(WHAT)。

这种方法的关键是在HTML中序列化所有必需的信息,以及使用全局事件处理程序来拦截和处理事件,而不必显式将事件处理程序附加到特定的DOM元素上。这样可以避免昂贵的步骤四,从而提供无开销的可恢复性,同时仍能实现前端的互动性和性能优化。

A. 渲染阶段耗时分析

B. 请求链路分析

C. 浏览器执行渲染分析

四、效果和成果

五、挑战

Qwik.js无水合方案可能会带来一些挑战,其中包括以下几个方面:

  1. 新技术的学习曲线: 采用新的前端架构或技术,如Qwik.js,通常需要团队成员学习和适应新的工作流程和最佳实践。这可能需要一些时间和培训来确保团队熟练掌握新技术。
  2. 服务器开销增加: 在无水合方案中,服务器可能需要更多的计算资源来序列化和提供所需的信息,以及处理全局事件处理程序。这可能会导致服务器开销的增加,特别是在大量并发请求的情况下。
  3. Node.js并发挑战: 对于Node.js服务器,处理大量并发请求可能会带来挑战。在无水合方案中,服务器可能需要同时处理多个请求,因此需要考虑服务器的并发性能和扩展性。

作者:京东创新零售 李健

来源:京东云开发者社区 转载请注明来源

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安全好用的远程协同运维软件重点推荐-行云管家

对于运维小伙伴而言,一个安全好用的远程协同运维软件至关重要,不仅可以提高工作率,降低工作风险,还能快速解决运维难题。目前市面上远程协同运维软件品牌比较多,这里我们小编给推荐行云管家IT远程协同运维平台。 安全…

LeetCode 面试题 16.17. 连续数列

文章目录 一、题目二、C# 题解 一、题目 给定一个整数数组,找出总和最大的连续数列,并返回总和。 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4] 输出: 6 解释: 连续子数组 [4,-1,2,1] 的和最大,为 6。…

IDEA中配置Maven

一、Maven下载 首先我们进入maven官方网站,进入网页后,点击Download去下载 下载免安装版,解压即可,解压至磁盘任意目录,尽量不要取中文名如下图: 二、配置Maven环境变量 复制Maven所在的路径 D:\maven\apache-maven-3.6.3,此电脑右键选择属性->高级系统设置->环境…

UE5——源码阅读——100——渲染——高清截图

创建事件,用于代码的调试 获取当前客户端所属的World 标记是否在进行重入绘制 是否开始缓存区可视化转存帧,主要针对请求屏幕截图或电影转存 判断是否需要高清截图 这下面这个函数执行高清截图 是否需要缓存区的可视化转存 判断是否开始渲染 如果…

黑盒测试用例设计方法之等价类划分法

等价类划分法是一种典型的黑盒测试用例设计方法。采用等价类划分法时,完全不用考虑程序内部结构,设计测试用例的唯一依据是软件需求规格说明书。 等价类 所谓等价类,是输入条件的一个子集合,该输入集合中的数据对于揭示程序中的…

MySQL 排序,分组,Limit的优化策略

目录 1. MySQL 中的两种排序方式 2. 排序优化策略 2.1 对排序字段添加索引 2.2 可以和WHERT字段创建联合索引 2.3 优化 FilerSort 排序方式 3. 分组优化策略 3.1 能WHERE不HAVING 3.2 减少ORDER BY,GROUP BY,DISTINCT 3.3 遵照最左前缀法则 4.…

更新版PHP神算网八字算命星座解梦周易占卜程序源码/PC+H5移动端整站适配/PHP源码带手机版

源码简介: 这个是更新版PHP神算网八字算命星座解梦周易占卜程序源码,能够在PCH5移动端整站适配。作为H5付费算命PHP源码,八字算命网站源码,功能很多强大实用。 2023.3 更新记录: 1、更新了23年属相信息;…

pytorch实现 --- 手写数字识别

本篇文章是博主在人工智能等领域学习时,用于个人学习、研究或者欣赏使用,并基于博主对人工智能等领域的一些理解而记录的学习摘录和笔记,若有不当和侵权之处,指出后将会立即改正,还望谅解。文章分类在Pytorch&#xff…

海康威视解码器维修DS-6900系列DS-6916UD

海康威视解码器常见维修型号:DS-6916UD/DS-6901/DS-6904/DS-6908/DS-6910/DS-6912UD/6A16 DS-6A16UD 产品类型:视音频解码器纠错 I/O接口:输入 DVI-I纠错;输出 VGA,BNC纠错;音频输入 HDMI纠错 产品特性 …

安科瑞关于新能源电动汽车有序充电的对策-安科瑞黄安南

摘要 随着我国能源战略发展以及低碳行动的实施,电动汽车已逐步广泛应用,而电动汽车的应用非常符合当今社会对环保意识的要求,以及有效节省化石燃料的消耗。由于其没有污染排放的优点以及政府部门的关注,电动汽车将成为以后出行的…

【网络知识必知必会】聊聊数据链路层以太网

文章目录 前言1. 认识以太网2. 以太网帧格式已经有了ip地址, 为什么还要有 mac 地址呢?认识MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对于TCP协议的影响 总结 前言 本文继续来聊聊网络传输中数据链路层中的一个代表协议, 以太网. 以太这个词其实最早出现在物理学当中, 在早…

基于SpringAOP实现自定义接口权限控制

文章目录 一、接口鉴权方案分析1、接口鉴权方案2、角色分配权限树 二、编码实战1、定义权限树与常用方法2、自定义AOP注解3、AOP切面类(也可以用拦截器实现)4、测试一下 一、接口鉴权方案分析 1、接口鉴权方案 目前大部分接口鉴权方案,一般…

HTML5的语义元素

HTML5语义元素&#xff1a; HTML5提供新的语义元素来明确一个web页面的不同部分&#xff1a;<head>、<nav>、<section>、<article>、<aside>、<figcation>、<figure>、<footer>。 1&#xff09;、<section>元素&#x…

dockerfile避坑笔记(VMWare下使用Ubuntu在Ubuntu20.04基础镜像下docker打包多个go项目)

一、docker简介 docker是一种方便跨平台迁移应用的程序&#xff0c;通过docker可以实现在同一类操作系统中&#xff0c;如Ubuntu和RedHat两个linux操作系统中&#xff0c;实现程序的跨平台部署。比如我在Ubuntu中打包了一个go项目的docker镜像&#xff08;镜像为二进制文件&am…

2023年11月5日网规考试备忘

早上题目回忆&#xff1a; pki体系 ipsec&#xff0c;交换安全&#xff08;流量抑制&#xff09; aohdlc bob metclaf —ethernet pon tcp三次握手 OSPF lsa&#xff1f;交换机组ospf配置问题&#xff0c;ping网关可通&#xff0c;AB不通 raid6 300G*8 网络利用率 停等协议10…

【C++初阶】一、入门知识讲解(C++关键字、命名空间、C++输入输出、缺省参数、函数重载)

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 【数据结构初阶】十一、归并排序(比较排序)的讲解和实现 &#xff08;递归版本 非递归版本 -- C语言实现&#xff09;-CSDN博客 引入&#xff1a;什么是C C语言是结构化和模块化的…

剑指JUC原理-9.Java无锁模型

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码&#x1f525;如果感觉博主的文章还不错的话&#xff0c;请&#x1f44d;三连支持&…

Flink SQL 窗口聚合详解

1.滚动窗⼝&#xff08;TUMBLE&#xff09; **滚动窗⼝定义&#xff1a;**滚动窗⼝将每个元素指定给指定窗⼝⼤⼩的窗⼝&#xff0c;滚动窗⼝具有固定⼤⼩&#xff0c;且不重叠。 例如&#xff0c;指定⼀个⼤⼩为 5 分钟的滚动窗⼝&#xff0c;Flink 将每隔 5 分钟开启⼀个新…

如何在知识付费系统小程序开发中实现社区互动和用户参与

在知识付费系统小程序的开发中&#xff0c;实现社区互动和用户参与可以通过以下步骤实现&#xff1a; 1. 建立用户身份验证和管理系统 // 后端示例代码&#xff08;Node.js&#xff09; // 用户注册 app.post(/register, (req, res) > {const { username, email, passwor…

如何在电脑上制作可视化待办任务清单?

在现代高效工作的节奏下&#xff0c;上班族们需要管理大量的待办任务和工作事项。可视化的待办任务清单能够使我们清晰地了解自己的任务进度和工作优先级。每天打开电脑&#xff0c;我们可以直观地看到还有哪些任务需要完成&#xff0c;避免遗漏和混乱。而如何将这些任务清单可…