红宝书笔记 | 为什么将JS引用放在<body>标签中的内容后面

_张三儿出使西域

2021-03-07 145 阅读1分钟

过去，<script>元素都被放在页面的<head>标签内，这样做主要目的是把外部的CSS和JS文件都集中放在一起。不过，把所有的JS文件都放在<head>里，也就意味着必须把所有的JS代码都下载，解析和解释完成后，才能开始渲染页面（页面在浏览器解析到<body>的起始标签时开始渲染）。而现在开发中，通常需要很多JavaScript的页面；

这样会导致页面渲染的明显延迟，在此期间浏览器窗口完全空白；

为解决这个问题，现代程序中将所有的JavaScript引用放在<body>标签中的页面内容后面，引用外部文件的JS，就须使用src属性；如下例：

<!DOCTYPE html>
<html>
    <head>
    <title>案例如下</title>
    </head>
    <body>
    <!--  这里是页面内容 -->

    <script src="main.js"></script>
    </body> 
</html>

这样一来，页面会在处理JavaScript代码之前完全渲染页面，用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。