页面渲染机制（一、DOM和CSSOM树的构建）

最新推荐文章于 2024-08-07 10:08:54 发布

weixin_30287169

最新推荐文章于 2024-08-07 10:08:54 发布

阅读量1.3k

点赞数

原文链接：http://www.cnblogs.com/zhuxingqing/p/11075831.html

版权

1、HTML的加载

　　HTML是一个网页的基础，下载完成后解析

2、其他静态资源加载

　　解析HTML时，发现其中有其他外部资源链接比如CSS、JS、图片等，会立即启用别的线程下载。

　　但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果

3、DOM树构建

　　在HTML解析的同时，解析器会把解析完成的结果转换成DOM对象，再进一步构建DOM树

4、CSSOM树构建

　　CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树

5、渲染树构建

　　当DOM树和CSSOM树都构建完之后，浏览器根据这两个树构建一棵渲染树

6、布局计算

　　渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

7、渲染

　　布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

转载于:https://www.cnblogs.com/zhuxingqing/p/11075831.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30287169

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

DOM树和CSSOM树的构建和渲染

Y0admin的博客

11-26

2474

页面的渲染过程当我们在浏览器里输入一个 URL 后，最终会呈现一个完整的网页。会经历以下几个步骤： 1、HTML 的加载页面上输入 URL 后，会先拿到 HTML 文件。HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析 2、其他静态资源的下载 HTML 在解析的过程中，如果发现 HTML 文本里面有一些外部的资源链接，比如 CSS、JS 和图片等，会立即启用别的线程下载这些静态资源。在 head 中遇到 JS 文件时，HTML 的解析会停下来，等 JS 文件

Dom树 CSS树渲染树

Hello_yhr的博客

10-07

267

1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 5.页面渲染 HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM 节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内

参与评论您还未登录，请先登录后发表或查看评论

【JavaScript进阶之旅前端宿主浏览器篇第二十六章】DOM/CSS渲染树、解析与加载、回流与重绘

马云

07-15

270

深度优先原则html->head->meta->title->body->div->h1->ul->span->i。浏览器引擎将整个HTML页面形成一种DOM结构，在用树形的方式排列起来，这就叫做DOM树，必须满足深度优先解析原则。需要计算的操作比如getComputedStyle()，会刷新队列，清空队列，防止页面刷新影响计算结果。改变元素的位置不引起页面的布局、不会引起回流，就是重绘。JS对页面的节点操作时，就会产生回流或重绘，或者重绘。...

浏览器渲染树的形成原理，你真的懂吗？

最新发布

qq_22232065的博客

08-07

1053

浏览器渲染树的形成是一个复杂但有序的过程，涉及到 HTML 解析、DOM 树构建、CSS 解析与 CSSOM 生成、渲染树构建、布局与绘制等多个环节。在这个过程中，JavaScript 和样式变更等因素可能会影响渲染树的形成，导致回流和重绘，进而影响页面性能。为了优化渲染性能，我们需要减少不必要的回流和重绘，比如一次性修改样式、避免频繁操作 DOM 以及合理利用 CSS 的特定属性进行动画效果。

浏览器渲染页面的流程

cao_peilei的博客

07-31

955

浏览器的渲染机制

关于DOM树和CSSOM树在浏览器中的构建过程

weixin_40417903的博客

03-30

1466

关于DOM树和CSSOM树在浏览器中的构建过程DOM树CSSOM功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 DOM树 HTML文档中所有元素都是节点，每个节点又有自己的节点元素，子节点等。 DOM树转换： 1.解析HTML文档

详解浏览器渲染页面的过程

riddle1981的博客

07-30

2520

当浏览器拿到一个网页是如何进行渲染的呢？首先浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此，我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。下面来看浏览器绘制DOM 树的过程：HTML解析器输出的树是由DOM元素和属性节点组成的，它是HTML文档的对象化描述，也是HTML元素与外界（如Javascript）的接口。DOM与标签有着几乎一一对应的关系。可以看到DOM

Dom树 CSS树渲染树(render树) 规则、原理

egegerhn的博客

02-24

4231

前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？首先你要了解浏览器渲染的顺序： 1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 5.页面渲染什么是dom 树？ 浏览器将HTML解析成树形的数据结构，简称DOM。 DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。解析树的根节点是Document对象。

前端面试系列-输入url后全过程&&页面渲染机制&&DOM生成过程

LYFlied的博客

03-27

1590

一、当输入url后，全过程 浏览器缓存 (DNS解析)，解析获取相应的IP地址。 cp连接，三次握手。 浏览器向服务器发送http请求，请求数据包。将数据返回至浏览器 浏览器收到HTTP响应读取页面内容，浏览器渲染，解析html源码生成Dom树、解析css样式、js交互二、页面渲染机制三、DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的内嵌JavaScript 引入 JavaScript 文件引入css文件

