Qwik-能帮你移出项目中99%的JS代码

天翼云开发者社区
• 阅读 83

本文分享自天翼云开发者社区《Qwik-能帮你移出项目中99%的JS代码》,作者:尹****勇

什么是 Qwik Qwik 是一款全栈SSR框架,它号称 -能帮你移出项目中99%的JS代码-

FCP FCP (First Content Paint 首次内容绘制)测量 页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间 现在基本采用 react、vue 等框架进行开发,这就需要如下过程 1.下载框架代码 2.执行框架代码 3.由框架完成页面渲染 这无疑导致了FCP指标的下降 Qwik 采用了SSR,这就省去了上述三个步骤,无疑加快了FCP 但是TTI仍然需要优化

TTI TTI (Time to Interactive 用户可交互时间)测量页面变得完全可交互所需要的时间 主要衡量如下指标 1.FCP 2.为页面所有元素绑定事件 3.事件相应时间在50ms内 框架hydrate(注水,即框架使页面能够相应交互) 对TTI有很大影响,性能瓶颈在JS。 React18的Selective Hydration通过 -让用户交互的部分优先hydrate- 来优化TTI指标。 Qwik 更极端,他的目标是——干掉所有不必要的 JS 耗时,包括两部分 1.JS 作为静态资源加载的耗时 2.JS 运行时的耗时

Selective Hydration Fiber(题外话) Fiber 是纤维的意思,就是比Process和Thread更细的东西。 在 Fiber 之前更新是同步的,一鼓作气运行到底,中途绝不停歇。 假如更新一个组件需要1ms,如果有200个需要更新就是200ms,在这期间就会导致用户输入无响应,体验很差。

Qwik-能帮你移出项目中99%的JS代码

在 Fiber 之后,就采用了 -分片- 的方法来破解同步操作时间过长的问题。 把一个耗时很长的任务分成很多小片,每一个小片的运行时间很短,虽然总时间依然很长,但是在每个小片执行完成之后,都给其他任务一个执行的机会,这样唯一的线程就不会被独占。

Qwik-能帮你移出项目中99%的JS代码

React Fiber 对现有代码的影响 因为是分片,所以完全有可能一个更新任务还没完成,就被另一个更高优先级的更新过程打断,这时候更高优先级的会完成,而低优先级的就会被完全作废然后等待机会重头再来

因为更新可能被打断,所以React Fiber的一个更新过程分为两个阶段: Reconciliation Phase 找出需要更新哪些DOM,这个过程可以被打断 Commit Phase 一鼓作气把DOM更新完,不会被打断 这两个部分和我们的生命周期函数息息相关。

比如说一个低优先级的任务A在执行,已经调用到了componentWillUpdate函数,接下来发现时间分片已经用完了,于是冒出水面,看看有没有紧急任务。等紧急任务执行完成之后任务A就会重新来一遍,所以componentWillUpdate就会再次被调用。 另外componentWillMount也是同样的效果。 所以要注意这两个函数的实现componentWillMount 和 componentWillUpdate.

点赞
收藏
评论区
推荐文章
Ustinain Ustinain
3年前
C语言_练习题(一)
前言:看懂理解代码很容易,难的是把所理解的融会贯通,融合到实例中,你会发现事实和理论会有些许差别,编写实例能更好的帮你积累经验。0x1编写一个程序,要求提示输入一个ASCII码值(如,66),然后打印输入的字符。代码:include<stdio.hintmain(){chari;printf("请输入一个ASCI
Stella981 Stella981
3年前
Manjaro安装与基本配置
0\.安装\启动时选择第二项boot(nonfree),Manjaro自带的驱动精灵会帮你安装好所需驱动,笔记本双显卡则会帮你安装bumblebeedriverboot(nonfree)如果是WIndowsManjaro双系统安装,步骤可以参考:https://my.oschina.net/langxSpiri
Wesley13 Wesley13
3年前
Java序列化JSON时long型数值不准确
现象项目中用到了唯一ID生成器.生成出的ID时long型的(比如说4616189619433466044).通过某个rest接口中返回json数据后,发现浏览器解析完变成了4616189619433466000原因大致描述:java中得long能表示的范围比js中number大,也就意味着部分数值在js中存不下(变成不准确的
Stella981 Stella981
3年前
JavaScript函数式编程,“香”吗?
总说函数是JavaScript的一等公民,很多人就问了,它凭什么?其实凭的就是对于JS这种没有明确归类的“多范式语言”,函数式编程拥有着天然的优势。在JS里,函数本身就被视作对象,可以有属性,能作为参数传给函数,也能作为函数的返回结果,十分便利。而这种特性对于代码日益庞大,业务逻辑逐渐复杂的前端来说称得上是至关重要。
Easter79 Easter79
3年前
SwiftUI 跨组件数据传递
作者:Cyandev,iOS和MacOS开发者,目前就职于字节跳动0x00前言众所周知,SwiftUI的开发模式与React、Flutter非常相似,即都是声明式UI,由数据驱动(产生)视图,视图也会与数据自动保持同步,框架层会帮你处理“绑定”的问题。在声明式UI中不存在命令式地让一个视图变成xxx
liam liam
1年前
使用 Axios 请求库:简单易学的基础指南
Axios是一个流行的基于Promise的HTTP请求库,用于在浏览器和Node.js中进行HTTP请求。它提供了简单易用的API,可以发送各种类型的请求(如GET、POST、PUT、DELETE等),并处理响应数据,Axios在前端工程化项目中有99%的
切图网aming 切图网aming
4个月前
优雅轻量级的网页alert弹窗美化插件 alertify.js
alertify.js是一款用于alert美化的插件,支持弹窗,提示,prompt,confirm等多中方式,并且调用简单,非常适合在项目中使用,也是切图网qietu.com在前端切图项目中比较常用的一款js插件,切图网在选择一款js插件的时候一般都要考虑
天翼云开发者社区
天翼云开发者社区
Lv1
天翼云是中国电信倾力打造的云服务品牌,致力于成为领先的云计算服务提供商。提供云主机、CDN、云电脑、大数据及AI等全线产品和场景化解决方案。
文章
696
粉丝
15
获赞
40