javascript - 如果将所有网页资源都编译成一个 HTML 文件，加载速度会更快吗？

Question

如果我的网站有一个编译步骤，将所有外部脚本和样式转换为一个嵌入了 <script> 的 HTML 文件，会怎样？和 <style>标签？由于不必为外部文件发送额外的 GET，这会缩短页面加载时间吗？如果是这样，为什么不更频繁地这样做？

Answer 1

不能一概而论，因为这是非常有情境的。

• 如果您从许多不同的服务器中提取资源，这些请求可能会减慢您的页面加载速度(尤其是在访问端的 DNS 有问题的情况下)。
• 请求许多不同的文件也可能会减慢页面加载速度，即使它们来自同一来源/服务器。
• 请记住，并非每个人都拥有千兆位互联网(甚至是兆位级别)。因此，将所有内容直接放入您的 HTML 文件(内联或使用数据 URI)肯定会首先减少网络开销(更少的请求、更少的 header 等)。
• 此外(并且使前一点更糟)这还会破坏许多其他通常用于减少页面加载时间的功能。例如，资源不能被缓存——既不能在本地也不能在某些代理上——并且总是被传输。这对访问者和主办方来说可能代价高昂。

因此，解决这个问题的最佳方法通常是采取中间立场，如果加载时间对您来说是一个问题:

• 如果您使用的是第三方脚本，例如jQuery，从其他页面也使用的公共(public)托管 CDN 中获取这些内容。如果幸运的话，访问者的浏览器将有一个缓存副本并且不会执行该请求。

• 您自己的脚本应该被压缩并可能缩小为单个脚本(browersify、webpack 等工具)。这不得包括经常更改的部分，因为这些会迫使您更频繁地传输更多数据。

• 如果您有任何脚本或资源实际上只是当前访问者体验的一部分(例如登录状态、用户偏好中选择的颜色等)，则可以将它们直接放入父级HTML 文件，如果该文件无论如何都是自定义的并且将它们作为单独的文件交付将不起作用或会导致更多开销。一个完美的例子就是 CSRF token 。如果您能够提供一些由 Javascript 填充/更新的静态 HTML 文件，请不要这样做。