vue-router为什么会加载两遍dom?_一些优化CSS以提高页面加载速度的小技巧

最新推荐文章于 2023-09-06 14:22:33 发布

weixin_39966130

最新推荐文章于 2023-09-06 14:22:33 发布

阅读量977

点赞数

文章标签： vue-router为什么会加载两遍dom?

不久前，我决定改进我的网站的加载时间。它已经加载的相当快，但我知道仍然有改进的空间，其中之一是CSS加载。我将向您介绍整个过程，并向您展示如何提高加载时间。

为什么装载时间重要？

因为 时间就是金钱 。这句谚语尤其适用于网页加载时间。您的页面加载时间对您的利润有直接影响。人们更倾向于在快速的电子商店买东西，而不是在速度较慢的商店买东西。根据研究毫秒使百万流动网站的改善幅度为0.1秒，旅游网站的转化率及订购价值分别上升10.1%及1.9%。那可能是一大笔钱。

因此，如果您想要建立一个有利可图的业务，您不应该低估您的页面加载时间。

CSS如何影响加载时间？

要了解CSS如何影响网页的加载时间，我们首先必须了解浏览器如何将HTML文档转换为功能性网页。

首先，它必须下载一个HTML文档并解析它以创建DOM(DocumentObjectModel)。每当它遇到任何外部资源(CSS、JS、图像等)它将为它指定一个下载优先级，并启动它的下载。优先级很重要，因为一些资源对于呈现页面是至关重要的(例如。主样式表和JS文件)，而其他文件可能不太重要(比如图像或样式表，用于其他媒体类型)。

对于CSS，这种优先级通常很高，因为样式表是创建CSSOM(CSS对象模型)所必需的。要呈现网页浏览器必须同时构造DOM和CSSOM。没有这些浏览器将不会在屏幕上呈现任何像素。这样做的原因是，样式定义页面的外观，在没有它们的情况下首先呈现页面将浪费处理能力和糟糕的用户体验。只有当浏览器同时有DOM和CSSOM可用时，它才能通过组合它们来创建呈现树并开始呈现屏幕。总之，没有下载CSS，也没有呈现页面。

正如你所看到的，CSS对你网页的加载时间有很大的影响。在讨论CSS时，有两个影响网页加载时间的基本方面：

CSS文件大小和页面上的CSS总量(文件数)。太大的CSS文件将需要更长的时间来下载，因此整个页面将需要更多的时间来呈现(它必须等待那个大的CSS首先下载)。
我们启动和下载CSS的时间和方式。您希望尽快下载您的样式。

让我们详细看看如何改进这些。

前端职业规划 - 作为面试官筛选简历的一些技巧

限制样式表的大小

TLDR：尽可能正确地配置工具以使用现代代码。

如果您想要更快的加载时间，使您的CSS文件更小是一个好主意。现在，在构建时使用一些工具来修改CSS是很常见的(后处理器或PostCSS)为较旧的浏览器或其他增强提供后盾。

我建议检查结果代码以防止不必要的肿胀。特别是如果您使用PostCSS与多个插件。在我的例子中，我使用了CSS，为CSS变量生成了回退，并为旧的Flexbox语法添加了前缀。这似乎是一个微不足道的问题，效果很小，但是对于像我这样的小样式表来说，节省了大约3kB。我认为对于很少的工作来说，这是一个很大的进步。对于大型CSS来说，它有可能产生更大的影响。

old index.css:  12.5kB (without GZip)
new index.css:   9.2kB (without GZip, ~26.4% smaller)

我所要做的就是更新一个浏览器列表Config，它被自动重定位器和其他类似工具用于针对特定浏览器版本生成的代码。我也更新了PostCSS配置。(我还添加了插件来连接媒体查询，以节省一些额外的空间)。见源代码中的PostCSS配置和我的浏览器列表定义如果你想看我的准确设置。

因此，我们缩小了CSS文件，但我们仍然需要下载它。我们可以通过减少网络请求来加快网页加载时间。最好的网络请求根本不是请求。我们可以直接将样式内联到HTML中，以避免下载任何外部样式表，从而节省一些时间。

当然，在每个页面上包含一个完整的9kb样式表(或大型的项目)并不是非常有效的。因此，我们将只包括呈现页面部分所需的样式。褶皱上方和懒惰-加载其余的样式。这样，我们仍然可以利用浏览器缓存的其他页面，并使我们的网页加载更快。由于我们包含对页面呈现至关重要的样式，所以这种技术称为临界CSS .

幸运的是，您不必决定哪些样式应该包含在HTML中。有些工具会帮你，比如临界性来自Addy Osmani。请记住这个技巧是关于妥协的。您需要在所包含的内容和CSS的大小之间找到适当的平衡，因为这种技术将在加载页面时为您节省一个请求，但也会使每个页面更大(从而使下载时间更长)。因此，您想要试验这一点，并测量结果，以找到最好的设置为您的网站。

