zoukankan      html  css  js  c++  java
  • 页面重绘(repaint)和回流(reflow)

    前言

    页面显示到浏览器上的过程:

    1.1、生成一个DOM树。

    浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点。

    1.2、生成样式结构体。

    浏览器将所有样式解析成样式结构体,解析过程中会去掉浏览器不能识别的。

    2、DOM树和样式结构体结合生成render树。

    render树类似于DOM树,render树每个节点有自己样式(盒子模型,margin、border、padding、content),但不包含display:none和head节点,却包含visibility:hidden节点。

    3、浏览器根据render树渲染页面。

    重绘(repaint)和回流(reflow)

    回流:当render tree中的一部分(或全部)因为元素的尺寸,布局,隐藏等改变而需要重新构建,就是回流。回流后会进行重绘。

    重绘:当只是元素的外观,风格变化,不影响布局的,重新渲染的过程就叫重绘。

    PS:这样重绘的代价会比回流小。

    什么时候出现回流?

    1、页面渲染初始化

    2、添加、删除可见的DOM元素

    3、元素尺寸、位置变化

    4、窗口resize

    浏览器对回流、重绘优化

    浏览器都会优化重绘和回流的操作。浏览器会把所有会引起回流、重绘的操作放入1个队列中,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

    另外,当我们取一些属性值时,类似offsetWidth、clientWidth、width等,会导致浏览器提前flush队列,只为了取到正确的值,即便是队列里的操作不影响所取的值。

    减少回流、重绘

    1、修改样式和添加DOM元素时,批量处理。

    2、取offsetWidth等属性值,缓存到变量,少去取值。

    3、将元素脱离文档流。

    PS:第3点我并未查找到相关证据,持保留态度。

    对前端的技术,全栈技术感兴趣的同学关注我的头条号,并在后台私信发送关键字:“前端”即可获取免费的全栈开发工程师学习资料

    知识体系已整理好,欢迎免费领取。还有视频分享可以免费获取。关注我,可以获得没有的经验哦!

  • 相关阅读:
    float浮动后,父级元素高度塌陷和遮盖问题
    Json
    测试连接数据库是否成功
    spark standalone zookeeper HA部署方式
    用NAN简化Google V8 JS引擎的扩展
    在Android上使用Google V8 JS 引擎
    数据可视化工具zeppelin安装
    kafka0.8.2以下版本删除topic
    kafka迁移数据目录
    scala2.10.x case classes cannot have more than 22 parameters
  • 原文地址:https://www.cnblogs.com/guchengnan/p/9892613.html
Copyright © 2011-2022 走看看