之前只是大致知道css和js对浏览器渲染会有影响，尤其是js的影响很大，所以我们习惯性的把js放在文档底部进行加载，css放在头部进行加载，却一直不知道具体的原理，因为浏览器渲染本来就是很复杂的问题，可是作为一个前端工作者，不懂这些原理，总是没法在项目需要优化的时候进行很好的处理，最近看了一些文章，特意研究了一下浏览器的解析原理，也终于有了一些收获，甚至是收获不小，今天记录一下，免得日后忘记，也是和大家分享一下自己的理解
- 首先 思考两个问题，css加载和解析以及html加载和解析对浏览器的渲染会不会有影响，首先看一个图：
浏览器解析流程图
此图详细解释了从浏览器获取页面地址到呈现到客户端所经历的过程，首先是HTML解析成DOM树，于此同时是CSS文件解析成cssOM,然后是DOM和cssOM组合构成渲染树(Render Tree),最后由(Painting)执行，渲染出来页面，所以按照此图的前后顺序可以推断彼此之间的关系如下：
css加载和解析对html的加载和解析是没有影响的，反过来也是同样的道理(html的加载和解析对css的加载和解析也没有影响)因为他们是并行的关系:如下图
htmlcss
但是css的加载和解析以及html的加载和解析对浏览器的渲染是有影响的，因为浏览器的渲染是需要HTML和CSS共同构成RenderTree 然后由Painting来渲染成页面的。
- 第2个问题，弄明白css和html对浏览器的影响的问题以后，我们不由得会想到js，js的加载和解析对浏览器的渲染又会有何影响呢？我们看一代码：
<p>Do not go gentle into that good night,</p>
<script>console.log("inline1")</script>
<p>Old age should burn and rave at close of day;</p>
上面的 P 标签会从上到下解析，这个过程会被 JavaScript 分别打断一次（加载、执行）因为JavaScript 的情况比 CSS 要更复杂一些。如果没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的HTML元素之前，也就是说不等待后续载入的HTML元素，读到就加载并执行。过程如下图：
js过程图
蓝色线代表网络读取，红色线代表执行时间，绿色线代表 HTML 解析。
到此才明白：
1:js加载和解析都会阻塞浏览器渲染；思考了一下，浏览器这样设置也是合理的，因为如果js加载不阻塞浏览器渲染，假如第一个js文件里面有修改DOM的操作，后面紧跟着继续解析html的话，等js执行的时候有可能操作的DOM已经不是我们想像中的那一个了，因为此时的DOM结构已经发生了变化，比如：我们想在某个元素后面增加第一个子内容，如果js加载的时候不阻止后面的html的解析，可能我们增加的元素本希望是放在父元素的第一位而现在却放到了最后一个。
网友评论