都说性能优化是个坑, 你一顿操作猛如虎, 性能才跑出 15.
但 Qwik 这个神仙框架竟然能够轻松跑出双 100 分的性能, 这你受得了吗?
快点和我一起领略一下 Qwik 带来的超快感吧!
先看效果
-
创建项目
按照 Getting Started Qwikly 创建一个项目
本文使用的 qwik 版本是
1.2.17
npm create qwik@latest
-
构建部署
再以 SSG 方式构建和部署
npm run qwik add static npm run build
-
跑一下分
通过 Lighthouse 跑一下分, 看最终效果
再说缘由
Q: 为什么 Qwik 开发出来的页面性能如此之好?
A: 将懒加载懒执行做到极致, 达到首屏 0 JS
- 页面加载的时候只有静态内容(HTML/CSS)完成页面渲染
- 用户与页面交互时再下载并执行 JS(例如点击页面上的一个按钮)
具体理念和实现, 建议细看
-
Our Current Frameworks are O(n); We Need O(1)
我们下载到浏览器的 JavaScript 数量每年都在增加。问题在于,随着我们提供更复杂的最终用户体验,需要更多代码,我们网站的复杂性也会增加。我们已经达到了初始下载中代码过多的地步,并且我们网站的启动性能受到影响。这是因为我们使用的框架是 O(n)。这是不可扩展的。
虽然不同的框架最终有不同的斜率,但任何斜率都太大了。相反,我们需要在交互上延迟加载,而不是在初始加载上延迟加载。框架已经知道如何在路由更改时延迟加载,我们只需要更深入地在交互上做到这一点。这是必需的,以便我们的初始加载大小可以是 O(1),并且我们可以根据需要延迟加载代码。只有这样,我们才能在未来继续构建更复杂的 Web 应用程序。
-
尽可能长时间地延迟 JavaScript 的执行和下载。
在服务器上序列化应用程序和框架的执行状态,并在客户端上恢复它。
-
渐进式是根据应用程序的需要下载代码,而不是急切地下载整个代码库。
-
通过函数提取和闭包提取进一步混合代码。通过允许开发人员创建自己的标记函数完成代码拆分。
-
可恢复性是指在服务器上暂停执行,在客户端上恢复执行,而无需重播和下载所有应用程序逻辑。