-1

我已经阅读了渲染树以及它是如何由 CSSOM 和 DOM 树构成的，并且我希望在我的网站上实现最佳 UI 性能。

我想知道 - 我可以为外部 CSS 文件提供哪些最佳实践，以便它允许最快的 CSSOM 并因此提供最快的渲染树构建？

4

2 回答 2

0

首先，使用gulpstyle.css或其他工具或在线工具（例如可将您转换为. .style.cssstyle.min.css

<link rel="stylesheet" href="style.min.css">
于 2021-09-20T09:06:11.587 回答
0

如何在 Web 浏览器中最大化网页的呈现

我必须警告你，当涉及到缓慢的网站渲染时， CSS 根本不是问题。小型 CSS 文本文件下载速度极快。当今的 CSS 设计几乎没有什么可以改变的，这将对其产生很大的影响，因为与其他下载的资源相比，大多数外部 CSS 文件都非常小。性能的主要杀手是巨大的JavaScript API 库、缓慢的 Web 服务器和用户端的低连接速度。但是下面列出了一些你可以使用的技巧，尽管我不建议你像这样劫持用户的浏览器来获得几百毫秒的时间：

  1. 创建一个外部样式表，其中包含呈现您的主页或站点中的首次访问页面所需的确切样式数量。将所有辅助 CSS 移动到单独的页面（见下文）。这是您的“同步”CSS，它将在 HTML 下载、解析和渲染 DOM 之前加载。<link>使用简单标签链接到此文件。如果这是一个很小的占用空间，并且您已经删除了所有其他 CSS，它会减少 HTML 下载、解析、呈现和绘制 DOM 树的等待时间。（由于 HTTP/2、增加的浏览器连接、并行 CSS 下载和更快的网络，这在今天几乎不是问题）

  2. 设置下载时使用的所有不必要的JavaScript外部文件"defer"。这意味着它们将按顺序加载，但通过共享连接与其他文件并行加载，并且不会干扰网页、CSS 下载和 HTML 解析。在渲染和绘制所有 HTML 和 DOM 之前，它们不会运行：

<script src="myscript.js" type="text/javascript" defer="defer" ></script>

作为一种选择，考虑设置所有影响您网站中所有页面的外部或全局 JavaScript 文件，但这些文件是绘制 DOM 所必需的，以便它们“异步”下载。像“延迟”一样，这些文件不会阻止 HTML 呈现，但是一旦这些异步文件出现，它们就会阻止页面的呈现。避免使用此代码，除非这些脚本文件对于渲染 DOM 是必需的并且非常小。在过去，我们将这些外部脚本链接放在网页底部 body 元素中最后一个 HTML 之后。这样，他们只有在下载 HTML 后才开始下载。但是，如果支持此异步功能，则可能会稍微加快该过程。在运行异步脚本之前，请务必使用Windows.load其他技巧来验证页面是否已呈现。

< script type="text/javascript" src="{your path}/MyJavaScript.js?v=1.0.0.0" async="async" ></script >

  1. 您不需要在主页中呈现但可以在 DOM 之后加载的所有其他 CSS，将它们设置为“预加载”。但是，标签中的属性preload在<link>现代浏览器和旧浏览器（HTML5 之前）中都不是 100% 支持的。因此，请使用下面的“打印”技巧来让浏览器通过“队列”下载这些 CSS 外部文件，这通常意味着它们按资源顺序最后下载，并且在 DOM 已经渲染之后。这种“打印”媒体类型技巧具有非常广泛的浏览器支持。浏览器已经使用media=print链接样式表自然地这样做了 20 多年，所以这只是强制常规表使用该模型的“黑客”。这些下载后，所有其他页面都将使用它们，

<link rel="stylesheet" href="style.css" media="print" type="text/css" onload="this.media='screen';this.onload=null;" //

  1. 确保您的服务器使用多路复用附带的HTTP/2。它只是一个愚蠢的术语，意味着从浏览器下载的文件现在可以在需要时通过单个连接并行连接和下载。但是，如今通过快速网络连接的现代浏览器很少需要这样做，除非您的页面中有大量需要下载的脚本和媒体文件。如果你这样做，我会质疑你网站的设计。

  2. 您可以添加许多prefetch、prerender、preconnect和其他<link>技巧，但在大多数情况下，它们不会给您带来巨大的速度提升，因为大多数服务器和浏览器都非常快速地协商所有这些连接。这些连接中的许多已经被主机提供商等缓存了。这些可能会在贫穷国家发挥作用，因为手机用户的设备必须通过遥远的西方服务器协商未缓存的 DNS。但这里有一些“技巧”：

将下面的 DNS 预取调用添加到您的页面需要快速访问内容的外部 URL 或网站。这些将触发对未缓存 DNS 路由的调用，并准备这些连接供浏览器使用。仅当您从页面所依赖的外部服务器访问资源时才执行此操作：

<link rel="dns-prefetch" href="//somewebsite.com" />

将下面的预连接调用添加到您的页面需要快速访问内容的外部 URL 或网站。这与上面的工作方式相同，但对于实际的 URL 及其 IP，它们通常已经缓存在您的网络中：

