前端之DOM解析和渲染与CSS、JS之间的关系

时间 2019-11-17

标签前端 dom 解析渲染 css 之间关系栏目 HTML 繁體版

原文原文链接

每一个前端在第一次写一个完整功能的页面，均可能会是这个样子滴~css

<html>
  <head>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div id="app"></div>
    
    <script src="test.js"></script>
  </body>
</html>
复制代码

咱们都会被告知，css要放到head里面，js要放到body尾部前面。固然都能说出一二，可是咱们仍是有必要了解一下究竟是为啥。html

这里面有涉及到 DOM，CSS，JS 互相之间的一些关系，接下来会分别介绍前端

DOM

DOM这里有两个概念，解析与渲染。浏览器

DOM解析：就是把你所写的各类html标签，生成一个DOM TREE，能够认为就是生成了一个最原始的页面，一点样式都没有，毫无CSS修饰的那种；bash

DOM渲染：浏览器会把自己默认的样式+用户本身写得样式整合到一块儿，造成一个CSS TREE，而DOM渲染就是指DOM TREE 和 CSS TREE 结合到一块儿，生成一个Render TREE，呈现出一个带有样式的页面。app

线程

浏览器会有不一样的线程，好比说异步

GUI 渲染线程async
JS 线程spa
定时器触发线程 (setTimeout)线程
浏览器事件线程 (onclick)
http 异步线程

...

具体有关线程的内容，我会单独写一篇文章介绍，在这里咱们只须要知道两点：

上面的几个线程，在同一个瞬间，只有一个线程起做用，也就是互斥的。好比说浏览器在执行GUI 渲染线程呢，那么其余的4个进程，都处于挂起的状态，在队列里面呆着。
DOM的渲染对应的就是GUI渲染进程；JS的执行对应的就是JS线程；因此，DOM的渲染与JS代码的运行，在同一瞬间只能有一个执行！

阻塞

阻塞XXX是指让XXX暂停了。好比JS的执行阻塞DOM解析，就是

DOM解析 --> JS执行(此时DOM解析暂停) --> JS执行完毕 --> DOM继续解析

DOM与CSS

先看它俩之间的关系，也就是分析CSS的加载对DOM的解析和渲染的影响。

很明显，DOM本身在那解析DOM TREE 和 css样式有啥关系啊，因此css不影响DOM解析。

也很明显，DOM渲染就是要生成样式呢，确定和css有关系啊，因此css影响DOM渲染。

结论：

css的加载不会阻塞DOM的解析
css的加载会阻塞DOM的渲染

DOM与JS

JS（加载和执行）都会阻塞 DOM 的解析，由于JS中可能会对DOM进行操做，可能改变DOM的结构，因此JS的加载和执行是会阻塞DOM解析的。

JS（加载和执行）都会阻塞 DOM 的渲染，同上面同样，由于JS中可能对样式进行操做。

注： html中每遇到< script >标签，页面就会从新渲染一次，由于要保证标签中的JS代码拿到的都是最新的样式。

结论：

JS的加载和执行会阻塞DOM的解析
JS的加载和执行会阻塞DOM的渲染

CSS与JS

在线程那里说了，CSS的加载会阻塞JS的执行，由于CSS的渲染GUI线程和JS运行线程互斥。可是CSS不会阻塞JS的加载（浏览器能够预先扫描并下载）

注1：

CSS、JS之间的加载是否阻塞，这里不考虑，由于现代的浏览器都会预先偷看文档，而且下载。

注2：

这里的JS引入方式不包括async和defer

结论：

CSS的加载阻塞JS的运行，不阻塞JS的加载

三者

例1：

<header>
    <link href="test.css">
</header>
复制代码

加载test.css是不会影响header的解析的，只影响渲染

例2：

<header>
    <link href="test.css">
    <script src="test.js"></script>
</header>
复制代码

加载test.css阻塞了test.js的运行，test.js的运行阻塞了header的解析和渲染，因此，看似test.css既阻塞了header的渲染，又阻塞了header的解析。

总结

css的加载不会阻塞DOM的解析
css的加载会阻塞DOM的渲染
JS的加载和执行会阻塞DOM的解析
JS的加载和执行会阻塞DOM的渲染
CSS的加载阻塞JS的运行，不阻塞JS的加载
CSS的加载与JS的加载之间是否有影响？不考虑，浏览器自身会偷看并预先下载
遇到script标签会触发渲染，以便得到最新的样式给JS代码

最后：如有错误之处，还请见谅，提出后会立刻修改~~~

转载请注明出处，谢谢~~