构建现代Web应用：5个基本的前端架构原则

QdFe
92 阅读6分钟

我们应该始终遵循的原则。

  • 原则 1：异步或延迟加载
  • 原则 2：有意识地进行 Tree-shake、打包和清除无用代码
  • 原则 3：设定和遵守性能预算

在可能的情况下我们应该遵循的原则。

  • 原则 4：坚持 Web 平台 API 和 Web 标准
  • 原则 5：使用新一代前端框架

原则 1：异步或延迟加载

这是一个我们应该始终遵循的原则。

在前端开发中，图像、字体和 JavaScript 等 Web 资产的加载策略是关键。

值得一提的是，Google 的核心价值观核心要素是定义 Web 应用程序用户体验的指标。这些指标也会被 Google 搜索引擎仔细检查。

特别是在客户端渲染场景中，JavaScript 模块的加载至关重要。如果我们想加载 JavaScript，有三种主要的方法可以做到这一点：

  • 标准方法（不推荐）
  • 使用 defer 关键字（根据此原则推荐）
  • 使用 async 关键字（根据此原则推荐）
标准的方式

让我们来看看标准的方法。标准的方式是在 html 标记中使用一个普通的 <script> 标签，如下所示：

 <html>
   <head>
     ...
   </head>
   <body>
     ...
     <script src="script.js" />
     ...
   </body>
 </html>

这种加载 JavaScript 的方式的缺点如下，如果我们看看时间轴和浏览器在这种情况下的行为。

图片以标准方式加载 JavaScript

从这个角度来看，有两个缺点：

  • 加载和执行的脚本只能在加载之前读取 DOM。
  • 如果脚本是 “重量级” 的，它可以阻止整个浏览器。
延迟方式

使用 defer 方式加载 JavaScript 文件或 JavaScript 代码是一种更加优雅的解决方案。defer 告诉浏览器继续 DOM 解析并在后台加载脚本。在解析 DOM 并加载脚本之后再执行脚本。这样的首次初始渲染将是非阻塞的。

 <p>...</p>
 <script defer src="my-fancy-script.js"></script>
 <!-- 这个 p 标签将直接加载 -->
 <p>...</p>

图片使用 defer 加载脚本

异步方式

加载带有 async 属性的脚本会将加载标识为完全独立。这意味着浏览器不会等待 JavaScript 脚本。它完全独立地加载和执行。

 <p>...</p>
 <script async src="my-fancy-script.js"></script>
 <!-- 这个 p 标签将直接加载 -->
 <p>...</p>

图片

补充:

图片

原则 2：有意识地进行 Tree-shake、打包和清除无用代码

这是一个我们应该始终遵循的原则。

【第2395期】Tree-Shaking 实现原理

JS bundle 是将多个 JavaScript 文件打包到单个文件中的一种方法。捆绑减少了 http 请求的数量，方便了缓存。Tree-shaking 是一种从 JavaScript 包中删除未使用代码的优化技术。这可以显著减少包的大小，从而可以改善页面加载时间和整体前端性能。

图片Tree-Shaking

  • 减少 bundle 大小：Tree-shaking 可以显著减少 JavaScript bundle 的大小。这可以改善页面加载时间和整体性能。
  • 改进的缓存：较小的 bundle 更有可能被浏览器缓存。这可以进一步改善回访者的加载时间。
  • 减少带宽使用：较小的 bundle 使用较少的带宽。

如果你正在构建一个现代的 JavaScript 应用程序，你绝对应该使用 Tree-shaking。这是提高应用程序性能的一种简单而有效的方法。

【第2956期】如何编写一个友好支持 Tree-shaking 的库

不同的现代 JavaScript 打包工具支持 Tree-shaking 优化：

原则 3：设定和遵守性能预算

这是一个我们应该始终遵循的原则。

在前端开发中设定和遵守性能预算对于创建快速，响应和用户友好的 Web 应用程序至关重要。

图片使用 webpack-bundle-analyzer 进行依赖分析

性能预算为各种指标设置了可接受的性能目标，例如 Google 的 Web 生命周期，例如首次输入延迟（FID），最大内容绘制（LCP）和交互时间（TTI）。

【第1960期】解读新一代 Web 性能体验和质量指标

通过设置这些指标，开发人员可以优先考虑性能优化工作，并确保他们的应用程序满足用户的期望。

制定和坚持性能预算的关键步骤：

    1. 设定性能目标：确定对用户体验至关重要的关键性能指标。这些指标可以包括 FID、LCP、TTI 和其他基于用户需求和期望的指标。
    1. 分析性能：使用 Lighthouse 等工具测量应用程序的当前性能。这将给予您在进行任何优化之前对应用程序的性能有一个基本的了解。
    1. 识别大的和阻塞的 bundle：使用 bundle 分析器（例如 webpack-bundle-analyzer）来识别导致性能问题的前端特定 bundle。
    1. 确定优化的优先级：根据确定的性能瓶颈，确定优化的优先级，以首先解决最关键的问题。专注于改进对用户体验影响最大的指标。
    1. 持续监控性能：持续监控 Web 应用的性能，以确保其保持在设定的性能预算范围内。在 CI/CD 管道中集成 Lighthouse CI 等工具，以自动执行性能测试和报告。
    1. 根据需要调整性能预算：随着应用程序的发展和用户期望的变化，请查看性能预算并根据需要调整阈值。这将确保您的 Web 应用程序继续提供高质量的用户体验。

通过遵循这些步骤，您可以有效地设置和遵守性能预算，并确保您的前端应用程序在速度、响应能力和整体用户体验方面满足用户期望。

【第2952期】Google I/O 2023：提升 Web 核心性能指标优化建议

原则 4：坚持 Web 平台 API 和 Web 标准

这是我们应该尽可能遵循的原则。

这个原则很容易理解。尽可能利用 Web 平台 API 和 Web 标准的强大功能。

首先要熟悉本地 Web 标准，如 HTML，CSS 和 JavaScript。这听起来很简单，但真的吗？

它还涉及到对原生 Web 平台 API 的能力的了解，例如：

  • Web Storage API
  • Geolocation API
  • Media Capture and Streams API
  • Notifications API
  • Web RTC API
  • Payment Request API

有了这些知识，你将能够创建先进和强大的 Web 应用程序。

原则 5：使用新一代前端框架

这是我们应该尽可能遵循的原则。

使用现代和创新的前端开发框架来创建用户界面是有益的。

图片

与传统框架相比，这些框架提供了几个优势，包括：

  • 提高性能和效率：新一代框架旨在优化性能并减少创建高级用户界面所需的代码量。这样可以加快渲染速度、提高响应速度并更有效地使用资源。
  • 提高开发人员的生产力：这些框架通常提供一种更结构化的方法来创建和维护复杂的应用程序。这可以显著提高开发效率，并减少将新功能推向市场所需的时间。
  • 活跃和不断增长的社区：这些框架通常拥有庞大而活跃的开发人员社区，他们为开发做出贡献，提供支持并分享他们的知识。这促进了一个充满活力的工具、库和最佳实践生态系统，进一步增强了开发体验。

其中一些框架的列表：

  • React
  • Vue.js
  • Angular
  • Svelte
  • Solid.js
  • Lit
  • Qwik
avatar
文章
阅读
粉丝