美文网首页
浏览器渲染机制触发重排和重绘

浏览器渲染机制触发重排和重绘

作者: 前端_酒館 | 来源:发表于2021-05-26 09:27 被阅读0次

什么是Doctype及作用?

  • DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式;
  • DOCTYPE是用来声明文档类型和DTD规范的,一个主要的用途便是文件的合法性验证。如果文件代码不合法,那么浏览器解析时便会出一些差错;
  • HTML4.01 有个严格模式和传统模式。

浏览器渲染过程?

  1. 构建DOM树(DOM tree):从上到下解析HTML文档生成DOM节点树(DOM tree),也叫内容树(content tree);
  2. 构建CSSOM(CSS Object Model)树:加载解析样式生成CSSOM树;
  3. 执行JavaScript:加载并执行JavaScript代码(包括内联代码或外联JavaScript文件);
  4. 构建渲染树(render tree):根据DOM树和CSSOM树,生成渲染树(render tree);
    渲染树:按顺序展示在屏幕上的一系列矩形,这些矩形带有字体,颜色和尺寸等视觉属性。
  5. 布局(layout):根据渲染树将节点树的每一个节点布局在屏幕上的正确位置;
  6. 绘制(painting):遍历渲染树绘制所有节点,为每一个节点适用对应的样式,这一过程是通过UI后端模块完成;

重排Reflow: DOM 结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。

  • 触发Reflow?

当你增加、删除、修改DOM节点时,会导致reflow或Repaint
当你移动DOM的位置,或是搞个动画的时候
当你修改css样式的时候
当你Resize窗口的时候(移动端没有这个问题),或是滚动的时候
放你修改网页的默认字体时

重绘Repaint: 当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自特性绘制一遍,于是页面的内容出现了,这个过程称之为Repaint。

  • 触发Repaint?

DOM和css改动

  • 如何避免Reflow或Repaint?
  1. 先将元素从document中删除,完成修改后再把元素放回原来的位置;
  2. 将元素的display设置为”none”,完成修改后再把display修改为原来的值 ;
  3. 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入document;
  4. 尽可能少的修改元素style上的属性;
  5. 尽量通过修改className来修改样式;
  6. 通过cssText属性来设置样式值;

如果此文对你有用请动动你的小手点个赞!谢谢!!!

相关文章

  • 浏览器渲染机制触发重排和重绘

    什么是Doctype及作用? DTD(document type definition,文档类型定义)是一系列的语...

  • 浏览器重排(回流)重绘以及优化方案

    一、什么是重排和重绘 要说清重排(reflow)和重绘(repaint),首先要理解排列和绘制,浏览器渲染页面时,...

  • 2017前端面试题之综合篇(1)

    1 . 浏览器如何渲染? 浏览器的渲染原理简介 专题:浏览器:渲染重绘、重排两三事 浏览器加载和渲染HTML的顺序...

  • 22,重绘、回流

    1,浏览器渲染机制 2,重绘 3,回流 > 重绘。 4,浏览器优化 5,减少重绘和回流

  • 如何理解重排和重绘?

    重排和重绘是浏览器关键渲染路径上的两个节点, 浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树,然后根...

  • 浏览器渲染机制、重绘、重排

    网页生成的过程 HTML解析器会将html解析成DOM树 CSS解析器会将css解析成CSSOM树 结合DOM树和...

  • 浏览器的重排-重绘

    重排(重构/回流/reflow) 重绘(repaint/redraw) 一、浏览器运行机制 浏览器加载完ht...

  • 重绘和重排性能优化

    重绘和重排 1.1 DOM树和渲染树 浏览器下载完页面中的所有组件、HTML标记,javascript,css图片...

  • 浏览器渲染机制

    什么是doctype及作用浏览器渲染过程重排 reflow重绘 repaint布局 layout 什么是docty...

  • 什么是重排和重绘?

    重排和重绘的概念: 重排:部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排,注意这里...

网友评论

      本文标题:浏览器渲染机制触发重排和重绘

      本文链接:https://www.haomeiwen.com/subject/fiewjltx.html