一般来说,我们都会将外部js
文件放在我们html
的<head>...</head>
中:
<html>
<head>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
...
</body>
</html>
那么这样到底好不好呢?
在浏览器渲染页面之前,它需要通过解析HTML标记然后构建DOM树。在这个过程中,如果解析器遇到了一个脚本(script),它就会停下来,并且执行这个脚本,然后才会继续解析HTML。如果遇到了一个引用外部资源的脚本(script),它就必须停下来等待这个脚本资源的下载,而这个行为会导致一个或者多个的网络往返,并且会延迟页面的首次渲染时间。
那么既然把脚本(script)资源放在head里面是个不好的主意,并且可能会阻塞浏览器渲染页面;那我们是不是要把所有的JavaScript文件都放置到文档的底部呢?
那也不一定哦。。。
如果你的脚本中使用了document.write
在页面中插入内容的话,那么我的内容必须在页面加载的时候就显示出来,那此时我的js
就必须在<head>
里面了。
到底怎么放呢
对于必须要在DOM加载之前运行的JavaScript脚本,我们需要把这些脚本放置在页面的head中,而不是通过外部引用的方式,因为外部的引用增加了网络的请求次数;并且我们要确保内敛的这些JavaScript脚本是很小的,最好是压缩过的,并且执行的速度很快,不会造成浏览器渲染的阻塞;
对于支持使用
script
标签的async
和defer
属性的浏览器,我们可以使用这两个属性;async
和defer
都代表异步执行,他们的下载过程都可以在HTML的解析过程中进行,async
加载完成之后立即执行这个文件的代码,执行文件代码的过程中会阻塞HTML的解析,defer
是在HTML文档解析之后再执行加载完成的文件那么除了必须在页面加载前执行的
js
文件,且不支持async
和defer
的浏览器,那么我们就可以将他们放在html
底部。