简单说步骤如下：
1： 浏览器拿到html之后，开始解析html，生成dom tree
2： 在dom解析中，遇到js的外链或者script代码，浏览器会停止dom解析，在完成js代码下载执行之后，再继续解析。 遇到css的外链或者css的代码， 浏览器会继续解析dom， 并且会下载css，并行解析css生成cssom tree （dom 和 cssom是并行的）
3： dom tree 和 cssom tree 会合并生成render tree（渲染树），浏览器layout并paint， 这是一个渐进的过程。为达到更好的用户体验，render引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建render树和设置布局。
从上面的步骤不难看出，css放在头部，js放在尾部对页面优化的提升作用。 css并不阻塞dom解析(css只会阻塞渲染，css加载慢会让页面一开始很丑，但是不影响用户看，但是丑对用户就是一种伤害....)， 而js会(除非少部分影响页面构建的js，剩下的js应该在底部加载执行)。
现在的浏览器很聪明，并不是解析到html的script或者link标签再去下载静态资源， 这些都在浏览器dom解析到之前被定位出来提前下载。 另外js的执行会被之前cssom的生成（css文件下载并解析）所阻断。
参考链接
浏览器的工作原理：新式网络浏览器幕后揭秘
原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的
浏览器渲染页面原理
JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
浏览器渲染机制——一定要放在body底部的js引用
网友评论