盒子
盒子
文章目录
  1. 前言
  2. 正文
  3. 参考

尽量把 javascript 代码放到 html 网页底部

前言

2019-01-14

当时写的时候,其实自己都没有捋得很清楚…只是觉得这样好像说得通诶!就没有深入思考了…

正文

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

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

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

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

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

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

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

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

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

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

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

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

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

参考