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

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

  1.  
    <html>
  2.  
    <head>
  3.  
    <link rel="stylesheet" href="test.css">
  4.  
    </head>
  5.  
    <body>
  6.  
    <div id="app"></div>
  7.  
     
  8.  
    <script src="test.js"></script>
  9.  
    </body>
  10.  
    </html>
  11.  
    复制代码

我们都会被告知,css要放到head里面,js要放到body尾部前面。当然都能说出一二,但是我们还是有必要了解一下到底是为啥。

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

DOM

DOM这里有两个概念,解析与渲染。

DOM解析:就是把你所写的各种html标签,生成一个DOM TREE,可以认为就是生成了一个最原始的页面,一点样式都没有,毫无CSS修饰的那种;

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

 

 

线程

浏览器会有不同的线程,比如说

  1. GUI 渲染线程

  2. JS 线程

  3. 定时器触发线程 (setTimeout)

  4. 浏览器事件线程 (onclick)

  5. http 异步线程

    ...

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

  1. 上面的几个线程,在同一个瞬间,只有一个线程起作用,也就是互斥的。比如说浏览器在执行GUI 渲染线程呢,那么其他的4个进程,都处于挂起的状态,在队列里面呆着。
  2. 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渲染。

结论:

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

DOM与JS

JS(加载和执行) 都会阻塞 DOM 的解析,因为JS中可能会对DOM进行操作,可能改变DOM的结构,所以JS的加载和执行是会阻塞DOM解析的。

JS(加载和执行) 都会阻塞 DOM 的渲染,同上面一样,因为JS中可能对样式进行操作。

注: html中每遇到< script >标签,页面就会重新渲染一次,因为要保证标签中的JS代码拿到的都是最新的样式。

结论:

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

CSS与JS

在线程那里说了,CSS的加载会阻塞JS的执行,因为CSS的渲染GUI线程和JS运行线程互斥。 但是CSS不会阻塞JS的加载(浏览器可以预先扫描并下载)

注1:

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

注2:

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

结论:

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

三者

例1:

  1.  
    <header>
  2.  
    <link href="test.css">
  3.  
    </header>
  4.  
    复制代码

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

例2:

  1.  
    <header>
  2.  
    <link href="test.css">
  3.  
    <script src="test.js"></script>
  4.  
    </header>
  5.  
    复制代码

加载test.css阻塞了test.js的运行,test.js的运行阻塞了header的解析和渲染,所以,看似test.css既阻塞了header的渲染,又阻塞了header的解析。

总结

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

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

上一篇:【C/C++服务器开发】具备丰富功能和可以同时响应多个客服端的服务器


下一篇:bochs命令