重新审视网站优化的经验法则:JavaScript 仍然需要在现代浏览器的底部?
Revisiting site optimization rules of thumb: JavaScript still necessary at the bottom with modern browsers?
我关注 Web 开发趋势已有 10 多年了。我一直坚持的最重要的网站优化技术之一是 JavaScript 位于您网站的底部。
我坚持的理由是 JavaScript 阻止并行下载,每个主机名一次只能下载两个组件。如果添加到文档的 header 中,这将对您的网站加载时间产生负面影响。
现在我正在重新审视我以前关于网站优化的所有想法,我了解到 none 对于现代网络浏览器来说,这实际上是正确的。
例如,截至 2015 年 2 月,Internet Explorer 11 现在每个主机名可以有 13 个连接(不再只有两个)并且 JavaScript 不再阻止并行下载!这种行为对于所有现代浏览器也是如此。
如果在用户与页面交互之前不使用 JavaScript 并且无论如何都应该将其放在底部,这是可以理解的,但它现在和以前一样重要吗?
我正在浏览电子商务网站以了解他们现在使用的模式:
看着建筑差点哭了。超过 60 个外部 JavaScript 文件,其中很多在 header 中,几乎 none 在页脚中。
但是从网络时间轴来看,所有 JavaScript 文件中的大部分都以如此惊人的速度首先加载,这确实不会影响站点的其余部分。您可以看到同时下载所有并行文件。
我假设这是出于某些特殊原因而完成的,所以我长篇大论的问题是我是否遗漏了什么?
对于现代浏览器,有必要遵守我们过去的旧规则吗?既然我们不再依赖 IE6 和那个时代为浏览器制定的规则,我们是否应该重新审视我们如何优化网站?
优化技术发生了变化,但与此同时,浏览器的 JavaScript 运行时引擎 + 用户资源也变得更好了。您可以通过重新访问旧代码来获得更高的性能,这是真的,但我怀疑性能的提高是否值得冒意外破坏遗留代码的风险(尤其是当涉及 IE 时)。
显然,您的代码的作用和它的服务对象对您的决定有很大影响。例如,如果您的大部分用户都在使用移动浏览器,JavaScript 性能就更为重要。
--编辑--
作为旁注,我想提一下 IMO,该网站对性能不友好。加载那么多外部(和嵌入式)脚本是不正常的。现在加载大量 JS 文件的一种更好的方法是通过 AJAX 注入它们。另一种是让你的服务器根据你的页面将各种JS文件拼接成一个,然后缓存这些处理过的文件。
不幸的是,并行下载只是JS优化中众多关注点之一。
虽然您的现代浏览器可以与以前相比并行下载更多文件,但浏览器仍会按顺序解析它们。如果脚本 #50(共 100 个)未下载、出现无限循环或其他情况,即使所有 99 个其他脚本都已完成下载,浏览器仍将等待 #50 执行,然后再执行其他 50 个(值得注意的例外是当脚本具有 defer
或 async
属性时)。
此外,使用停滞脚本,您的页面将不会呈现任何内容,只是一个空白页面。这不利于用户体验。是的,我见过这样的代码,您将面对一个空白的白页 30 秒,因为头脑中的十几个脚本决定速度很慢。
仅仅因为浏览器可以更快并不意味着您可以跳过开发人员方面的优化。越快越好,开发人员一直在使用优化来压缩 JS 的性能。坚持下去最好。
我关注 Web 开发趋势已有 10 多年了。我一直坚持的最重要的网站优化技术之一是 JavaScript 位于您网站的底部。
我坚持的理由是 JavaScript 阻止并行下载,每个主机名一次只能下载两个组件。如果添加到文档的 header 中,这将对您的网站加载时间产生负面影响。
现在我正在重新审视我以前关于网站优化的所有想法,我了解到 none 对于现代网络浏览器来说,这实际上是正确的。
例如,截至 2015 年 2 月,Internet Explorer 11 现在每个主机名可以有 13 个连接(不再只有两个)并且 JavaScript 不再阻止并行下载!这种行为对于所有现代浏览器也是如此。
如果在用户与页面交互之前不使用 JavaScript 并且无论如何都应该将其放在底部,这是可以理解的,但它现在和以前一样重要吗?
我正在浏览电子商务网站以了解他们现在使用的模式:
看着建筑差点哭了。超过 60 个外部 JavaScript 文件,其中很多在 header 中,几乎 none 在页脚中。
但是从网络时间轴来看,所有 JavaScript 文件中的大部分都以如此惊人的速度首先加载,这确实不会影响站点的其余部分。您可以看到同时下载所有并行文件。
我假设这是出于某些特殊原因而完成的,所以我长篇大论的问题是我是否遗漏了什么?
对于现代浏览器,有必要遵守我们过去的旧规则吗?既然我们不再依赖 IE6 和那个时代为浏览器制定的规则,我们是否应该重新审视我们如何优化网站?
优化技术发生了变化,但与此同时,浏览器的 JavaScript 运行时引擎 + 用户资源也变得更好了。您可以通过重新访问旧代码来获得更高的性能,这是真的,但我怀疑性能的提高是否值得冒意外破坏遗留代码的风险(尤其是当涉及 IE 时)。
显然,您的代码的作用和它的服务对象对您的决定有很大影响。例如,如果您的大部分用户都在使用移动浏览器,JavaScript 性能就更为重要。
--编辑--
作为旁注,我想提一下 IMO,该网站对性能不友好。加载那么多外部(和嵌入式)脚本是不正常的。现在加载大量 JS 文件的一种更好的方法是通过 AJAX 注入它们。另一种是让你的服务器根据你的页面将各种JS文件拼接成一个,然后缓存这些处理过的文件。
不幸的是,并行下载只是JS优化中众多关注点之一。
虽然您的现代浏览器可以与以前相比并行下载更多文件,但浏览器仍会按顺序解析它们。如果脚本 #50(共 100 个)未下载、出现无限循环或其他情况,即使所有 99 个其他脚本都已完成下载,浏览器仍将等待 #50 执行,然后再执行其他 50 个(值得注意的例外是当脚本具有 defer
或 async
属性时)。
此外,使用停滞脚本,您的页面将不会呈现任何内容,只是一个空白页面。这不利于用户体验。是的,我见过这样的代码,您将面对一个空白的白页 30 秒,因为头脑中的十几个脚本决定速度很慢。
仅仅因为浏览器可以更快并不意味着您可以跳过开发人员方面的优化。越快越好,开发人员一直在使用优化来压缩 JS 的性能。坚持下去最好。