Script放在body头部就一定会阻塞吗

这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

答案解析

不一定会阻塞； 如果页面使用外链脚本的话可以使用script标签的拓展属性defer或async属性，延迟执行js或者异步执行脚本； 但是内嵌脚本或没有使用延迟或异步属性标记的普通script标签，还是会造成阻塞的。 因为浏览器解析html文件时，从上向下解析构建DOM树。当解析到script标签时，会暂停DOM构建。先把脚本加载并执行完毕，才会继续向下解析。\

script标签的拓展属性：defer、async

defer

它会延迟执行js,当页面解析到script标签时，它会先下载，但不执行, 所以他不会阻塞其他进程，此类文件可以与页面其他资源并行下载。

async

这是h5中新增的属性，它规定脚本可以异步执行；

defer与async的区别

defer是先下载下来，然后顺序执行； async是在页面解析的同时，异步的加载执行，多个文件的执行顺序不能保证，谁先加载完谁先执行。 这个大佬的做的很棒可以去看看github.com/waiter/Scri…

浏览器渲染过程

简单说一下,总体四步

1. 构建对象模型（DOM，CSSOM） 浏览器获取到html页面后，先遍历文档节点，生成dom树； DOM解析的同时可以解析css,生成CSSOM\
2. 构建渲染树（Render tree） 通过DOM树和CSS规则树,构建渲染树。 浏览器会先从DOM树的根节点开始遍历每个可见节点，然后对每个可见节点找到适配的CSS样式规则并应用\
3. 布局 渲染树生成后，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。\
4. 绘制 根据计算好的信息绘制整个页面