如果将所有网页资源编译成单个HTML文件,加载速度是否更快？

Question

如果我的网站编译步骤将所有外部脚本和样式转换为带有嵌入式<script>和<style>标记的单个HTML文件,该怎么办？由于不必为外部文件发送额外的GET,这会改善页面加载时间吗？如果是这样,为什么不经常这样做呢？

Answer 1

总的来说不可能说,因为它非常情绪化.

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

因此,如果加载时间对您来说是个问题,那么解决这个问题的最佳方法往往是中间地带:

• 如果您正在使用第三方脚本,例如jQuery,请从其他页面使用的公共托管CDN中获取这些脚本.如果幸运的话,访问者的浏览器将有一个缓存副本,不会执行请求.

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

• 如果您有任何脚本或资源只是当前访问者体验的一部分(如登录状态,用户首选项中选择的颜色等),可以将这些直接放入父HTML文件中,如果该文件无论如何都是定制的,并将它们作为单独的文件提供将无法工作或将导致更多的开销.一个完美的例子就是CSRF令牌.如果您能够提供由Javascript填充/更新的静态HTML文件,请不要这样做.