浏览器渲染引擎执行机制--DOM树渲染

最新推荐文章于 2023-07-31 16:48:50 发布
最新推荐文章于 2023-07-31 16:48:50 发布
阅读量393 收藏 3
点赞数
分类专栏： css 文章标签： 经验分享 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46572012/article/details/119583386
版权
本文详细解析了浏览器渲染引擎在处理DOM树渲染时的行为，包括src和href的区别、link和script标签的加载顺序，以及defer和async属性对脚本加载的影响。理解这些机制有助于优化页面加载性能，减少JavaScript对页面渲染的阻塞。建议将脚本放在页面底部，并根据需要使用defer或async属性。
摘要由CSDN通过智能技术生成

src和href的区别？

link标签加载顺序？

script标签加载顺序？

defer和async？

想弄懂以上问题，先来了解一下DOM树渲染原理

DOM文档的加载顺序是由上而下的顺序加载；

1、DOM加载到link标签（css）

css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；

浏览器一边下载HTML网页，一边开始解析；

解析过程中，发现link 标签

浏览器继续往下解析HTML网页，同时并行下载link标签中的css样式

2、DOM加载到script标签(js)

（1）正常非处理网页

由于js文件不会与DOM并行加载，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；

正常的网页加载流程是这样的。

浏览器一边下载HTML网页，一边开始解析

解析过程中，发现script标签

