高性能前端架构

原文转载自 「Lenix Blog」 ( https://blog.p2hp.com/archives/7156 ) By admin

预计阅读时间 0 分钟(共 0 个字, 0 张图片, 0 个链接)

这篇文章介绍了一些使前端应用程序加载更快并提供良好用户体验的技术。

我们将研究前端的总体架构。您如何首先加载必需的资源,并最大化资源已在缓存中的概率?

无论您的页面甚至需要是客户端应用程序,还是如何优化应用程序的呈现时间,我都不会说太多。

总览

我将把应用程序加载分为三个不同的阶段:

  1. 初始渲染–用户看到任何东西需要多长时间?
  2. 应用程序加载–用户可以使用该应用程序多长时间?
  3. 下一页–导航到下一页需要多长时间?

前端性能策略

初始渲染

在浏览器的初始渲染之前,用户看不到任何东西。渲染页面至少需要加载HTML文档,但是大多数时候需要加载其他资源,例如CSS和JavaScript文件。一旦这些可用,浏览器就可以开始在屏幕上绘画。

在本文中,我将使用WebPageTest瀑布图。您网站的请求瀑布可能看起来像这样。

HTML阻止CSS,CSS阻止渲染

HTML文档将加载一堆其他文件,并在这些文件加载​​后呈现页面。请注意,CSS文件是并行加载的,因此每个其他请求不会增加明显的延迟。

(旁注:gov.uk 现在已启用HTTP / 2,因此资产域可以重新使用与www.gov.uk的现有连接!我将在下面详细讨论服务器连接。)

减少渲染阻止请求

样式表和(默认情况下)脚本元素会阻止其下方的任何内容呈现。

您可以通过以下几种方法来解决此问题:

避免顺序渲染阻止请求链

让您的网站变慢的不一定是阻止渲染的请求数量。更重要的是每种资源的下载大小,以及浏览器发现需要加载资源的时间。

如果浏览器仅在另一个请求完成后才发现需要加载文件,则可以获得同步请求链。发生这种情况可能有多种原因:

看一下这个例子:

仅在加载其他CSS后才请求字体CSS

该网站在其CSS文件之一中使用@import加载Google字体。这意味着浏览器需要一个接一个地发出这些请求:

  1. 文件HTML
  2. 应用程式CSS
  3. Google字体CSS
  4. Google Font Woff文件(在瀑布图中未显示)
more_vert