重新审视网站优化的经验法则:对于现代浏览器，仍然需要在底部使用JavaScript吗? [英] Revisiting site optimization rules of thumb: JavaScript still necessary at the bottom with modern browsers?

问题描述

十多年来，我一直关注Web开发趋势.我一直坚持使用的最大的网站优化技术之一就是JavaScript位于您网站的底部.

I've been following web development trends for over 10 years now. One of the biggest site optimization techniques i've always stuck to was that JavaScript goes at the bottom of your site.

我一直坚持的理由是JavaScript阻止并行下载，并且每个主机名一次只能下载两个组件.如果添加到文档标题中，这将对您的网站加载时间产生负面影响.

The reasoning i've stuck with was that JavaScript blocks parallel downloads and each hostname may only download two components at a time. This will negatively impact your site load times if added into the header of the document.

现在，我重新审视了以前有关网站优化的所有想法，我发现对于现代Web浏览器，这一切都不是真的了.

Now that i'm revisiting all my previous thoughts on site optimization i'm learning that none of this is actually true anymore with modern web browsers.

例如，自2015年2月起，Internet Explorer 11现在每个主机名可以具有13个连接(不再只有两个)，并且JavaScript不再阻止并行下载！对于所有现代浏览器，此行为也是如此.

For example as of February 2015, Internet Explorer 11 can now have 13 connections per host name (no longer just two) and JavaScript no longer blocks parallel downloading! This behavior is also true with ALL modern browsers.

虽然可以理解的是，如果直到用户与页面进行交互之前不使用JavaScript，并且无论如何都应将其放在底部，那么它现在和以前一样重要吗?

While it's understandable that if you are not using JavaScript until the user interacts with the page and you should put it at the bottom anyway, is it as important now as it was before?

我正在浏览电子商务网站，以查看他们现在正在使用的模式:

I'm looking through ecommerce sites to see the patterns they are using now:

看着建筑几乎让我哭了.超过60个外部JavaScript文件，其中很多文件位于标头中，而脚注中几乎没有.

Looking at the architecture almost made me cry. Over 60 external JavaScript files with a lot of them in the header, and almost none in the footer.

但是从网络时间轴来看，大多数JavaScript文件都是以如此快的速度首先加载的，实际上并没有影响到网站的其余部分.您可以看到所有同时下载的并行文件.

But looking at the network timeline the majority of all the JavaScript files are being loaded first at such blazing speed it really isn't affecting the rest of the site. You can see all the parallel files being downloaded at the same time.

我认为这样做是出于某些特殊原因，所以我一直以来的疑问是我遗漏了一些东西吗?

I'm assuming this was done for some particular reason so my long winded question is am I missing something?

使用现代浏览器，有必要遵循过去的旧规则吗?既然我们不再依赖IE6和那个时代为浏览器制定的规则，我们是否应该重新考虑如何优化网站?

With modern browsers how necessary is it to stick to our old rules from the past? Should we be revisiting how we optimize sites now that we no longer rely on IE6 and rules that were made for browsers in that era?

推荐答案

不幸的是，并行下载只是JS优化中众多关注的问题之一.

Unfortunately, parallel downloads is just one of the many concerns in JS optimization.

尽管现代浏览器 可以比以前并行下载更多文件，但浏览器仍然按顺序解析它们.如果脚本#50(在100个脚本中)没有下载，有无限循环或其他原因，即使所有其他99个脚本都已完成下载，浏览器仍将等待#50执行，然后再执行其他50个脚本(值得注意的例外是脚本具有defer或async属性.

While your modern browser can download more files in parallel compared to before, the browser still parses them in sequence. If script #50 (out of a 100) doesn't download, has an infinite loop or whatever, even if all 99 other scripts have finished download, the browser will still wait for #50 to execute before executing the other 50 after it (notable exception is when the script has a defer or async attribute).

此外，使用拖延脚本，您的页面将完全不会呈现任何内容，而只是空白的白色页面.这不利于用户体验.是的，我看到过这样的代码，您将面临一张空白的白纸30秒钟，因为头上的十二个脚本决定运行缓慢.

Also, with a stalling script, your page will not render anything at all, just a blank white page. This is not good for user experience. Yes, I have seen code like this where you'll face a blank white page for 30 seconds because a dozen of scripts up in the head decided to be slow.

仅仅是因为浏览器可以更快地完成操作，并不意味着您可以跳过开发人员方面的优化.速度越快，开发人员就一直在使用优化来降低JS的性能.最好坚持下去.

Just because the browser can do it faster doesn't mean you can skip the optimizations on the developer side. Faster is faster, and developers have been squeezing performance out of JS using optimization. Best if you stick to it.

这篇关于重新审视网站优化的经验法则:对于现代浏览器，仍然需要在底部使用JavaScript吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！