浏览器渲染过程

浏览器的渲染分为五个步骤：

1. 处理HTML标记并构建DOM树
2. 处理CSS标记并构建 CSSOM树(CSS Object Model) 
3. 将CSSOM和DOM合并成一个渲染树
4. 根据渲染树来布局，以计算每个节点的几何信息
5. 将各个节点绘制到屏幕上

这五个步骤不一定一次性顺序完成。如果DOM或者CSSOM被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS与JavaScript往往会多次修改DOM和CSSOM。

阻塞渲染：

现代浏览器总是并行加载资源。比如，当HTML解析器被脚本阻塞时，解析器虽然会停止构建DOM，但仍会识别该脚本后的资源，并进行预加载。

1. 默认情况下，CSS被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至CSSOM构建完毕。
2. JavaScript不仅可以读取和修改DOM属性，还可以读取和修改CSSOM属性。

也就是说，存在阻塞的CSS资源时，浏览器会延迟JavaScript的执行和DOM构建。另外：

1. 当浏览器遇到一个script标签时，DOM构建将暂停，直至脚本执行完成。
2. JavaScript可以查询和修改DOM与CSSOM。
3. CSSOM构建时，JavaScript执行将暂停，直至CSSOM就绪。

所以，script标签的位置很重要。实际使用中可以遵循下面的原则：

1. CSS优先：引入顺序上，CSS资源优先于JavaScript资源。
2. JavaScript应尽量减少影响DOM的构建。