如果所有网页资源都编译成一个 HTML 文件,加载速度会更快吗?
Is it faster to load if all webpage resources are compiled into a single HTML file?
如果我的网站有一个编译步骤,可以将所有外部脚本和样式转换为带有嵌入式 <script>
和 <style>
标签的单个 HTML 文件,会怎样?由于不必为外部文件发送额外的 GET,这会缩短页面加载时间吗?如果是这样,为什么不经常这样做?
是的,它会缩短页面加载时间,但由于以下原因,这种方法仍然不经常使用:
- 调试会很困难。
- 如果以后要更新的话,也不是那么容易的。
- 单独的 css 和 .js 文件消除了这些问题
是的,为了加快页面加载速度,您可以使用 GRUNT、GULP、BRUNCH 等构建系统以获得更好的性能。
不能一概而论,因为这很分情况。
- 如果您从许多不同的服务器中提取资源,这些请求会减慢您的页面加载速度(尤其是访问端的 DNS 有问题)。
- 请求许多不同的文件也可能会减慢页面加载速度,即使它们来自同一个 origin/server。
- 请记住,并非每个人都拥有千兆位互联网(甚至是兆位级别)。因此,将所有内容直接放入您的 HTML 文件(内联或使用数据 URI)肯定会首先减少网络开销(更少的请求,更少的 headers,等等)。
- 此外(并且使前一点更糟)这也会破坏许多其他通常用于减少页面加载时间的功能。例如,资源不能被缓存——既不能在本地也不能在某些代理上——并且总是被传输。这对访问者和主办方来说可能代价高昂。
通常最好的方法是采取中间立场,如果加载时间对您来说是个问题:
如果您使用的是第三方脚本,例如jQuery,从其他页面也使用的 public 托管 CDN 中获取这些内容。如果幸运的话,访问者的浏览器将有一个缓存副本并且不会执行该请求。
您自己的脚本应该被压缩并可能缩小为单个脚本(browersify、webpack 等工具)。这不能包括经常更改的部分,因为这些会迫使您更频繁地传输更多数据。
如果您有任何脚本或资源实际上只是您当前访问者体验的一部分(例如登录状态、用户偏好中选择的颜色等),可以将这些直接进入 parent HTML 文件,如果该文件无论如何都是自定义的并且将它们作为单独的文件交付将不起作用或会导致更多开销。一个完美的例子就是 CSRF 令牌。但是,如果您能够通过 Javascript 交付一些 filled/updated 的静态 HTML 文件,请不要这样做。
如果我的网站有一个编译步骤,可以将所有外部脚本和样式转换为带有嵌入式 <script>
和 <style>
标签的单个 HTML 文件,会怎样?由于不必为外部文件发送额外的 GET,这会缩短页面加载时间吗?如果是这样,为什么不经常这样做?
是的,它会缩短页面加载时间,但由于以下原因,这种方法仍然不经常使用:
- 调试会很困难。
- 如果以后要更新的话,也不是那么容易的。
- 单独的 css 和 .js 文件消除了这些问题
是的,为了加快页面加载速度,您可以使用 GRUNT、GULP、BRUNCH 等构建系统以获得更好的性能。
不能一概而论,因为这很分情况。
- 如果您从许多不同的服务器中提取资源,这些请求会减慢您的页面加载速度(尤其是访问端的 DNS 有问题)。
- 请求许多不同的文件也可能会减慢页面加载速度,即使它们来自同一个 origin/server。
- 请记住,并非每个人都拥有千兆位互联网(甚至是兆位级别)。因此,将所有内容直接放入您的 HTML 文件(内联或使用数据 URI)肯定会首先减少网络开销(更少的请求,更少的 headers,等等)。
- 此外(并且使前一点更糟)这也会破坏许多其他通常用于减少页面加载时间的功能。例如,资源不能被缓存——既不能在本地也不能在某些代理上——并且总是被传输。这对访问者和主办方来说可能代价高昂。
通常最好的方法是采取中间立场,如果加载时间对您来说是个问题:
如果您使用的是第三方脚本,例如jQuery,从其他页面也使用的 public 托管 CDN 中获取这些内容。如果幸运的话,访问者的浏览器将有一个缓存副本并且不会执行该请求。
您自己的脚本应该被压缩并可能缩小为单个脚本(browersify、webpack 等工具)。这不能包括经常更改的部分,因为这些会迫使您更频繁地传输更多数据。
如果您有任何脚本或资源实际上只是您当前访问者体验的一部分(例如登录状态、用户偏好中选择的颜色等),可以将这些直接进入 parent HTML 文件,如果该文件无论如何都是自定义的并且将它们作为单独的文件交付将不起作用或会导致更多开销。一个完美的例子就是 CSRF 令牌。但是,如果您能够通过 Javascript 交付一些 filled/updated 的静态 HTML 文件,请不要这样做。