教你快速达成双100分的页面性能

avatar

都说性能优化是个坑, 你一顿操作猛如虎, 性能才跑出 15.

但 Qwik 这个神仙框架竟然能够轻松跑出双 100 分的性能, 这你受得了吗?

快点和我一起领略一下 Qwik 带来的超快感吧!

先看效果

  1. 创建项目

    按照 Getting Started Qwikly 创建一个项目

    本文使用的 qwik 版本是 1.2.17

    npm create qwik@latest

  2. 构建部署

    再以 SSG 方式构建和部署

    npm run qwik add static
npm run build

  3. 跑一下分

    通过 Lighthouse 跑一下分, 看最终效果

    image.png

再说缘由

Q: 为什么 Qwik 开发出来的页面性能如此之好?

A: 将懒加载懒执行做到极致, 达到首屏 0 JS

  • 页面加载的时候只有静态内容(HTML/CSS)完成页面渲染 image.png
  • 用户与页面交互时再下载并执行 JS(例如点击页面上的一个按钮) image.png

具体理念和实现, 建议细看

  • Our Current Frameworks are O(n); We Need O(1)

    我们下载到浏览器的 JavaScript 数量每年都在增加。问题在于，随着我们提供更复杂的最终用户体验，需要更多代码，我们网站的复杂性也会增加。我们已经达到了初始下载中代码过多的地步，并且我们网站的启动性能受到影响。这是因为我们使用的框架是 O（n）。这是不可扩展的。

    虽然不同的框架最终有不同的斜率，但任何斜率都太大了。相反，我们需要在交互上延迟加载，而不是在初始加载上延迟加载。框架已经知道如何在路由更改时延迟加载，我们只需要更深入地在交互上做到这一点。这是必需的，以便我们的初始加载大小可以是 O（1），并且我们可以根据需要延迟加载代码。只有这样，我们才能在未来继续构建更复杂的 Web 应用程序。

  • Think Qwik

    尽可能长时间地延迟 JavaScript 的执行和下载。

    在服务器上序列化应用程序和框架的执行状态，并在客户端上恢复它。

  • Progressive

    渐进式是根据应用程序的需要下载代码，而不是急切地下载整个代码库。

  • WTF Is Code Extraction

    通过函数提取和闭包提取进一步混合代码。通过允许开发人员创建自己的标记函数完成代码拆分。

  • Resumable vs. Hydration

    可恢复性是指在服务器上暂停执行，在客户端上恢复执行，而无需重播和下载所有应用程序逻辑。

avatar
文章
阅读
粉丝