zoukankan      html  css  js  c++  java
  • 前端性能优化--避免重绘和回流的两种方法

    重绘概念:当render tree 中的一些元素需要更新属性,而这些属性只是影响外观,风格不会影响布局的,比如说background-color。则就叫重绘。

    触发页面重布局的属性

    1、盒子模型相关属性

    2、定位属性及浮动

    3、改变节点内部文字结构

    ①. width , height , padding , margin , display , border-width , border , min-height

    ②. top , bottom , left , right ,position , float , clear

    ③. text-align , overflow-y , font-weight , overflow , font-family, line-height , vertival-vlign , white-space , font-size

    只会触发重绘的属性

    color , border-style , visibility ,text-decoration , background , background-image , background-position , background-repeat , background-size , outline-color , outline , outline -style , outline-width , box-shadow

    新建DOM的过程

    1、获取DOM后分割为过个图层

    2、对每个图层的节点计算样式结果(Recalculate style -- 样式重计算)

    3、为每个节点绘制填充到图层位图中( Paint Setup 和Paint -- 重绘)

    4、为每个节点生成图形和位置 (Layout--回流和重布局)

    5、图层作为纹理上传GPU

    6、符合多个图层到页面上生成最终的屏幕图像*(Composite Layers - 图层重组)

  • 相关阅读:
    通过w3c方式 读取xml内容
    ssm项目 maven 项目pon.xml 配置
    myeclipse 2014新建maven web 项目步骤
    Maven学习
    常用正则学习
    Maven 那点事儿
    Chrome 里的请求报错 " Provisional headers are shown"
    php框架thinkphp3.2.3 配置文件bug
    $_GET $_POST $_REQUEST
    php检测函数
  • 原文地址:https://www.cnblogs.com/chen-cheng/p/10694550.html
Copyright © 2011-2022 走看看