如果将所有网页资源汇编为单个HTML文件,加载速度会更快



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

一般不可能说,因为它非常处境。

  • 如果您要从许多不同的服务器中提取资源,这些请求可能会减慢您的页面加载(尤其是在访问的一侧进行一些不良DNS)。
  • 请求许多不同的文件也可能会减慢页面加载,即使它们来自相同的Origin/Server。
  • 请记住,并不是每个人都有千兆位互联网(甚至在Megabit级别上)。因此
  • 此外(并使上几点更糟)这也将破坏许多其他功能,通常用于减少页面加载时间。例如,资源不能被缓存 - 既不在本地和某些代理上 - 总是被转移。对于访客和主持人而言,这可能是昂贵的。

通常最好的方法是中间立场,如果加载时间对您来说是一个问题:

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

  • 应将您自己的脚本凝结,并可能将其缩小为一个脚本(例如browersify,webpack等工具)。这不得包括经常更改零件,因为这些零件会迫使您更频繁地传输更多数据。

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

是的,它将改善页面加载时间,但由于这些原因,这种方法仍然不经常使用:

  1. 调试将很困难。
  2. 如果我们以后要更新,也不会那么容易。
  3. 单独的CSS和.JS文件删除这些问题

是的,对于更快的页面加载,您可以使用grunt,Gulp,早午餐等的构建系统以获得更好的性能。

最新更新