一般来说，我们都会将外部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底部。
网友评论