Revisiting site optimization rules of thumb: JavaScript still necessary at the bottom with modern browsers?
我已经关注 Web 开发趋势超过 10 年了。我一直坚持的最大的网站优化技术之一是 JavaScript 位于您网站的底部。
我一直坚持的理由是 JavaScript 会阻止并行下载,并且每个主机名一次只能下载两个组件。如果将其添加到文档的标题中,这将对您的网站加载时间产生负面影响。
现在我正在重新审视我之前关于网站优化的所有想法,我了解到,对于现代网络浏览器来说,这一切都不再是真的了。
例如,截至 2015 年 2 月,Internet Explorer 11 现在每个主机名可以有 13 个连接(不再只有两个),并且 JavaScript 不再阻止并行下载!这种行为也适用于所有现代浏览器。
虽然可以理解,如果您在用户与页面交互之前不使用 JavaScript 并且无论如何都应该将其放在底部,但现在它是否像以前一样重要?
我正在浏览电子商务网站以了解他们现在使用的模式:
http://us.karenmillen.com/Karen-Millen-texture-knitted-dress/dp/B00TH9FDQG?class=quickView
优化技术发生了变化,但与此同时,浏览器的 JavaScript 运行时引擎用户资源也变得更好。您可以通过重新访问旧代码来获得更高的性能,这是真的,但我怀疑性能的提升是否值得冒意外破坏旧代码的风险(尤其是在涉及 IE 时)。
很明显,您的代码做什么以及它的服务对象对您做出决定有很大影响。例如,如果您的大部分用户使用移动浏览器,则 JavaScript 性能更为重要。
--编辑--
作为旁注,我想提一下 IMO,该网站对性能不友好。加载那么多外部(和嵌入式)脚本是不正常的。现在加载大量 JS 文件的更好方法之一是通过 AJAX 注入它们。另一种是让您的服务器根据您的页面将各种 JS 文件合并为一个,然后缓存这些处理过的文件。
不幸的是,并行下载只是 JS 优化中的众多问题之一。
虽然您的现代浏览器与以前相比可以并行下载更多文件,但浏览器仍会按顺序解析它们。如果脚本 #50(共 100 个)没有下载、出现无限循环或其他情况,即使所有其他 99 个脚本都已完成下载,浏览器仍会等待 #50 执行,然后再执行其他 50 个(值得注意的例外是脚本具有
此外,使用停滞脚本,您的页面根本不会呈现任何内容,只是一个空白页面。这对用户体验不利。是的,我见过这样的代码,您将在 30 秒内面对一个空白的白页,因为头脑中的十几个脚本决定变慢。
仅仅因为浏览器可以更快地做到这一点并不意味着您可以跳过开发人员方面的优化。越快越快,开发人员一直在使用优化从 JS 中挤出性能。最好坚持下去。