图层 & 重排 & 重绘
图层
浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点
渲染 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>
图层 & 重排 & 重绘的更多相关文章
- 优化CSS重排重绘与浏览器性能
关于CSS重排和重绘的概念,最近看到不少这方面的文章,觉得挺有用,在制作中考虑浏览器的性能,减少重排能够节省浏览器对其子元素及父类元素的重新渲染:避免过分的重绘也能节省浏览器性能:优化动画,使用3D启 ...
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 高性能JavaScript 重排与重绘
先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的A ...
- 高性能WEB开发:重排与重绘
DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. D ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- css 重排与重绘
css 重绘与重排 我们要知道当浏览器下载完页面的所有资源后,就会开始解析源代码. HTML 会被解析成 DOM Tree,Css 则会被渲染成 CSSOM Tree,最后它们会附加到一起,形成渲染树 ...
- js 重排和重绘
1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构--DOM树和渲染树. DOM树表示页面结构,渲染树表示DOM节点如 ...
- JS学习笔记:(二)回流和重绘
在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...
- CSS重排和重绘
一.什么是重绘Repaint和重排 (回流 reflow) 重绘:当元素的一部分属性发生改变,如外观.背景.颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制 ,使元素呈现新的外观叫做重绘. ...
随机推荐
- Docker:容器的四种网络类型 [十三]
一.None类型 简介:不为容器配置任何网络功能,--net=none 1.创建容器 docker run -it --network none busubox:latest 2.功能测试 [root ...
- sublime中编译的sass如何改变css输出风格?【这里有答案】
由于在网上找了一遍没找到如果在sublime中将sass编译的css转换成为自己喜欢的风格,所以换了一种思路搜索到了答案,这里我将讲述如果更改. 首先sass总共有四种编译风格 (1) nested( ...
- Java IO流操作汇总: inputStream 和 outputStream【转】
我们在进行Android java 开发的时候,经常会遇到各种IO流操作.IO流操作一般分为两类:字符流和字节流.以“Reader”结尾都是字符流,操作的都是字符型的数据:以“Stream”结尾的都是 ...
- 第六节:WebApi的部署方式(自托管)
一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...
- ArcGIS Server 10.0 安装及使用完整攻略
引言 ArcGIS Server 10.0在使用和安装的过程中,需要进行比较全面的学习,才能正确使用.缺乏正确的指引,用户很容易在安装及使用中遇到问题.所以笔者在此总结Server 10.0的安装及使 ...
- [再寄小读者之数学篇](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{ ...
- 《11招玩转网络安全》之第一招:Docker For Docker
玩转黑客那些工具,缺少了虚拟机怎么行,除了用虚拟机虚拟整个系统,Docker也不能缺少,读者只需要知道,Docker只虚拟Linux系统中的某个程序就可以了.本节就来介绍Linux下安装设置Docke ...
- 写博客常用MarkDown语法
目录 前言 1. 制作目录 2. 命令格式: 3. 超链接 4.上标和下标 5.引用 6.分割线 7.给图片添加图注 参考 前言 自己记性不是很好,导致每次写MarkDown文本时总是忘了一些重要 ...
- MVC ModelState.AddModelError使用
cshtml:红色部分为使用方法 PostNextDay是 字段 <div id="postNextDay" class="col-xs-12 col-sm-6 ...
- 2018-2019-1 20189208《Linux内核原理与分析》第九周作业
活动 main函数编译有问题,div 函数和系统中某个函数重名,浮点输出有问题,scanf也有问题 修改如下 scanf_s("%d %d", &a, &b); p ...