<link rel="preconnect" href="//somewebsite.com" />

将下面的资源预取调用添加到您希望用户在访问您的主页后访问的其他页面中的资产。这些文件将被缓存，但调用的实现对于浏览器是可选的。这假设您的用户将在单击站点后访问这些资源，这通常不是真的。所以我会避免这种情况。注意：此功能的浏览器支持是有限的。

<link rel="prefetch" href="someresource.jpg" />

将下面的资源预渲染调用添加到网页及其所有您希望用户在查看当前网页后访问的相关资源。这些文件将被缓存，但调用的实现对于浏览器是可选的。如上所述，您需要假设用户将导航到这些缓存页面。此外，“prerender”不仅会下载页面和资源，还会构建 DOM，运行 JavaScript，然后在用户单击链接时切换页面。这意味着您要求浏览器提供更多 CPU，而这对于用户可能永远不会访问的页面来说是一种浪费。我相信这只适用于现代 Chrome 浏览器。注意：此功能的浏览器支持非常有限。

<link rel="prerender" href="somewebpage.html" />

  1. 为您的所有图像、iframe、视频和其他 HTML 媒体元素提供一个width和height属性，以便浏览器在下载这些项目时可以在绘制的浏览器画布中为这些图像保留空间。这主要是防止布局发生变化，但如果浏览器进行多次绘制，可以加快速度。

  2. 给所有<img>元素一个loading="lazy"属性，这意味着它们在用户向下滚动网页之前不会加载。这仅适用于现代 HTML 5 浏览器。

  3. 给你所有的<video>,<audio>等一个preload="metadata"属性，这意味着它们在用户向下滚动网页之前不会加载和播放。这仅适用于现代 HTML 5 浏览器。

请记住，大多数 CSS 和其他东西的黑客和技巧很少是慢速网站的罪魁祸首。CSS 直到最近才在浏览器渲染速度方面得到了不好的评价，当时它只是 100% 不真实。CSS 预加载和最小化是一些搜索引擎（例如 Google）要求开发人员实施的没有问题的解决方案，但对整体页面渲染和绘制性能的影响很小，与下载这些新的巨大的页面相比，页面排名要低得多JavaScript API 的。改变 CSS 设计就像从萝卜里榨血。目前没有证据表明改变 CSS 架构或下载策略对页面渲染有任何重大影响。这些科技公司现在开始摆脱这个神话现在。此外，CSS 在浏览器中的下载速度已经快 25 年了，没有任何额外的帮助。

那么，有了 5G 和光纤互联网，为什么下载 20 KB 的 CSS 会突然出现延迟？

事实是，没有延迟。它几乎为零。例如，如果您的 CSS 只有几十 KB，那么最小化 CSS 和 HTML 就没有任何作用。与当今下载到典型 Web 浏览器的1-5 MB JavaScript、图像、视频或其他资源相比，典型的 CSS 文件非常小。很多 CSS 小于 100Kb，但在今天的典型网站中，大多数可能小于 30Kb，即使在最小化之后也是如此。如果您在站点中使用外部脚本和样式，它们将在用户的浏览器中长时间缓存。与使用嵌入式相比，您的用户重新访问您的网站将在数天、数周甚至数月内重复使用这些相同的样式表，并且当从浏览器缓存中提取时，您的页面呈现闪电般的速度许多 JavaScript API 使用的样式会强制重新加载相同的 CSS。

此外，今天的网络浏览器在协商 DNS 调用和服务器连接方面非常聪明，尽管过去浏览器默认只有 2 个连接（现在很多默认使用 6 个连接）。这意味着外部 CSS 和脚本通常会在 HTML 解析和渲染开始之前以非常快的速度并行下载。因为您永远不需要无样式的 HTML，所以这种设计效果很好，并且可以防止无样式的 HTML闪现。今天的一些孩子现在使用技巧劫持这个自然的浏览器进程上面提到的这会造成一个巨大的混乱，其中布局发生变化，单线程脚本占用手机上的 CPU 来操作 DOM，脚本渲染的 HTML 布局跳来跳去，或者一半的网页无法加载文本内容。未压缩的图像、点播视频、大型下载文件和庞大的 JavaScript 库会在网页中造成大部分延迟。所以相信我……CSS 不是问题！

巨大的阻塞 JavaScript 通常是罪魁祸首！

今天，许多客户端JavaScript API只能通过尝试劫持浏览器并在主页上预加载非常小的文件来解决其巨大的有效负载问题，但随后在幕后对大量脚本库、HTML 页面和假设用户可能会访问网站中的其他页面的资源。如果用户没有点击他们期望的地方，这可能是一场赌博，非常浪费和不必要。它还加载了具有兆字节缓存但不必要的脚本和资源的典型 Web 浏览器。如果您问我，这些脚本马戏团技巧显然是一个经过深思熟虑的模型。

保持繁重的服务器端，而不是繁重的客户端，您的页面将快如闪电！

如前所述，出于这些原因以及更多原因，我将避免使用 CSS 和 HTML “速度”技巧并专注于所有其他瓶颈。

于 2021-09-20T09:56:23.260 回答