DOM和CSS渲染过程摘抄-021

happyfish 发布于2019-08-23 18:18 / 1227人阅读

摘要：和渲染过程一个简单的页面如上所示。的主要是为了完成匹配并把附加上上的每个。然后，计算每个也就是每个的位置，这又叫和过程。将与合并成一个渲染树。优化关键渲染路径就是指最大限度缩短执行上述第步至第步耗费的总时间

DOM和CSS渲染过程 DOM




    
    
    
    Document

一个简单的html页面如上所示。

DOM有两个概念：

解析

渲染

DOM解析

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

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

1）浏览器会解析三个东西：

一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：

Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。
3）最后通过调用操作系统Native GUI的API绘制。

线程

js 是单线程，但是浏览器是多线程的。

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

GUI 渲染线程

JS 线程

定时器触发线程 (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的加载

Note: 简单提一句，请注意 visibility: hidden 与 display: none 是不一样的。前者隐藏元素，但元素仍占据着布局空间（即将其渲染成一个空框），而后者 (display: none) 将元素从渲染树中完全移除，元素既不可见，也不是布局的组成部分。

下面简要概述了浏览器完成的步骤：

处理 HTML 标记并构建 DOM 树。

处理 CSS 标记并构建 CSSOM 树。

将 DOM 与 CSSOM 合并成一个渲染树。

根据渲染树来布局，以计算每个节点的几何信息。

将各个节点绘制到屏幕上。

优化关键渲染路径_就是指最大限度缩短执行上述第 1 步至第 5 步耗费的总时间

https://developers.google.com...

云服务器 GPU云服务器 DOM渲染 js_css_dom dom0和dom2 使用Javascript和DOM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104991.html

DOM和CSS渲染过程摘抄-021

摘要：和渲染过程一个简单的页面如上所示。的主要是为了完成匹配并把附加上上的每个。然后，计算每个也就是每个的位置，这又叫和过程。将与合并成一个渲染树。优化关键渲染路径就是指最大限度缩短执行上述第步至第步耗费的总时间 DOM和CSS渲染过程 DOM Document 一个简单的html页面如上所示。 DOM有两个概念：解析渲染...

gougoujiang 2019-08-02 15:24 评论0 收藏0
CSS Conf -《新时代CSS布局》学习总结

摘要：分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中，慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的，而的则是发布。作者：陈大鱼头 github： KRISACHAN 记录原因：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头作为一枚CSS新手以及爱好者也...

番茄西红柿 2019-05-23 15:55 评论0 收藏0
CSS Conf -《新时代CSS布局》学习总结

摘要：分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中，慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的，而的则是发布。作者：陈大鱼头 github： KRISACHAN 记录原因：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头作为一枚CSS新手以及爱好者也...

libxd 2019-05-23 11:56 评论0 收藏0
Router入门0x201: 从 URL 到 SPA

摘要：的全称是统一资源定位符英文，可以这么说，是一种标准，而网址则是符合标准的一种实现而已。渲染器，将组件渲染到页面上。 0x000 概述从这一章开始就进入路由章节了，并不直接从如何使用react-route来讲，而是从路由的概念和实现来讲，达到知道路由的本质，而不是只知道如何使用react-route库的目的，毕竟react-route只是一个库，是路由的一个实现而已，而不是路由本身。 ...

honmaple 2019-08-26 12:20 评论0 收藏0