js 放在
中，如果不添加 async 或者 defer 时，当浏览器遇到 script 时，会阻塞 DOM 树的构建，进而影响页面的加载。当 js 文件较多时，页面白屏的时间也会变长。在这个过程中，如果解析器遇到了一个脚本(script)，它就会停下来，并且执行这个脚本，然后才会继续解析 HTML。如果遇到了一个引用外部资源的脚本(script)，它就必须停下来等待这个脚本资源的下载，而这个行为会导致一个或者多个的网络往返，并且会延迟页面的首次渲染时间。
把 js 放到
里(一般在 的上面)时，由于 DOM 时顺序解析的，因此 js 不会阻塞 DOM 的解析。对于必须要在 DOM 解析前就要加载的 js，我们需要放在 中。上面很多都是纸上谈兵，这个回答相对靠谱。我做一些补充。
关于这个问题，我自己写个后端延迟脚本试验过。讲清楚区别，首先要了解浏览器渲染大过程。我们老生常谈，一般浏览器渲染过程分为，html解析-->dom树构建-->渲染树构建-->渲染树布局-->渲染树呈现 这样一个过程。
在以上过程中，需要了解的是，渲染树构建和dom树构建的区别，渲染树实际上是css展示样式和dom树结合创建过程，此过程依赖css的样式。而渲染树布局依赖css的布局样式。
基于上面的论点，也就是说，页面需要展示内容的过程是依赖css，而普通js脚本的加载又是依赖css正在加载的脚本的。
接下来回到上面的问题，js放在head和放在body的区别首先要搞清楚是有没css影响，有css影响时候是在css前还是css后面。
没有css的情况下。
那么浏览器到渲染到script脚本时候需要等待script脚本的载入和运行。这是两个过程，两个过程都是阻塞的。
这也就导致，如果在head中放了script标签，因为html解释过程是边解析边输出(dom)，此是在等待js完成后，由于上面的dom树构建部分还未完成，如果js有使用到dom的脚本，那么会报错。如果只是单纯的console.log其实是没有问题的。
放在body后，html解析到这里的时候dom树基本构建完成。js脚本加载和执行都不会有任何影响。而且这两种都页面解析是停止的。需要讨论异步情况，要关注defer和async两个属性。这里不做深究。
在有css情况下
浏览器的渲染中，dom树是会继续构建，但是js在css后面的时候，需要等待真正加载css完成才会执行。css过程不会阻塞页面dom树的构建，但是会阻塞渲染树的构建。此时反正body后会受延迟css的影响，不延迟不影响。defer和async默认会认为与css不相关，不受css影响。反正css前和1讨论没区别。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
