Question

通过PHP与.js包含<script src="" />文件是否有任何好处或缺点？虽然下面的方法1会导致更少的HTTP请求，但这样做是否值得？例如：

<html>
  <head>
      <!-- Approach 1 -->
      <?php
      echo '<script>',
           file_get_contents('script1.js'),
           file_get_contents('script2.js'),
           file_get_contents('script3.js'),
           '</script>';
      ?>

      <!-- Approach 2 -->
      <script src="script1.js"></script>
      <script src="script2.js"></script>
      <script src="scriptn.js"></script>
  </head>
  ...
</html>

Answer 1

通常，HTTP请求的数量不应该太大。如果你发现它是一个瓶颈，我会说你只需要专门针对它。

话虽如此，保持低要求是有好处的。特别是具有高延迟的用户将受益最多 - 他们可能需要等待1-2秒或更多才能开始下载文件。由于延迟并不严格地与带宽耦合，因此您可以让某些人具有快速连接但启动时间很长。

然而，将JS代码直接放在您所服务的HTML中，通过将文件包含在PHP中有点适得其反 - 这意味着您可以对每次点击进行更多处理。 1000人同时访问将意味着超过1000次所需的处理，因为对于每次点击，您将需要检索多个文件，提取内容并将其放入请求中。它可能很快，但随着很多人的访问，你最终会遇到性能问题。当然，缓存会有所帮助，但它只会到目前为止。

因此，您可能希望定位的主要内容是保留少量请求，不要进行太多处理并且能够提供大量文件。由于服务器非常擅长提供内容，因此如果您只保留更多静态文件，则最后一点会被勾选。而且由于静态文件不需要那么多处理，如果你解决了这个问题，那么你可以在第二个问题上做好准备。那么，第一个呢？

输入JavaScript构建工具。现在，它们中有许多很多，但总的来说，它们只是采用不同的方法来做同样的事情。事实上，在大多数情况下，他们可以被认为是一堆美化的脚本，因为它们捆绑了一些功能，并允许您根据需要添加更多功能。您可以使用您选择的任何脚本语言轻松制作自己的语言。但是，不要让标签“荣耀的脚本”欺骗你 - JavaScript构建工具非常擅长他们的工作，并且它们使你的项目更适合网络。

从广义上讲，他们支持（几乎）开箱即用的功能将是

预处理文件并派生其他人
- TypeScript文件可以编译为JavaScript
- 用ES6编写的JavaScript文件可以转换为兼容的ES5代码
- Less / Sass模板可以编译为普通CSS
- 等
优化资源
- 可以连接JavaScript文件
- JavaScript文件可以另外（或替代）缩小
- 图片可以优化
- 等
对您的代码库执行静态和主动检查
- 运行linters，如JSCS，JSHint，ESLint，CSSLint等。
- 运行任何测试
制作可交付成果
- 排除不需要的文件 - 例如，测试代码
- 包含实际运行所需的任意数量的文件 - 例如，JavaScript代码，这可能是之前步骤之一的输出
- 将文件捆绑在一起 - 或者只是将它们移动到新目录或者压缩它们或者给你一个你的webapp

因此，构建工具可以做很多事情。它们支持更多功能，大多数功能允许您提供您想要的任何自定义功能。但是，这是webapp需要的核心。你感兴趣的东西在第2步 - 连接JavaScript文件正是它的声音 - 如果你有 file1.js ， file2.js 和 file3 .js 你会产生 file123.js ，其中包括全部三个。这意味着您的用户只需要创建一个，而不是三个HTTP请求。可以做的第二件事是缩小，它采用JavaScript代码并尽可能地减小大小，因此它们更容易通过互联网传输。例如这段代码（故意冗长）：

/**
 * Function that can produce the sum of any numbers
 * @param {number} inputOne - the first number to add
 * @param {number} inputTwo - the second number to add
 * @return {number} the combination of both of the above
 */
function add(inputOne, inputTwo) {
   //using JavaScript mathematical operation
   var output = inputOne + inputTwo;
   return output;
}

将转向此：

function add(a,b){var c=a+b;return c}

因此，通过预先连接和预先缩小JavaScript代码，您将提供更小的请求，并且每次点击的处理都会少得多，因为您需要做的就是提供静态文件。

以下只有很少的构建工具可供使用，因为很难跟上所有这些工具：

Grunt - 它功能强大且配置驱动。 Gulp - 同样强大但在“任务”方面定义其工作流程，这是非常小的JavaScript操作。 Webpack - 专注于捆绑您的应用并制作您的构建工件。

Answer 2

我更喜欢方法2，它会导致更多的http请求（但只有一次，其他时候会在浏览器上缓存）方法1：如果您有10个3Kb的脚本，则每个页面加载时加载30kb。

Answer 3

通过内联加载脚本，尤其是<head>，导致页面执行javascript，从而阻止页面的其余部分加载。

如果您使用<script>标记（应放在<body>标记的末尾，则始终可以使用async或defer属性加载它们，您还可以利用浏览器缓存。

Answer 4

减少HTTP请求，但是对于每个完成的请求，您都会进行更多处理（在本例中也是IO）。将脚本作为静态资源提供服务会更好，因此浏览器可以对其进行缓存。

通过PHP文件包含外部脚本的任何好处或缺点包括vs script src？

4 个答案: