☰

在 HTML 中包含 CSS 和 JS 是否会改善页面加载时间和/或服务器性能？

tag-icon • tag-icon web-server performance
在 HTML 中包含 CSS 和 JS 是否会改善页面加载时间和/或服务器性能？

这两个 HTML 片段哪一个表现更好？

在 HTML 中包含 CSS 和 JS

<html>
 <head>
  <style>
   <?php include("someStyle.css"); ?>
  </style>
  <script>
   <?php include("someScript.js"); ?>
  </script>
 </head>

或者链接 CSS 和 JS：

<html>
    <head>
        <title>Family Tree</title>
        <script src="someScript.js"></script>
        <link href="someStyle.css" rel='stylesheet' type='text/css' />
    </head>

我能想到的逻辑是

  1. 服务器收到的点击次数较少 (+服务器)
  2. 减少并行传输（-浏览器）
  3. 如果使用，DEFLATE 性能会得到改善。（+服务器）

我会注意到大型服务器负载的改善/下降吗？

答案1

使用单独的 JavaScript 和 CSS 文件可以获得更好的性能，因为它们不经常更改，因此可以更积极地缓存，而 HTML 通常是动态的，无法缓存。如果您内联 JavaScript 和 CSS，那么您也无法缓存它们，这意味着需要下载更多数据并延长页面生成时间。但是，您可能希望对这些单独的文件执行以下操作：

  • 将 CSS 和 JS 合并到单个文件中
  • 最小化内容
  • 提供文件时启用 gzip 压缩
  • 确保设置了Etag和Last-Modified标头，并且服务器遵守If-Modified-Since和If-Not-Match
  • 设置Expires未来某个时间的标题

答案2

嗯，一个例子是客户端，另一个是服务器端。因此，如果您希望获得更好的服务器性能，那么在第二个示例中选择客户端。顺便说一句，您仍然在两个示例中进行链接，并且未在实际 HTML 文档中输入任何 CSS 或 JS 代码。在第一个示例中，您告诉服务器处理 PHP 标记内的 CSS 和 JS 代码，在第二个示例中，您告诉客户端（您的 Web 浏览器）处理 CSS 和 JS 代码。

相关内容