前端学习——DOM树，渲染页面

最新推荐文章于 2024-05-21 09:00:12 发布
最新推荐文章于 2024-05-21 09:00:12 发布
阅读量629 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wby_Nju/article/details/104091581
版权
本文探讨了前端开发中的网络连接过程，重点在于渲染页面的三个关键步骤：DOM构造，通过HTML解析器构建DOM树；CSS解析，结合样式表规则形成带有样式的DOM树；布局和绘制，将节点按顺序压入文档流并呈现可视化的网页。
摘要由CSDN通过智能技术生成

文章目录


DOM树是一种数据结构，隶属于“树”。

网络连接过程

参考：《网络是怎样连接的》

  • 向浏览器输入 网址(https://www.baidu.com)
    在这里插入图片描述
  • 浏览器解析URL，解析出Web服务器名+文件路径
    在这里插入图片描述
  • 根据DNS服务器查询WEB服务器的IP地址
  • 根据HTTP协议，客户端（对WEB应用来说常是浏览器）生成HTTP请求消息，和服务器之间进行交互。
    在这里插入图片描述
  • 获得返回信息
    在这里插入图片描述

最低0.47元/天 解锁文章
Wby_Nju
关注
专栏目录
浏览器渲染引擎执行机制--DOM树渲染
小小鲸鱼的后花园
08-11 380
浏览器渲染
Dom树 CSS树 渲染树(render树) 规则、原理
egegerhn的博客
02-24 4255
前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？ 首先你要了解浏览器渲染的顺序： 1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 5.页面渲染 什么是dom 树？ 浏览器将HTML解析成树形的数据结构，简称DOM。 DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。
前端-DOM树
汪汪汪汪
02-28 258
dom树描述网页元素关系的一个专有名词，如html内包含了head、body，而head内包含meta、title、script等，body内包含div等元素；属性节点：所有的属性（href、content、标签内的属性、自定义属性）元素节点：所有的标签（div、p、span等）里面，网页内容以树状形式排列，所以称之为。文本节点：所有的文本（标签内部的内容）注释节点：所有的注释。
前端面试之DOM树
十九万里的博客
04-27 608
二、DOM树 什么是DOM 文档对象类型，是 W3C 组织推荐的处理可扩展标记语言的标准编程接口 通过这些 DOM 接口可以改变网页的内容、结构和样式 深层理解：从网络传给渲染引擎的HTML文件字节流无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。DOM 提供了对 HTML 文档结构化的表述 DOM分类 核心DOM：是用于XML与HTML的共用接口； XMLDOM：XML专用接口； HTML DOM：HTML专用接口； DOM事件模型：定义DOM能够响应的事件；
前端学习周记（4）——浅谈渲染DOM
Karen_Yu_的博客
06-03 1648
看了书，发现自己能看懂一部分，但是自己不会实现啊……然后又投入到B站的学习中，解锁新技能——在B站学react……这周想先谈谈DOM，如果时间允许会再多写一点。首先，还是解决第一个问题，什么是DOM，为什么要谈谈DOM呢？↑这是百度百科的解释，当然，这不是我们要谈及的（显然是看不懂百度百科的托词，勿怪勿怪）所谓模型呢，就像一种结构，一种规定，这样类似的东西。想必大家对刚刚看到react的时候要下载...
传统的DOM是如何渲染的?
lijinxiaoking的博客
07-15 138
a.纯后端渲染: 页面发送请求，后端服务器中将数据拼成完整DOM树，并转换成一个字节流作为HTTP Response的body返回给浏览器。优点在于返回的HTTP Response是包含着全部页面内容，可以让用户更加快捷的看到页面的主体部分。也方便了网站的seo（搜索引擎优化）。 b.纯前端渲染 能够分离表现层和数据层，js代码负责交互展现，后端以API（应用程序接口）形式提供纯粹的数据。优点是交...
渲染篇 3：对症下药——DOM 优化原理与基本实践(1).md
04-01
在JavaScript中，DOM操作涉及到对象属性的读取和设置，而浏览器需要在JavaScript引擎和渲染引擎之间进行多次消息传递，每一次传递都会消耗一定的时间和资源，因此频繁的DOM操作会导致页面性能下降。 #### 2. 减少...
【前端热门框架【vue框架】】——条件渲染和列表渲染的学习的秒杀方式.txt
04-30
条件渲染和列表渲染是Vue.js中非常重要的两个概念，它们能够帮助开发者根据不同的数据状态动态地更新页面内容，从而实现更为灵活且高效的用户界面设计。 #### 二、条件渲染 ##### 2.1 定义 条件渲染允许我们在DOM...
【CSS 渲染DOM树过程】
qq_53499304的博客
02-15 649
CSS 渲染DOM树基本过程
DOM——页面的渲染、style属性操作、预加载与懒加载、防抖与节流
qq_56668869的博客
07-22 769
页面的渲染、style属性操作、预加载与懒加载、防抖与节流
网站DOM树「Site DOM Tree」-crx插件
03-10
快速分析网站的DOM树 使用Highcharts.js在图表中快速预览任何网站的DOM树。 还显示节点元素的数量和每个元素的深度。 支持语言:English (United States)
遍历DOM 树、函数记忆及样式前端笔试题
zaoxi6240的博客
12-27 330
写一个traverse函数，输出所有页面宽度和高度大于50像素的节点。 function traverse(){             return Array.prototype.filter.call(document.querySelectorAll('body *'), function(node){                 return node.offsetWidth &g...
学习前端第四十天（DOM树，遍历DOM，搜索）
最新发布
xggfdf的博客
05-21 709
/ 表格// 表格元素表格对象的行表格行的单元格// tr.sectionRowIndex —— 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）// tr.rowIndex —— 在整个表格中 <tr> 的编号（包括表格的所有行）// 0// 4// td.cellIndex —— 在封闭的 <tr> 中单元格的编号。// 1。
浏览器的渲染过程，DOM 树和渲染树的区别
小田田的blog
09-20 1257
浏览器的渲染过程： 解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js CSS 文件下载完成，开始构建 CSSOM(CSS 树) CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树) 布局(Layout)：计算出每个节点在屏幕中的位置 显示(Painting)：通过显卡把页面画到屏幕上 DOM 树 和 渲染树 的区别： DOM 树与...
HTML-DOM树篇
muzili_henji的博客
07-28 4715
一、什么是DOM DOM（Document Object Model） 文档对象模型，是HTML和XML文档的编程接口 DOM 以树结构表达 HTML 文档，树的每个分支的终点都是一个节点，每个节点都包含着对象 DOM 将web页面与脚本或编程语言链接起来，可以通过DOM提供的方法改变节点的结构、样式或者内容。 二、为什么要介绍DOM树？ DOM树是浏览器标记内部的表示，浏览器接收到网络数据后的第一步就是 处理HTML标记并构建DOM树。 三、DOM树的构建 DOM树是一种有限层次的..
Dom（一）文档树
Oliver尹的博客
08-12 516
DOM，全称Document Object Model -处理操作文档的编程接口 -允许程序或脚本动态的处理和修改文档的内容，结构和样式 DOM规范 主要包括，Events（事件），Nodes（节点），Ranges（范围操作），Traversal（遍历），Sets（节点集合） 节点关系 父子节点 partentNode firstChild lastChild childNode...
浏览器-DOM树
natsu-cc的博客
05-19 2913
前言：
HTML DOM 树的概念详解
suliuzhen的博客
04-18 385
HTML DOM 树的概念详解：DOM（Document Object Model）是万维网联盟订立的标准，其被分为核心DOM、XML DOM、和HTML DOM三个部分，分别定义了任何结构化文档的标准模型、XML文档的标准模型和HTML文档的标准模型。其中，HTML DOM结构化地整合了HTML中所有元素的对象和属性，方便程序和脚本获取、修改、添加和删除其中的元素。在浏览器对网页HTML的渲染过程中，DOM会被进一步加工为DOM树的形式。
DOM（一）概述、dom树、查找元素
热门推荐
商务合作 | 共同学习 | 携手共进
09-20 2万+
JavaScript DOM：DOM概述、查找元素4种方式、购物车案例。
移动页面性能优化策略与实践
"移动前端系列——移动页面性能优化" 随着移动互联网的飞速发展，移动页面的性能优化成为了不可或缺的一部分。优化移动页面的原因在于，复杂的页面设计和特效导致文件增大，进而影响加载速度和用户体验。据统计，大...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值