尽量把 JavaScript 代码放到 HTML 网页底部

前言#

[update 2019-01-14] 当时写的时候,其实自己都没有捋得很清楚...只是觉得这样好像说得通诶!就没有深入思考了...

正文#

在《javascript DOM 编程思想》中看到 「最好的做法是把< script>标签放到HTML文档的最后,</body> 标签之前,这样能使浏览器更快地加载页面」。(严格来说应该是尽量放在底部,也会有不尽量的那部分。)

通常情况下,JavaScript 代码的放置位置有两种,<head> 标签内,<body> 标签内。 那么,把 JavaScript 代码放在这两个不同位置,到底会有什么差别呢?

首先,HTML 文档是由浏览器从上到下依次载入的。页面的加载顺序如下:

  • 解析HTML结构。
  • 加载外部脚本和样式表文件。
  • 解析并执行脚本代码。
  • 构造 HTML DOM 模型。
  • 加载图片等外部文件。
  • 页面加载完毕。

如果把 JavaScript 代码放在 <head> 标签之间,可以确保在需要使用脚本之前,它已经被载入了。但是当我们有一段 JavaScript 代码要操作 HTML 元素时,就会因为 HTML 元素还未载入界面(对象不存在)而出错。也就是 DOM 树还未开始构造,我们就试图操作 DOM 对象。

当然,通常情况下,我们操作页面元素一般都是通过事件来驱动的。即当我们使用 window.load = start(); 时,strat() 函数内的 JavaScript 代码只会在页面载入完成后执行。所以上面这种情况并不多见。

可是这样好像还是没有回答为什么能使浏览器更快地加载页面。

在该书中还提到,一般来说,根据 HTTP 规范,浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间,浏览器不会下载其他任何文件,即使是来自不同域名的文件也不会下载,所有其他资源都要等到脚本加载完毕后才能下载。

经过搜索发现,这被叫作浏览器并发请求数,而这个限制已经是IE6时代的了。显然,这不应该是主要原因。

浏览器并发请求数比较数据

前面提到浏览器加载 HTML 文档是从上到下,而在渲染的过程中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。

我的理解是,浏览器更快地加载页面,意味着浏览器更快地让用户能进行基本的操作。

如果把 JavaScript 代码放得很早,但是代码加载缓慢或者加载失败(外链加载很可能出现这种情况),这时网页会在这一步卡很久很久,而用户也会在网页上看到一大段空白。显然,体验是极其不友好的。当我们把 JavaScript 代码放于底部时,至少能先让网页的内容先展示出来。

参考#