浏览器的渲染机制

最新推荐文章于 2024-06-13 08:39:05 发布
最新推荐文章于 2024-06-13 08:39:05 发布
阅读量145 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012902406/article/details/106376640
版权

1、什么是DOCTYPE

DTD是一系列的语法规则，用来定义XML或XHTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析以及切换浏览器模式。

DOCTYPE是用来声明文档类型和DTD规范的。

DOCTYPE的3种写法：

  • HTML5    <!DOCTYPE  html>
  • HTML4.01  Strict （严格模式，包含所有的HTML元素和属性，不包括展示性和弃用的元素，如font）  和    HTML4.01 Transitional（传统模式，包含所有的HTML元素和属性，包括展示性和弃用的元素，如font）

2、浏览器渲染过程

3、重排reflow，触发条件如下：

  • 增加、删除、修改DOM节点时，会导致reflow和repaint
  • 移动DOM位置或搞CSS3动画
  • 修改CSS样式的时候
  • resize窗口的时候，或是滚动的时候
  • 修改网页的默认字体

4、重绘repaint，触发条件如下：

  • DOM改动
  • CSS改动

5、布局layout

黄哈哈小妹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器渲染机制(面试)
前端职场小白_炜晨科技的博客
09-04 1226
不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。A: 不是的，渲染树不包括 head 和隐藏元素（更少的原因），大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性（更多的原因）当css文件放在中时，虽然css解析也会阻塞后续dom的渲染，但是在解析css的同时也在解析dom，所以等到css解析完毕就会逐步的渲染页面了。A:对于一个HTML文档来说，不管是内联还是外链的css，都会阻碍后续的dom渲染，但是不会阻碍后续dom的解析。
浏览器渲染机制render
2201_75417046的博客
04-13 442
从上图我们可以看出，renderer与DOM元素是相对应的，但并不是一一对应，有些DOM元素没有对应的renderer，而有些DOM元素却对应了好几个renderer，对应多个renderer的情况是普遍存在的，就是为了解决一个renderer描述不清楚如何显示出来的问题，譬如有下拉列表的select元素，我们就需要三个renderer：一个用于显示区域，一个用于下拉列表框，还有一个用于按钮。用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。
浏览器渲染机制
weixin_68266812的博客
02-02 1018
参考 ： 中高级前端面试宝典之浏览器篇_浏览器渲染机制面试-CSDN博客 浏览器渲染机制-CSDN博客 1. 解析HTML：浏览器首先会将HTML代码解析成DOM树，DOM树是由节点和对象组成的树形结构，表示HTML文档的结构和内容。2. 解析CSS：浏览器会将CSS代码解析成CSSOM树，CSSOM树是由样式规则和对象组成的树形结构，表示HTML文档的样式信息。3. 构建渲染树：浏览器会将DOM树和CSSOM树合并成渲染树，渲染树只包含需要显示的节点和样式信息，不包含隐藏的节
简述浏览器渲染机制
牛先森家的博客
03-14 2411
简述浏览器渲染机制简述浏览器渲染机制基本概念浏览器渲染的整个流程浏览器整个流程如上图所示说两个概念，一个是Reflow，另一个是RepaintDOM和CSSOM的具体构建流程 简述浏览器渲染机制 基本概念 DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。 CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。 Render Tree: DOM和CSSOM合并后生成Render Tree Layout: 计算出R
浏览器渲染机制了解吗？
ElvisSu的专栏
07-07 207
【问】浏览器渲染机制了解吗？ 【答】浏览器的渲染过程大概为： 解析html文件，构建dom树，同时下载引用的css文件 解析css文件，构建css树 合并dom树和css树，形成渲染树render tree 布局（layout），根据render tree计算节点位置关系等 绘制（painting），根据节点关系绘制页面 除了以上，还涉及两个重要概念： 回流（reflow）：某元素的变化影响了布局，就需要从根html重新渲染，这个过程叫做reflow 重绘（repaint）：某元素的变化只涉及改变颜色等
浏览器渲染机制、重排、重绘
weixin_51709832的博客
08-24 254
浏览器的渲染机制、重排、重绘。
浏览器渲染机制：重排（Reflow）与重绘（Repaint）以及Vue优化策略
最新发布
JINGWHALE
06-13 1192
本文介绍了浏览器渲染机制，重排、重绘概念，以及何时会发生重排、重绘以及如何避免不必要的重排、重绘，提升性能。另外，介绍了Vue优化重排和重绘机制以及开发者在实际项目中可以采取的优化重排和重绘策略。重排（Reflow）与重绘（Repaint）是浏览器渲染过程中对页面元素进行更新的两个重要步骤，理解它们的工作机制有助于我们进行性能优化。
浏览器渲染原理
m0_55557411的博客
01-21 1209
浏览器渲染原理
浏览器渲染机制面试_彻底搞懂浏览器渲染页面的机制和原理
weixin_35695142的博客
01-12 723
1、一道面试题：从用户在浏览器地址栏输入网址，到看到整个页面，中间发生了哪些事情？答：共有三个阶段： ①http请求阶段 ②http响应阶段 ③浏览器渲染阶段在这里我们先重点讲一下浏览器渲染阶段扫盲：① 进程：Process(开了多个饭店)② 线程：Thread(一个饭店雇佣一个服务员是单线程，雇佣多个服务员是多线程)③ 栈内存：Stack (提供一个环境，运行代码)2、浏览器渲染页面的机制和原...
浏览器渲染机制.png
03-02
浏览器原理
前端新手需知的浏览器渲染机制
01-08
在讨论前端开发时，浏览器渲染机制是构建高性能网页应用的基础。浏览器作为客户端工具，能够将HTML、CSS和JavaScript代码转换为可视化的界面供用户交互。了解浏览器是如何工作的，对于前端开发者来说尤为重要。本文...
Yeharold#Web#09-01.浏览器渲染机制1
07-25
前言接下来的几篇文章，讲一下二面的内容。二面的内容：渲染机制JS 运行机制页面性能错误监控本文接下来讲渲染机制。渲染机制包括的内容：什么是DOCTYPE及作用浏
浏览器缓存机制介绍与缓存策略剖析.pptx
05-27
Base64 格式的图片几乎永远可以被塞进 Memory Cache，这可以视作浏览器为节省渲染开销的“自保行为”。体积不大的 JS、CSS 文件，也有较大地被写入内存的几率。 Disk Cache Disk Cache 是存储在硬盘中的缓存，...
浏览器加载、渲染和解析过程黑箱简析
09-05
在理解浏览器加载、渲染和解析过程时，首先我们要知道这是一个复杂且高度优化的过程，涉及到了多个步骤和机制。浏览器的主要任务是将HTML、CSS和JavaScript等资源转化为用户可见的网页。下面我们将详细探讨这些过程...
window.open()被浏览器拦截问题
u012902406的博客
07-11 5983
一、原因 浏览器为了维护用户安全和体验，在JS中直接使用window.open(url，"_blank")来打开新的链接是会被拦截的，（window.open(url,”_self”)改变当前的窗口是可以生效的），通常项目需要在ajax异步请求完成后来打开新链接，下面提供几种解决方案 二、解决方案 方案一、 创建一个a标签，利用a标签跳转，能解决大多数浏览器兼容问题，但是这种方法写在aja...
vdom（虚拟DOM）
u012902406的博客
06-02 1291
vdom就是用JS模拟DOM结构，DOM变化的对比放在JS层来坐，提高重绘性能 首先先来看下DOM节点body的属性，下图可以看出属性非常大，所以DOM的操作是“昂贵”的，js的运行效率高，我们要尽量减少DOM的操作，项目越复杂，DOM操作影响越严重 如何用JS模拟DOM结构，如下 <ul id='test'> <li class='item'>111</li> </ul> //js模拟 { tag:'ul', ..
函数的继承
u012902406的博客
03-03 903
构造函数的继承 function parent() { this.name = 1 this.play = [3,4] } parent.prototype.say = function () { console.log('say') } function children() { pare...
顶层对象
u012902406的博客
11-22 895
ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，还有另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。   顶层对象的属性 顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。   global ...
浏览器渲染机制详解过程是什么，layout
06-02
浏览器的渲染机制可以分为以下几个步骤： ...以上是浏览器渲染机制的主要流程，其中布局（layout 或 reflow）是整个渲染过程中最耗时的步骤，因此在开发中需要尽可能减少布局的次数，以提高页面的性能表现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值