延迟加载样式表

由于我们使用关键的CSS，所以我们希望延迟加载样式表，以避免阻塞页面的呈现。除非您需要支持一些旧的浏览器，现在的现代解决方案是使用用于样式表的普通链接标记，但使用的是不同的媒体类型和一点JS。这个巧妙的小技巧在灯丝集团博客。下面，您可以从文章中看到延迟加载CSS的代码片段，但我建议阅读全部内容。

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

当JS被禁用时，您可能希望包括回退。这样，您的样式将加载正常，您将避免非样式内容，这将严重影响用户体验。

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="/path/to/my.css" media="screen">
</noscript>

在下面的瀑布图中，您可以看到具有关键css的页面立即开始呈现(图中的紫色部分)。浏览器主线程与必须先下载CSS文件的旧版本相比，它具有更快的交互性。

对样式表使用代码分割。

我们有CSS的属性，我们需要现代浏览器，我们使用关键的CSS和懒散加载其余的。但我们可能会减少一些文件大小。在Chromedev工具中，有一个叫做Coverage的工具。它可以显示在当前页面上使用的CSS和JS文件的哪一部分。打开开发工具和压力机克特 + 换档 + p打开命令托盘并键入覆盖范围。选择显示覆盖选项显示面板。现在重新加载页面。

我有将近50%的CSS代码未使用在页面上。当我们检查另一个页面时，我们会得到更多--几乎54%未使用的CSS。这是很多不必要的代码。在大型遗留应用程序上，这一数字可能会更大。

在使用JS时，我们经常使用代码分割来创建多个较小的文件(包)。我们在需要时下载这些包，而不是在页面加载时获取一个大的JS包。我们也可以对CSS使用类似的方法。我们可以将CSS分成三种不同的方式。

基于媒体查询的CSS拆分

在这种方法中，根据媒体查询将大CSS拆分为更小的样式表(PostCSS有插件)并在HTML中引用这些样式表。

<link rel="stylesheet" href="index.css" media="all" />
<link rel="stylesheet" href="mobile.css" media="(max-width:44.9375rem)" />
<link rel="stylesheet" href="table.css" media="(min-width: 45rem)" />

请注意，当使用关键的CSS和样式表的延迟加载时，这种方法没有多大意义。无论使用什么媒体查询，浏览器都将下载所有样式表。它将只使用媒体属性来确定下载的优先级。因此，基本上，它将下载具有高优先级的CSS，用于活动媒体查询和延迟加载其余样式表。

基于页面的代码分割

另一种方法是对每个页面使用单独的CSS。正如我们在上面看到的，对于不同的页面，有很多未使用的样式。如果我们能够删除那些未使用的样式，并且只保留给定页面所需的内容，那就太好了。这就是我选择做的。遗憾的是，我找不到任何工具来做到这一点-拿一个大的CSS文件，并根据其内容为每个页面生成一个更小的包。

听起来很简单，所以我决定试一试，构建一个节点脚本，它可以完成这种事情。它叫CSS分裂对于使用静态站点生成器构建的站点来说，它非常有用(如十一我用在我的网站上)。它用PurgeCSS要删除未使用的样式，它还应该处理其他非HTML文件(基于它们的文档)。除了HTML之外，我没有对它进行测试，所以在这样使用它时，一定要检查结果。

使用这种技术，我能够将所请求的CSS文件大小减少近50%。下面是实现关键CSS和基于页面的代码拆分之后的一些统计数据：

single index.css for all pages:      9.2kB (without GZip)
CSS file for homepage:               5.4kB (without GZip)
CSS file for projects:               4.4kB (without GZip)

您可以看到仍然有一些未使用的字节。这是可以的，因为覆盖率不包括悬停或焦点状态或查询。不太可能将未使用的字节变为0。

基于组件的代码分割

我从哈里·罗伯茨。我们还可以在组件的基础上拆分CSS，并且只对页面上使用的组件(页脚、页眉、文章等)逐步加载CSS。你可以读到更多关于这个巧妙技巧的文章。哈利的文章。本文的最后一节描述了我正在讨论的这项技术。但是阅读整篇文章，它充满了关于提高CSS网络性能的很好的信息--我在这里没有提到过(无论如何也写不好)。

我仍然没有测试这个技术，看它与我目前的设置相比有多好，但它在我的待办事项清单上。因此，请继续关注一些未来的文章。

前端职业规划 - 作为面试官筛选简历的一些技巧

尽管我的网站相当简单，没有太多的改进空间，但通过使用上面提到的技术，我能够加快网页的初始加载速度，降低资产的总规模。对于任何网页，您都可以使用相同的过程来提高它的加载性能(可能对较大的项目有更好的效果)。

下面您可以看到一些更新后的最终结果。图表显示页面在什么时间呈现的百分比。这些测试是在一个缓慢的3G连接上运行的，这就是为什么加载页面花费了这么长的时间。