美文网首页
浏览器的重绘与重排

浏览器的重绘与重排

作者: 那年点夏 | 来源:发表于2018-04-02 10:52 被阅读0次

什么是浏览器的重排与重绘?

一个页面由两部分组成:
DOM:描述该页面的结构
render:描述DOM节点(nodes)在页面上如何呈现

重绘(repaint):

  • 当DOM元素的属性发生变化(如color)时,浏览器会通知render重新描绘相应的元素,此过程成为重绘。

重排(reflow):

  • 如果该次变化涉及元素布局(如width),浏览器则抛弃原有属性,重新计算并把结果传递给render以重新描绘元素,此过程称为重排。

这两个过程是很 耗费浏览器性能 的,从IE系列和Chrome渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效,而每次对元素的操作都会发生repaints或reflow,因此编写DOM交互时如果不注意就会导致页面性能低下。

页面渲染的过程如下:

页面渲染过程图.png
  • 解析HTML代码并生成一个DOM树。
  • 解析CSS文件,顺序为:浏览器默认样式 -> 自定义样式 ->

如何减少重排?

怎样尽可能的缩短浏览器上页面渲染的时间?

相关文章

  • 前端收藏文章

    优化CSS重排重绘与浏览器性能

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

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

  • web性能优化 - 重排与重绘

    重排与重绘 重排 [重构/回流/reflow]:当DOM变化影响了节点的几何属性,浏览器需要重新计算节点的几何属性...

  • 浏览器的重排-重绘

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

  • 高性能Javascript读书笔记--重排与重绘

    重排与重绘 当浏览器下载完页面中的所有组件(HTML标签、Javascript、CSS、图片)之后就会解析并生成两...

  • 浏览器工作原理

    浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]https://juejin.im/post/...

  • 浏览器页面的重绘和重排

    对于页面,我们经常有CSS对网页进行呈现样式效果,这就涉及到了页面的重绘和重排 重绘(repaints)与重排(r...

  • 浏览器的重绘与重排

    什么是浏览器的重排与重绘? 一个页面由两部分组成:DOM:描述该页面的结构render:描述DOM节点(nodes...

  • 浏览器的重绘与重排

    最近在读《高性能JavaScript》这本书,有些知识点在此记录一下 重排与重绘的概念 当DOM的变化影响了元素的...

  • 浏览器的重排与重绘

    浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——...

网友评论

      本文标题:浏览器的重绘与重排

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