放置外部 css 文件的最佳位置在哪里（性能方面）？
Where is the best place to put external css files (performance-wise)?
我已经了解了渲染树以及它是如何由 CSSOM 和 DOM 树构成的，我想在我的网站上实现最佳的 UI 性能。
我想知道 - 我可以为外部 CSS 文件提供哪些最佳实践，以便它允许最快的 CSSOM，从而提供最快的渲染树构建？
首先，使用 gulp 或其他工具或在线工具（例如 Cssminifier 将 style.css 转换为 style.min.css，缩小您的 style.css，例如，然后将其添加到站点 header，如下所示。 .
<link rel="stylesheet" href="style.min.css">
如何在 Web 浏览器中最大化呈现网页
我必须警告您，CSS 根本不是问题 网站呈现速度慢。小型 CSS 文本文件下载速度极快。在今天的 CSS 设计中，您可以更改的很少，这将对此产生很大影响，因为大多数外部 CSS 文件与其他下载的资源相比是 teeny-tiny。性能的主要杀手是巨大的 JavaScript API 库 、缓慢的 Web 服务器和用户端的低连接速度。但是下面列出了一些您可以使用的技巧，但我不建议您像这样劫持用户的浏览器来获得几百毫秒的时间：
创建一个 单一外部样式 sheet 只需要渲染您的 主页 [=128] =]，或您网站中的 first-visit 页面。将所有辅助 CSS 移动到单独的页面（见下文）。这是您的“同步”CSS，它将在 HTML 下载、解析和呈现 DOM 之前加载。 Link 使用简单的 <link> 标记添加到此文件。如果这是一个小占用空间，并且您已删除所有其他 CSS，它会减少 HTML 下载、解析、渲染和绘制 DOM 树的等待时间。 （由于 HTTP/2、增加的浏览器连接、并行 CSS 下载和更快的网络，这几乎是 non-issue 今天）
将所有不需要的JavaScript外部文件设置为在下载时使用"defer"。这意味着它们将按顺序加载，但与共享连接上的其他文件并行，并且不会干扰网页、CSS 下载和 HTML 解析。他们不会 运行 直到所有 HTML 和 DOM 被渲染和绘制，以及：
作为一个选项，考虑设置影响您网站所有页面但需要绘制 DOM 的所有外部或全局 JavaScript 文件，以便它们“异步”下载。与“延迟”一样，这些文件不会阻止 HTML 呈现，但一旦这些异步文件出现，它们可能会阻止页面呈现。避免使用此代码，除非这些脚本文件是强制渲染的 DOM 并且非常小。在过去，我们将这些外部脚本 link 放在网页底部，在 body 元素内的最后一个 HTML 之后。这样他们只在 HTML 下载后才开始下载。但是这种异步功能在支持时可能会略微加快该过程。请务必执行 Windows.load 或其他技巧来验证在 运行 异步脚本之前呈现页面。
我已经了解了渲染树以及它是如何由 CSSOM 和 DOM 树构成的，我想在我的网站上实现最佳的 UI 性能。
我想知道 - 我可以为外部 CSS 文件提供哪些最佳实践，以便它允许最快的 CSSOM，从而提供最快的渲染树构建？
首先，使用 gulp 或其他工具或在线工具（例如 Cssminifier 将 style.css 转换为 style.min.css，缩小您的 style.css，例如，然后将其添加到站点 header，如下所示。 .
<link rel="stylesheet" href="style.min.css">
如何在 Web 浏览器中最大化呈现网页
我必须警告您，CSS 根本不是问题 网站呈现速度慢。小型 CSS 文本文件下载速度极快。在今天的 CSS 设计中，您可以更改的很少，这将对此产生很大影响，因为大多数外部 CSS 文件与其他下载的资源相比是 teeny-tiny。性能的主要杀手是巨大的 JavaScript API 库 、缓慢的 Web 服务器和用户端的低连接速度。但是下面列出了一些您可以使用的技巧，但我不建议您像这样劫持用户的浏览器来获得几百毫秒的时间：
创建一个 单一外部样式 sheet 只需要渲染您的 主页 [=128] =]，或您网站中的 first-visit 页面。将所有辅助 CSS 移动到单独的页面（见下文）。这是您的“同步”CSS，它将在 HTML 下载、解析和呈现 DOM 之前加载。 Link 使用简单的
<link>标记添加到此文件。如果这是一个小占用空间，并且您已删除所有其他 CSS，它会减少 HTML 下载、解析、渲染和绘制 DOM 树的等待时间。 （由于 HTTP/2、增加的浏览器连接、并行 CSS 下载和更快的网络，这几乎是 non-issue 今天）将所有不需要的JavaScript外部文件设置为在下载时使用
"defer"。这意味着它们将按顺序加载，但与共享连接上的其他文件并行，并且不会干扰网页、CSS 下载和 HTML 解析。他们不会 运行 直到所有 HTML 和 DOM 被渲染和绘制，以及：
作为一个选项，考虑设置影响您网站所有页面但需要绘制 DOM 的所有外部或全局 JavaScript 文件，以便它们“异步”下载。与“延迟”一样，这些文件不会阻止 HTML 呈现，但一旦这些异步文件出现，它们可能会阻止页面呈现。避免使用此代码，除非这些脚本文件是强制渲染的 DOM 并且非常小。在过去，我们将这些外部脚本 link 放在网页底部，在 body 元素内的最后一个 HTML 之后。这样他们只在 HTML 下载后才开始下载。但是这种异步功能在支持时可能会略微加快该过程。请务必执行 Windows.load 或其他技巧来验证在 运行 异步脚本之前呈现页面。