图层

浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点

渲染 DOM 时 浏览器所做的：

  • 获取 DOM 后分割为多个图层
  • 对每个图层的节点计算样式结果 （Recalculate style--样式重计算）
  • 为每个节点生成图形和位置 （Layout--重排,回流）
  • 将每个节点绘制填充到图层位图中 （Paint--重绘）
  • 图层作为纹理上传至 GPU
  • 符合多个图层到页面上生成最终屏幕图像 （Composite Layers--图层重组）

图层创建条件

Chrome 中满足 以下任意情况 就会创建图层：

拥有 3D 变换的 css 属性 transform

加速视频解码的 <video> 节点

<canvas> 且浏览器硬件加速

css3 动画节点 animation

拥有 css 加速属性的元素 (will-change: transform; 记得取消为 auto )

重绘（Repaint）

指的是 一个元素外观的改变 而触发的浏览器行为

例如改变 outline、背景色等属性。浏览器会根据元素的新属性重新绘制

浏览器会根据元素的新属性对元素进行重新绘制，使元素呈现新的外观

重绘 不会伴随 重排，但是 重排 一定会 重绘

以图层为单位，如果图层中某个元素需要重绘，那么整个图层都需要重绘

重排（Reflow）

渲染对象 在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值，称之为 重排

resize 时、修改网页默认字体时，操作 DOM 节点时，修改 css 样式时

获取某些属性时（width、height... ...）

优化方案：

减少 计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）

减少 为每个节点生成图形和位置（Layout--回流和重布局）

减少 将每个节点填充到图层中（Paint Setup和Paint--重绘）

减少 组合图层到页面上（Composite Layers--图层重组）

元素位置的改变 使用 transform

使用 opacity + will-change: transform; 代替 visibility        单独使用 opacity 会重排、重绘; 结合图层后只会发生重绘

不使用  table 布局

将多次 css 操作，集合成一次 css 操作

多使用 class 修改样式

使用 display: none; 离线 DOM 元素，在一顿 css 操作以后，再 display: block 显示;

(vue 底层就是使用 documentFragment 来优化的)使用文档碎片 documentFragment

不要把某些 DOM 节点的属性 在循环里作为变量使用

给要动的元素，单独开一个图层

总结：

Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法

一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。

在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。

requestAnimationFrame

  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>requestAnimationFrame</title>

        <style rel="stylesheet" type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            a {
    
                text-decoration: none;
    
                color: green;
    
            }

            #test_box {
    
                width: 100px;
    
                height: 100px;
    
                background-color: red;
    
            }
    
        <style/>
    
    </head>

    <body>

        <div id="test_box" class="clearfix"></div>

        <!-- javascript 代码 -->
    
        <script type="text/javascript" src="./js/index.js">
    
            window.addEventListener("DOMContentLoaded", function(){
    
                var testBox = document.getElementById("test_box");

                /**** requestAnimationFrame ****/
    
                var element = testBox;
    
                element.style.position = 'absolute';

                var start = null;
    
                var offset = 0;
    
                var speed = 5;
    
                function step(timestamp) {
    
                    if (!start){
    
                        start = timestamp;
    
                    };
    
                    var progress = (timestamp - start)/speed;
    
                    endPos = 500;

                    // 元素不断向左移，最大不超过200像素
    
                    offset = progress;
    
                    if(parseInt(progress/endPos)%2 == 0){
    
                        offset = progress%endPos;
    
                    }else{
    
                        offset = endPos - progress%endPos;
    
                    };

                    element.style.left = offset%endPos + 'px';

                    // 如果距离第一次执行不超过 2000 毫秒，
    
                    // 就继续执行动画
    
                    //if (progress < 2000) {
    
                        window.requestAnimationFrame(step);
    
                    //};
    
                };

                window.requestAnimationFrame(step);
    
            }, false);
    
        </script>
    
    </body>
    
</html>

图层 & 重排 & 重绘的更多相关文章

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

    关于CSS重排和重绘的概念,最近看到不少这方面的文章,觉得挺有用,在制作中考虑浏览器的性能,减少重排能够节省浏览器对其子元素及父类元素的重新渲染:避免过分的重绘也能节省浏览器性能:优化动画,使用3D启 ...

  2. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  3. 高性能JavaScript 重排与重绘

    先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的A ...

  4. 高性能WEB开发：重排与重绘

    DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. D ...

  5. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  6. css 重排与重绘

    css 重绘与重排 我们要知道当浏览器下载完页面的所有资源后,就会开始解析源代码. HTML 会被解析成 DOM Tree,Css 则会被渲染成 CSSOM Tree,最后它们会附加到一起,形成渲染树 ...

  7. js 重排和重绘

    1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如 ...

  8. JS学习笔记：（二）回流和重绘

    在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...

  9. CSS重排和重绘

    一.什么是重绘Repaint和重排 (回流 reflow) 重绘:当元素的一部分属性发生改变,如外观.背景.颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制 ,使元素呈现新的外观叫做重绘. ...

随机推荐

  1. Docker：容器的四种网络类型 [十三]

    一.None类型 简介:不为容器配置任何网络功能,--net=none 1.创建容器 docker run -it --network none busubox:latest 2.功能测试 [root ...

  2. sublime中编译的sass如何改变css输出风格？【这里有答案】

    由于在网上找了一遍没找到如果在sublime中将sass编译的css转换成为自己喜欢的风格,所以换了一种思路搜索到了答案,这里我将讲述如果更改. 首先sass总共有四种编译风格 (1) nested( ...

  3. Java IO流操作汇总： inputStream 和 outputStream【转】

    我们在进行Android java 开发的时候,经常会遇到各种IO流操作.IO流操作一般分为两类:字符流和字节流.以“Reader”结尾都是字符流,操作的都是字符型的数据:以“Stream”结尾的都是 ...

  4. 第六节：WebApi的部署方式(自托管)

    一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...

  5. ArcGIS Server 10.0 安装及使用完整攻略

    引言 ArcGIS Server 10.0在使用和安装的过程中,需要进行比较全面的学习,才能正确使用.缺乏正确的指引,用户很容易在安装及使用中遇到问题.所以笔者在此总结Server 10.0的安装及使 ...

  6. [再寄小读者之数学篇](2014-10-18 利用 Lagrange 中值定理求极限)

    试求 $$\bex \vlm{n}n^2\sex{x^\frac{1}{n}-x^\frac{1}{n+1}},\quad x>0. \eex$$ 解答: $$\beex \bea \mbox{ ...

  7. 《11招玩转网络安全》之第一招：Docker For Docker

    玩转黑客那些工具,缺少了虚拟机怎么行,除了用虚拟机虚拟整个系统,Docker也不能缺少,读者只需要知道,Docker只虚拟Linux系统中的某个程序就可以了.本节就来介绍Linux下安装设置Docke ...

  8. 写博客常用MarkDown语法

    目录 前言 1. 制作目录 2. 命令格式: 3. 超链接 4.上标和下标 5.引用 6.分割线 7.给图片添加图注 参考 前言 ​ 自己记性不是很好,导致每次写MarkDown文本时总是忘了一些重要 ...

  9. MVC ModelState.AddModelError使用

    cshtml:红色部分为使用方法  PostNextDay是 字段 <div id="postNextDay" class="col-xs-12 col-sm-6 ...

  10. 2018-2019-1 20189208《Linux内核原理与分析》第九周作业

    活动 main函数编译有问题,div 函数和系统中某个函数重名,浮点输出有问题,scanf也有问题 修改如下 scanf_s("%d %d", &a, &b); p ...