在页面中包含 CSS 和 JavaScript 的最佳实践是什么?

What are the best practices for including CSS and JavaScript in a page?

本文关键字：最佳 是什么 JavaScript 包含 CSS      更新时间：2023-09-26

我想知道是否建议将网页所需的所有CSS和JavaScript嵌入（内联）到和标签中，而不是让浏览器下载这些文件。这种做法是否可取？

我的"应用程序"是一个 SPA，我已经设法将所有内容，甚至图像和字体图标（作为 base64）编译成一个索引.html但我不确定这是否是一种常见的做法。

提前谢谢。

你忽略了一些关键的事情：

  • 浏览器可以并行获取特定资源，因此与"完全打包"方法相比，减少了加载时间。
  • 浏览器可以为不同类型的资源应用不同的缓存策略，这些策略也可以用于一些聪明的时间和/或减少宽度的调整。
  • 即使不是加载了所有资源，人们也可以获得一些有用的数据。
  • 并非 SPA 中的所有功能都大量使用，因此有时按需延迟加载某些实体是有意义的。

这是一个非常基本和简化的概述，这里有很多事情需要考虑。此外，萌芽到更大的萌芽实际上是在实践中使用的东西。比如说，很多时候所有的js资源都是捆绑的。但是，绝对尝试摆脱任何其他http请求会使您的架构变得不那么灵活，可缓存性降低等等。所以，这是矫枉过正。

最佳做法是将每个资源（脚本、CSS、图像等）拆分为单独的文件。这将允许浏览器下载和缓存每个资源以供将来重用（甚至对于其他页面）。但是浏览器限制为每个源六个（在撰写本文时）并行连接。这就是为什么页面上的大量外部资源会导致页面加载性能不佳和瀑布流不佳的原因。

有很多技术可以提高性能，例如：捆绑、域分片、图像精灵等。此外，对于某些关键资源，您可以使用内联技术。它允许浏览器立即使用此资源，而无需其他请求。例如，您可以嵌入加载指示器所需的所有资源（图像，CSS，脚本），浏览器将在没有其他请求的情况下呈现它。

为了获得最佳开发风格，请勿嵌入资源并使用单独的文件。如果您关心性能，您应该调查页面的瀑布（例如，此处或任何浏览器的开发人员工具中的网络选项卡）并使用一些技术来改进它。如果你对这个领域感兴趣，我建议你阅读下面的书：

  • 高性能网站 作者：Steve Souders
  • Steve Souders 的 More Faster Web sites
  • 高性能浏览器网络 作者：Ilya Grigorik

请注意，此技术仅与 HTTP 1.1 相关。对于HTTP 2.0，它只会有害，因为新版本旨在提高性能。

否，请始终避免使用内联样式和脚本以减少 html 文件的页面负载。此外，将 html、css 和 js 分开可以保持编码干净、语义清晰，并且可以重用于可能需要通用 css 属性或脚本的其他外部页面或应用程序。

在我看来，这

完全是关于在管道中哪里需要 CSS。

  1. 内联 CSS

优点：非常适合快速修复/原型设计和简单测试，而无需在.css文档和实际 HTML 文件之间来回切换。

优点：由于可能存在垃圾邮件/滥用，许多电子邮件客户端不允许使用外部.css引用。嵌入可能会有所帮助。

缺点：填满 HTML 空间/占用带宽，无法跨页面修复 - 甚至 IFRAME 也不可靠。

  1. 嵌入式 CSS

优点：与上述原型相同，但更容易从最终原型中剪切出来并在模板完成后放入外部文件中。

缺点：某些电子邮件客户端不允许在 [head] 中使用样式，因为大多数网络邮件客户端都会删除头部标签。

  1. 外部 CSS

优点： 易于在超过 1 个页面的网站之间维护和重用。

优点： 可缓存 = 更少的带宽 = 第二次页面加载后页面呈现速度更快

优点：包括.css在内的外部文件可以托管在CDN上，从而减少托管HTML页面的防火墙/Web服务器的请求（如果在不同的主机上）。

优点：可编译，您可以自动从最终构建中删除所有未使用的空间，就像jQuery具有开发人员版本和压缩版本=更快的下载=更快的用户体验+更少的带宽使用=更快的互联网！（我们喜欢!!）

缺点： 通常从 HTML 邮件中删除 = 凌乱的 HTML 布局。

缺点：每个文件发出额外的HTTP请求=防火墙/路由器中使用的更多资源。

来源/参考 ： 这里

将所有 HTML、CSS 和 JavaScript 代码保存在一个文件中可能会使其难以使用。样式表和 JavaScript 文件必须分别包含 and 标记，因为它们是 HTML 片段，而不是纯.css或.js文件。

许多 Web 开发人员建议在页面底部加载 JavaScript 代码以提高响应能力，这对于 HTML 服务更为重要。在 NATIVE 沙盒模式下，您加载的所有脚本都会在客户端进行扫描和清理，这可能需要几秒钟。将标记移动到页面末尾将允许 HTML 内容在处理 JavaScript 之前呈现，从而允许您向用户显示微调器或其他消息。

当您努力处理标记时，有时很容易采取简单的路线并潜入一些样式。

我要把这个文字变成红色，这样它才能真正突出并让人们注意到！

当然 - 它看起来无害。但是，这表示您的编码实践中存在错误。相反，请完成标记，然后从外部样式表中引用该 P 标记。

someElement> p { color： red;}

请记住 - 主要目标是使用户尽快加载页面。加载脚本时，浏览器无法继续，直到加载整个文件。因此，用户将不得不等待更长的时间才能注意到任何进度。

如果您有JS文件的唯一目的是添加功能（例如，单击按钮后），请继续并将这些文件放在底部，就在结束正文标记之前。这绝对是最佳实践。

相关文章：