在不断追求页面速度的过程中,我们经常会发现自己回到了同一个点。尽管产品、营销和增长团队努力激励技术团队,但可以提高网站性能的任务经常因为需要重构而被推迟,即使完成了,也并不总是能产生完整的结果。在这个循环中,考虑一些关于实现真正性能的深刻观点是有益的。例如,与其他平台相比,我们可以从 React.js 和 Vue.js 或它们的 SSR(服务器端渲染)扩展(如 Next.js 和 Nuxt.js)的速度中学到什么教训?现在是不是该优化 jQuery 和 CSS 文件的 MB 了?那些为了不了解情况的前端开发人员而牺牲 Web 性能的大公司什么时候才能醒悟?让我们一一回答这些问题。

为什么基于 Next.js 和 Nuxt.js 的网站速度很快?

Next 和 Nuxt 平台是基于 React 和 Vue 构建的 SEO 友好型结构,速度表现突出。但这些平台为什么这么快呢?

React.js 和 Vue.js 是基于组件的框架,将每个页面分解为子组件,如下所示。

 

image(2).png
来源: https://dev.to/yakimych/seriously-do-react-hooks-replace-state-containers-3cpl

 

让我们举一个真实的例子来说明这一点:一个电子商务列表页面。这个列表页面可以被认为具有以下子组件:

  • 标题
  • 上市
    • 列出条目信息
      • 页面标题
      • 面包屑
      • 产品数量
    • 筛选
      • 类别过滤器
      • 过滤器价格
      • ...
    • 排序
    • 产品卡片
      • 产品照片
    • 产品详情
      • 产品名称
      • 产品价格
        • 删除线价格
        • 卖出价
      • 折扣率
      • 活动信息
    • 分页
    • 类别内容
  • 页脚

使用 Nuxt.js 创建基于组件的应用程序时,每个组件都单独编码并包含在母版页中。例如,考虑一个名为 ProductPhoto.js 的文件。无论产品照片需要什么功能(轮播、响应式图像显示等),JS 代码都编写在此组件中。同样,只有此组件使用的 CSS 文件包含在其中。这意味着如果使用该组件,则仅执行每个组件所需的文件。

目前大多数网络平台是如何处理这一过程的?

script.js 文件包含从会员资格、过滤器和购物车页面到菜单的所有内容的代码,该代码在所有页面上运行。结果如何? 

 

图片-1 (2).png

 

带有 3 MB JS 文件和 1.5 MB CSS 文件。主要问题不仅仅是文件大小,而且您不能指望普通 Android 移动设备的 CPU 在几毫秒内执行数千行代码。通过仅运行所需的代码,您可以实现性能提升。

如何消除阻塞渲染的资源?

如今,前 32 万个网站中有 1% 使用 Font Awesome 字体库,平均大小约为 250 KB。考虑到由于滑动效果,异步加载并不受欢迎,请考虑在移动设备或桌面上打开页面时,在页面的第一个屏幕上可以看到多少字体。对 50 个不同平台的简短研究发现,平均使用 3.4 个图标(最常见的是:购物车、用户、菜单、通知)。因此,为了加载四个图标而不会出现问题,我们加载了整个库。

 

图片-2 (1).png
来源: https://trends.builtwith.com/widgets/Font-Awesome

 

高级 JS 框架如何管理这一点?通过仅导入相关组件中使用的图标的 SVG 格式,无需加载整个字体或 CSS 库。

Bootstrap 与 React JS 的使用对比告诉我们什么?

Bootstrap JS 库在全球所有网站的市场份额为 26%,而 React 的使用率约为 4%。Bootstrap 因其灵活性和易用性而广受欢迎,可实现快速开发。然而,这种灵活性是有代价的:您的项目中包含了常规 JS 函数、广泛的代码覆盖范围以及您可能永远不会使用的功能函数。

 

图片-3 (1).png
来源: https://w3techs.com/technologies/comparison/js-bootstrap,js-react

 

那么,让我们问一下:使用量增加 100% 以上意味着什么 前 10,000 至前 1,000 个网站表示? 这表明,最优秀的人正在利用细节优势,从而变得更好。

 

图片-4 (2).png
来源: https://w3techs.com/technologies/comparison/js-bootstrap,js-react

 

总之,我们不必使用以下技术重写我们的网站: 接下来,Nuxt、Angular、React、Vue等等,我们应该了解这些技术对速度有何好处,并将这些最佳实践应用到我们的网络应用程序中。