浏览器页面渲染机制

萌古大汗的专栏

08-16

182

渲染流程： 1.解析HTML，生成DOM树（DOM） 2.解析CSS，生成CSSOM树（CSSOM） 3.将DOM和CSSOM合并，生成渲染树（Render-Tree） 4.计算渲染树的布局（Layout） 5.将布局渲染到屏幕上（Paint）思考：第三步构建渲染树的时候，渲染引擎需要遍历DOM树节点并从CSSOM树中找到匹配的样式规则，再匹配过程中是通过自上而下还是自下而上的方式呢？关键概念： CSS阻塞渲染 JS阻塞页面重排（Reflow）、触发重排重绘（Repa...

不懂DOM渲染机制,确定能写出优质代码?

分享我所知道的,让你知道的更明白.

03-27

1019

文章目录前言: 为什么要明白浏览器渲染机制一、几种DOM的认识1 DOM是什么2 加载过程二、浏览器渲染流程1.浏览器的请求渲染过程2 回流和重绘,影响页面渲染速率三、高性能Javascript DOM编程1 这里好有一比2 DOM的访问与修改3 一些优化总结前言: 为什么要明白浏览器渲染机制知道浏览器的加载，可以在引用外部样式文件，JS时，可以放在合适的位置,最快加载完毕。明白浏览器如何进行解析,可以在构建DOM结构，组织CSS选择器的时候，以最优的写法，提高浏览器的解析速率。了解浏览器如何进

前端女娲补天 CSS（七）什么是DOM树，什么是CSS树，什么是渲染树

LiXenon的博客

05-29

776

什么是BOM树 DOM是什么？DOM是文档对象模型，是一个树形结构，根节点是Document, 用于存储文档中的节点对象。可以通过DOM访问HTML元素的内容与联系，也可对其进行修改。什么是CSS树 CSS树，又称CSSOM（CSS Object Model）是一个树形的文档结构，以树存储了各个选择器的映射以及相关样式属性，根节点是html。什么是渲染树构造DOM树，CSSOM树的时候也在同步构造渲染树（Render Tree），渲染树由DOM和CSSOM结合而成，通过DOM中的可视节点构造，并同时包

【HTML】深入讲解浏览器渲染原理

小秀的博客

10-22

906

合成线程拿到每个层、每个块的位图后，生成一个个指引（quad）信息。指引信息会识别出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转，缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是 transform 效率高的本质原因。合成线程会把 quad 提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像。reflow的本质就是重新计算layout树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。

DOM和CSSOM的构建会相互影响吗

知之为知之，不知为不知

05-04

572

CSSOM会阻塞渲染，只有当CSSOM构建完毕后才会进入下一个阶段构建渲染树。通常情况下DOM和CSSOM是并行构建的，但是当浏览器遇到一个script标签时，DOM构建将暂停，直至脚本完成执行。但由于JavaScript可以修改CSSOM，所以需要等CSSOM构建完毕后再执行JS。

网页是如何渲染出来的，dom树和css树是如何合并的，浏览器的运行机制是什么，什么是否会造成渲染阻塞？

qq_22930381的博客

09-26

1374

渲染树构建、布局及绘制 浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世...

css树的解析与DOM树的解析相关问题

weixin_43912756的博客

09-07

940

1、html的解析和css解析是同步进行吗？ ans：浏览器会先下载HTML解析页面生成DOM树，遇到css标签就开始下载css并解析，这个过程不会阻塞DOM树构建，最后DOM树和css规则树生成渲染树，html解析完成。 2、css加载会阻塞DOM树的解析和渲染吗？参考：js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗 ans： css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行实际上我理解的DOM树的渲染，就是构建r

JS的加载以及CSSOM树，DOM树，Render Tree

nick_chain的博客

11-05

4769

先让我们看一下这段html代码demo <html> <head> <script src="test1.js"></script> <script src="test2.js"></script> <link href="test1.css" rel="s...

渲染树的形成原理你真的很懂吗？

程序员成长指北

10-28

668

浏览器系列文章说一下为什么写这个系列？原因一：该文章系列不管你是前端开发者，还是后端开发者在面试中经常会被问到一个问题“从浏览器输入url到页面显示经历了哪些？”一个非常常见的问题，看了该系列绝对能惊到面试官，可能就因为这一道面试题就收了你呢！嘿嘿。原因二：自己主要是后端方向，该系列文章也是为了学习记录，方便以后查阅。极客时间李兵老师也开了这个专栏，看后还有几个...