css 重排与重绘
时间:2020-04-01
本文章向大家介绍css 重排与重绘,主要包括css 重排与重绘使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
css 重绘与重排
我们要知道当浏览器下载完页面的所有资源后,就会开始解析源代码。
HTML 会被解析成 DOM Tree,Css 则会被渲染成 CSSOM Tree,最后它们会附加到一起,形成渲染树(Render Tree)。当渲染树构建完成时,就会开始绘制页面元素。
这时如果 DOM 发生更改或者元素的 css 几何属性发生变化,比如 width,height,position 定位等。那么就会引发一次浏览器的重排/重绘过程,也就是浏览器会重新计算元素的几何属性,并重新构造渲染树,这个过程叫做重排,完成重排后,要将重新构建的渲染树渲染到屏幕上,这个过程就是“重绘”。
而如果是 css 的非几何属性更改,则只会引起重绘。所以说重排一定会引起重绘,而重绘不一定会引起重排。
重排
既然重排的原理是根据因为几何属性发生了改变,那么我们就能够总结一下引起重排的操作:
1、页面首次渲染
2、添加或删除 Dom 的显示与隐藏
3、元素相对于文档的定位改变
4、元素的大小尺寸改变
5、添加行内 style 样式
6、浏览器窗口大小发生改变时
重绘
重绘相对来说就简单点了,比如颜色改变,背景图片改变,阴影改变等,只要不影响元素本身相对于浏览器文档的位置只会触发重绘。
性能优化
操作 DOM 的成本是非常高的,而且如果不小心改掉元素的几何属性,就会触发重排和重绘,这时就会影响用户体验。我们来看一个简单的例子:
var box = document.getElementById('box'); // 获取页面一个子元素
box.margin = "15px"; // 重排+重绘
box.border = "1px solid red"; // 又是一次重排+重绘
box.backgroundColor = "red"; // 没有尺寸变化,只重绘
box.fontSize = "16px"; // 重排+重绘
// 新的DOM节点 - 重排+重绘
document.body.appendChild(document.createTextNode('!!!!'));
只改当前页面中的子节点,可能影响不是很明显,如果修改的节点多了或者修改了页面的顶级节点属性,那么就会推动整个页面的变化,代码是十分昂贵的。
因此,从性能优化角度,我们可以从以下几个方面着手:
1) 浏览器本身的优化策略
浏览器会维护一个队列,将所有引起重排和重绘的操作都放在这个队列里,当操作达到一定的数量或者时间间隔时,浏览器会批量执行来优化重排过程。这样可以让多次的重排重绘,变成一次。但是有的特殊 style 属性会使这种优化失效,例如offsetTop,scrollTop,clientTop等属性,这些属性都是要实时返回给用户的几何属性或者布局属性,因此浏览器需要立即执行,触发重排返回正确的值。
2) 最小化重排和重绘
避免设置大量的 style 行内样式。修改单个 DOM 节点的多条语句合并成一个语句来执行。
DOM 元素的动画属性最好设置为 absolute 或者 fixed 定位。
3) css 动画和性能处理
减少 js 操作元素的样式,使用修改 class 类名方式修改样式。
开启动画的 GPU 加速,渲染计算交给 GPU 处理。
避免频繁计算样式,可以缓存变量,并且在变量中工作。
可以使用 querySelectorAll() 获取的静态集合替代 getElementByXX() 获取的动态集合。
小结
虽然篇幅不长,但是感谢你看完了这篇文章,最后我来总结一下几个点:
- 重排一定会引起重绘,而重绘不一定会引起重排。
- 会引起重排和重绘的条件
- 怎样进行性能优化(减少 DOM 操作、高性能 API 的使用、开启硬件加速、减少 DOM 操作等)
- 浏览器本身的优化策略
原文地址:https://www.cnblogs.com/earthZhang/p/12613939.html
- linux下的缓存机制及清理buffer/cache/swap的方法梳理
- 分组合计且排序和显示名称
- silverlight动态读取txt文件/解析json数据/调用wcf示例
- Junit加载Spring容器作单元测试_添加事务回滚
- 实现三遍决策树,你就会想出更快的算法!
- 将一段复杂文本变成字符串的赋值语句
- Linux下squid代理缓存服务环境部署
- linux下清除Squid缓存的方法记录
- memcached缓存知识简单梳理
- Idea 常用快捷键
- silverlight中如何方便在多个"场景"即Xaml文件之间随意切换?
- 电子签名实现的思路、困难及解决方案
- JavaScript排序算法详解
- 事件处理需小心
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 如何用命令行给mySQL添加用户
- [877]ModuleNotFoundError:no module named ‘tools.nnwrap‘ 解决办法
- Selenium自动化:代码测试与无代码测试
- 个人独立博客搭建教程(win),如何快速搭建博客
- dotnet OpenXML 解压缩文档为文件夹工具
- webpack实战——预处理器(loader)【上篇】
- Mac安装git,brew出现的问题
- dotnet OpenXML 简单聊聊 PPT 文本解析
- R语言作图——Ridgeline plot(山脊图)
- dotnet OpenXML 的 spcPct 和 spcPts 表示距离的不同
- 深入剖析.NETCORE中CORS(跨站资源共享)
- 网络安全实验室平台(基础关)
- Unity 基于excel2json批处理读取Excel表并反序列化
- dotnet OpenXML 文本 Text Line Break 的作用
- CVE-2020-1362 漏洞分析