reflow和repaint理解总结
repaint就是重绘，reflow就是回流
严重性：
在性能优先的前提下，reflow的性能消耗要比repaint的大。
体现：
repaint是某个dom元素进行重绘，reflow是整个页面进行重排，也就是对页面所有的dom元素渲染。
如何触发reflow和repaint
repaint的触发：
1）不涉及任何dom元素的排版问题的变动为repaint，例如元素的color、text-align等改变。
2）color的修改，text-align的修改，a：hover也会造成重绘，伪类引起的颜色等变化不会导致页面的回流，仅仅会触发重绘。
reflow的触发：
1）width、height、border、margin、padding的修改
2）通过hover造成元素表现的改动，如display:none会导致回流
3）appendChild等dom元素操作。
4）font类style 的修改。
5)background的修改，现在经过浏览器厂家的优化，部分background的修改只会触发repaint。
如何尽量避免回流reflow：
a、尽可能在dom末稍通过修改class来修改元素的style属性，尽可能减少受影响的dom元素。
b、避免设置多项内联样式，使用常用的class方式进行设置样式，以避免设置样式时访问dom的低效率。
c、设置动画元素position属性为fixed或absolute：由于当前元素从dom流中独立出来，因此受影响的只有当前元素。
d、牺牲平滑度满足性能：动画精度太强，会造成更多的repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。
f、避免使用table进行布局，table每个元素的大小以及内容的改变，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以针对性的repaint和避免不必要的reflow。
g、避免在css中使用运算式
reflow和repaint理解总结相关推荐
- 简述reflow和repaint
一般,在页面开发时,不可避免地会发生repaint和reflow,除非是静态页面.从字面上理解repaint,它表示"重绘",而reflow则是"回流".他们的 ...
- reflow 和 repaint
浏览器解析基本流程 浏览器解析的基本流程 reflow和repaint reflow,浏览器根据各种样式来计算并根据计算结果将元素放到确定的地方. repaint: relfow完成之后,浏览器把这些 ...
- [css] 会引起Reflow和Repaint的操作有哪些？
[css] 会引起Reflow和Repaint的操作有哪些? 页面布局和几何信息(比如:增加删除dom,改变元素位置或者尺寸等)发生改变时,会触发Reflow. 给dom节点添加样式,会触发Repai ...
- reflow和repaint
简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...
- reflow与repaint
重流和重绘 重流就是页面的布局发生了彻彻底底的改变,元素位置或者宽高发生了变化,整个页面需要重新布局,这个时候就需要reflow. 重绘可能就是只绘一小部分,而不会绘制全部整个页面. Repaint- ...
- 浏览器渲染页面原理，reflow、repaint及其优化
浏览器的主要组件包括: 1. 用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2. 浏览器引擎 - ...
- 【图解】reflow和repaint
一.reflow和repaint的定义 reflow(回流):只要增删DOM节点或修改元素的形状.大小,就会触发reflow. repaint(重绘):只要元素样式属性(除形状.大小)发生改变了,就会 ...
- reflow （回流）和 repaint（重绘)理解
reflow 和 repaint repaint 就是重绘,reflow 就是回流. 严重性:在性能优先的前提下,性能消耗 reflow 大于 repaint. 体现:repaint 是某个 DOM ...
- 前端性能之回流与重绘(reflow repaint)
写在金三银四之际. 因为种种原因想要谋求新的发展,不得已翻起了尘封已久的高程书:写起了各种经典CSS布局:回顾起记忆略显模糊的几个项目.感慨着太多太多的知识点自己都不够深入甚至缺乏认识,却又不能急功近 ...
最新文章
- docker-compose:使用docker-compose部署nginx+supervisor+uwsgi+flask程序(mongodb)
- 联想家庭云中心：天边飘来“故乡的云”
- python自动化测试脚本后端_基于 python 的接口自动化测试
- python ftp timeout_python - FTP文件传输期间Python数据通道超时 - 堆栈内存溢出
- 王思聪欠款1.5亿成被执行人 孙宇晨：我帮你还钱！
- python——Django（ORM连表操作）
- 2018年度最佳网页设计与开发教程
- linux强行退出线程,Linux 多线程编程--线程退出
- DAC0832的多功能信号/波形发生器Proteus仿真设计,4种波形（正弦、三角、方波、锯齿），附仿真+C程序+论文等
- ubuntu tty联网
- 语音识别——语言模型
- Python 断言的使用
- deepin做服务器稳定吗,deepin从兴致勃勃到彻底放弃
- 关于n%k=n-(n/k)*K
- 阿里云服务器vgn6i配置NVIDIA CUDA+cuDNN
- VMware虚拟机扩展磁盘容量【绝对简单的傻瓜式操作】
- 优思学院：六西格玛证书有用吗？有什么方法获取六西格玛证书？
- win10没有管理员执行权限
- JRS303数据校验
- Windows7下使用Fixedsys和Tahoma字体