最低0.47元/天 解锁文章
前端学习——DOM树，渲染页面
Wby_Nju的博客
01-27 646
文章目录网络连接过程渲染页面DOM构造布局绘制页面 DOM树是一种数据结构，隶属于“树”。 网络连接过程 参考：《网络是怎样连接的》 向浏览器输入 网址(https://www.baidu.com) 浏览器解析URL，解析出Web服务器名+文件路径 根据DNS服务器查询WEB服务器的IP地址 根据HTTP协议，客户端（对WEB应用来说常是浏览器）生成HTTP请求消息，和服务器之间进行交互。 ...
浏览器-DOM树
natsu-cc的博客
05-19 2943
前言：
前端开发面试题
遇见更好的自己
09-22 2382
HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、 HTML5、CSS3、Flexbox JavaScript： 数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、 DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、E
浏览器渲染原理及流程
weixin_30497527的博客
04-11 293
　　我们可能都知道浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理，有了些心得，在这里跟大家分享一下，这里只讨论渲染引擎最主要的用途——显示应用了CS...
浏览器的渲染过程，DOM 树和渲染树的区别？
Fairy的博客
12-17 3513
HTML 经过解析生成 DOM树； CSS经过解析生成　Style Rules。 二者一结合生成了Render Tree。 通过layout计算出DOM要显示的宽高、位置、颜色。 最后渲染在界面上，用户就看到了 浏览器的渲染过程： 解析 HTML 构建 DOM(DOM 树)，并行请求 css/image/js CSS 文件下载完成，开始构建 CSSOM(CSS 树) CSSOM ...
【CSS 渲染DOM树过程】
qq_53499304的博客
02-15 657
CSS 渲染DOM树基本过程
浏览器渲染执行过程
Decadent゜
06-28 376
在地址栏输入网址时，浏览器到底做了什么 你有没有想过一个问题，当你在浏览器输入一个网站的网址打开一个页面时，浏览器到底做了什么。先看个草图来看一下大致过程，过程可能还可以更细，我主要侧重于浏览器渲染部分。 大概过程就是这样，接下来再来看看里面的一些名词解析 1.DNS解析 当你在输入网址时，浏览器难道你的网址先会在本地查询是否有对应名字的ip地址，如果没有就像DNS服务器发送请求，找到以后将ip地址返回给浏览器。 2.TCP连接 当浏览器拿到ip地址，就会构造一个http报文，其中包含http请求头，请求
浏览器渲染机制
qq_45022698的博客
07-16 3973
浏览器渲染机制浏览器渲染机制。
前端面试系列-输入url后全过程&&页面渲染机制&&DOM生成过程
LYFlied的博客
03-27 1647
一、当输入url后，全过程 浏览器缓存 (DNS解析)，解析获取相应的IP地址。 cp连接，三次握手。 浏览器向服务器发送http请求，请求数据包。 将数据返回至浏览器 浏览器收到HTTP响应 读取页面内容，浏览器渲染，解析html源码 生成Dom树、解析css样式、js交互 二、页面渲染机制 三、DOM 1.什么是 DOM 2.DOM 树如何生成 HTML 解析器 3.JavaScript 是如何影响 DOM 生成的 内嵌JavaScript 引入 JavaScript 文件 引入css文件
浏览器渲染引擎
热门推荐
拎着蜗牛跑的壳儿
12-07 1万+
浏览器渲染引擎 主要模块 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块 HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。 CSS解析器：级联样式表的解析器，它的作用是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施 Javascript引擎：使用Javascript代码可以修改网页的内容...
浏览器渲染原理——渲染树构建之渲染树和DOM树的关系
CaseyWei
02-17 1848
 在DOM树构建的同时，浏览器会构建渲染树（render tree）。渲染树的节点（渲染器），在Gecko中称为frame，而在webkit中称为renderer。渲染器是在文档解析和创建DOM节点后创建的，会计算DOM节点的样式信息。        在webkit中，renderer是由DOM节点调用attach()方法创建的。attach()方法计算了DOM节点的样式信息。attach()是...
深入理解 WKWebView (渲染篇) —— DOM 树的构建
lihui49的博客
03-22 7181
当客户端 App 主进程创建 WKWebView 对象时，会创建另外两个子进程:渲染进程与网络进程。主进程 WKWebView 发起请求时，先将请求转发给渲染进程，渲染进程再转发给网络进程，网络进程请求服务器。如果请求的是一个网页，网络进程会将服务器的响应数据 HTML 文件字符流吐给渲染进程。渲染进程拿到 HTML 文件字符流，首先要进行解析，将 HTML 文件字符流转换成 DOM 树，然后在 DOM 树的基础上，进行渲染操作，也就是布局、绘制。最后渲染进程通知主进程
浏览器的渲染过程，DOM 树和渲染树的区别
Qiemo_的博客
05-17 571
1、浏览器的渲染过程： 解析 HTML 构建 DOM(DOM 树),并行请求 css/image/js CSS 文件下载完成,开始构建CSSOM(CSS 树) CSSOM 构建结束后,和 DOM 一起生成 Render Tree(渲染树) 布局(Layout)：计算出每个节点在屏幕中的位置 显示(Painting)：通过显卡把页面画到屏幕上 2、DOM 树和渲染树的区别 DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素 渲染树不包括 head 和隐藏元素,大段文本的每一个行都是
面试题15：Dom树 CSS树 渲染树(render树) 规则、原理
qq_51066068的博客
04-23 2426
面试官：请说一下Dom树 CSS树 渲染树(render树) 规则、原理 答： 首先你要了解浏览器渲染的顺序：   1.构建dom 树   2.构建css 树   3.构建渲染树   4.节点布局  5.页面渲染 其实DOM节点可以分为可视化节点和非可视化节点， 像 div、p 等这种结构性的标签节点可被称为可视化节点， 而 script、meta 等这种在页面上显示不出来的节点则被称为非可视化节点； 那渲染树(render树)是什么呢？ 浏览器是如何渲染 UI 的？ （...
DOM的渲染与优化
最新发布
Iforencos的博客
07-31 779
JS负责执行脚本，是单线程执行；由于脚本会对DOM进行修改，假如一个线程添加DOM，一个线程删除DOM。负责页面的解析与渲染；GUI线程和JS引擎线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起,GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。
主流浏览器的javascript引擎和DOM实现
03-31 277
<style type="text/css"> <!-- @page {margin:2cm} p {margin-bottom:0.21cm} --> </style> 各种主流浏览器的javascript引擎和DOM实现： <style type="text/css"> <!-- @page {margin:2
DOM--页面渲染流程
qq_56607109的博客
09-02 446
③dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但有区别，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。⑤ 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
描述浏览器的渲染过程，DOM树和渲染树的区别
路人贾！
07-16 283
描述浏览器的渲染过程，DOM树和渲染树的区别
dom渲染在_DOM渲染原理
weixin_32396347的博客
01-11 329
浏览器渲染过程解析HTML，构建DOM树（这里遇到外链，此时会发起请求）解析CSS，生成CSS规则树合并DOM树和CSS规则，生成render树布局render树（Layout/reflow），负责各元素尺寸、位置的计算绘制render树（paint），绘制页面像素信息浏览器会将各层的信息发送给GPU，GPU将各层合成（composite），显示在屏幕上1. 构建DOM树<html> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值