Repaints and Reflows 重绘和重排版
当浏览器下载完所有页面HTML标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据
一棵DOM树 表示页面结构
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}
一棵渲染树 表示DOM节点如何显示
渲染树中为每个需要显示的DOM树节点存放至少一个节点(隐藏DOM元素在渲染树中没有对应节点)。渲染树上的节点称为“框”或者“盒”,符合CSS模型的定义,将页面元素看作一个具有填充、边距、 边框和位置的盒。一旦DOM树和渲染树构造完毕,浏览器就可以显示(绘制)页面上的元素了
当DOM改变影响到元素的几何属性(宽和高)——例如改变了边框宽度或在段落中添加文字,将发生一系列后续动作——浏览器需要重新计算元素的几何属性,而且其他元素的几何属性和位置也会因此改变受到影响。浏览器使渲染树上受到影响的部分失效,然后重构渲染树。这个过程被称作重排版。
重排版完成时,浏览器在一个重绘进程中重新绘制受影响的部分到屏幕中, 该过程称为"重绘"
重绘和重排版是负担很重的操作,可能导致网页应用的用户界面失去相应。所以 尽可能减少这类事情的发生
在下述情况中会发生重排版:
添加或删除可见的DOM元素
元素位置改变
元素尺寸改变(因为边距,填充,边框宽度,宽度,高度等属性改变)
内容改变,例如,文本改变或图片被另一个不同尺寸的所替代
最初的页面渲染
浏览器窗口改变尺寸
获取布局信息的操作将导致刷新队列动作,例如:下面这些方法
offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle() (currentStyle in IE)(在IE中此函数称为currentStyle)
布局信息由这些属性和方法返回最新的数据,所以浏览器不得不运行渲染队列中待改变的项目并重新排版以返回正确的值
最小化重绘和重排版
1.将所有改变合并在一起执行,只修改DOM一次 例如 定义数组, 把所有动态创建的dom 放入数组 一次加入页面。
2.从文档流中摘除该元素 有三种基本方法可以将DOM从文档中摘除
2.1隐藏元素,进行修改,然后再显示它。
2.2在文档之外创建文档片断
var tempDom = document.createDocumentFragment();
appendDataToElement(tempDom , data);
document.getElementById('mylist').appendChild(tempDom );
推荐用文档片断(第二种解决方案)因为它最少数量的DOM操作和重排版。
2.3第三种解决方法首先创建要更新节点的副本,然后在副本上操作,最后用新节点覆盖老节点:
var old = document.getElementById('mylist');
var clone = old.cloneNode(true);
appendDataToElement(clone, data);
old.parentNode.replaceChild(clone, old);
让元素脱离动画流
使用以下步骤可以避免对大部分页面进行重排版:
1.使用绝对坐标定位页面动画的元素,使它位于页面布局流之外。
2.启动元素动画。当它扩大时,它临时覆盖部分页面。这是一个重绘过程,但只影响页面的一小部分,避免重排版并重绘一大块页面。
3.动画结束时,恢复定位,从而只一次下移文档其他元素的位置。
当浏览器下载完所有页面HTML标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据 |
结构:
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-font-kerning:1.0pt;}
Repaints and Reflows 重绘和重排版的更多相关文章
- iPhone重绘机制drawRect
如何使用iPhone进行绘图.重绘操作iPhone的绘图操作是在UIView类的drawRect方法中完成的,所以如果我们要想在一个UIView中绘图,需要写一个扩展UIView 的类,并重写draw ...
- uCGUI窗口重绘代码分析
一.概述 µC/GUI的窗口重绘是学习者理解窗口工作原理和应用窗口操作的重点.µC/GUI的窗口重绘引入了回调机制,回调机制可以实现图形系统调用用户的代码,由于图形系统使用了剪切算法,使得屏幕重绘的效 ...
- [Android FrameWork 6.0源码学习] View的重绘过程
View绘制的三部曲, 测量,布局,绘画今天我们分析测量过程 view的测量是从ViewRootImpl发起的,View需要重绘,都是发送请求给ViewRootImpl,然后他组织重绘在重绘的过程中 ...
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- Android View的重绘过程之Measure
博客首页:http://www.cnblogs.com/kezhuang/p/ View绘制的三部曲, 测量,布局,绘画今天我们分析测量过程 view的测量是从ViewRootImpl发起的,Vie ...
- JS学习笔记:(二)回流和重绘
在搞清楚回流和重绘的概念之前,我们要清除浏览器的渲染过程. 解析生成DOM Tree(此时包含所有节点,包括display:none); 根据CSS Object Module(CCSSOM)计算节点 ...
- DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)
前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...
- 重绘(Repaint)和回流(Reflow)
重绘(Repaint)和回流(Reflow) 1.回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的? css 会影响 javascrip 执行时间导致 javascript 脚本变慢 浏览器渲染一 ...
- 【Fanvas技术解密】HTML5 canvas实现脏区重绘
先说明一下,fanvas是笔者在企鹅公司开发的,即将开源的flash转canvas工具. 脏区重绘(dirty rectangle)并不是一门新鲜的技术了,这在最早2D游戏诞生的时候就已经存在. 复杂 ...
随机推荐
- [TensorFlow] Basic Usage
Install TensorFlow on mac Install pip # Mac OS X $ sudo easy_install pip $ sudo easy_install --upgra ...
- 每日一练之自适应中值滤波器(基于OpenCV实现)
本文主要介绍了自适应的中值滤波器,并基于OpenCV实现了该滤波器,并且将自适应的中值滤波器和常规的中值滤波器对不同概率的椒盐噪声的过滤效果进行了对比.最后,对中值滤波器的优缺点了进行了总结. 空间滤 ...
- Android仿微信朋友圈,全文收起功能,附源码
在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...
- 初识markdown以及markdown的常用语法
一直都听说markdown可以写作变得更加方便,但是总没有去了解一下,今天下载了一个markdown编辑器,感受了一下markdown的魅力,发现对于程序员写博客之类的,markdown带来了很大 ...
- Canny边缘检测算法的实现
图像边缘信息主要集中在高频段,通常说图像锐化或检测边缘,实质就是高频滤波.我们知道微分运算是求信号的变化率,具有加强高频分量的作用.在空域运算中来说,对图像的锐化就是计算微分.由于数字图像的离散信号, ...
- 如何让 Git 忽略掉文件中的特定行内容?
近期在git遇到几个问题,让我重新认识到git的强大性,下面列出来记录一下 有一个数据库的配置文件,在用 git add 添加到 index file 时不能透露了相关配置.而如果用 .gitigno ...
- Python 接口测试(三)
四:python接口之http请求 python的强大之处在于提供了很多的标准库以及第三库,本文介绍urllib 和第三库的requests. Urllib 定义了很多函数和类,这些函数和类能够帮助我 ...
- PHP 代码审计代码执行注入
PHP 代码审计代码执行注入 所谓的代码执行注入就是 在php里面有些函数中输入的字符串参数会当做PHP代码执行. 如此的文章里面就大有文章可以探究了 一 常见的代码执行函数 Eval,assert, ...
- JMeter使用简单教程
去Apache JMeter官网下载最新的Windows下的zip安装包并解压 进入JMeter安装目录下的bin目录,双击jmeter.bat,运行JMeter程序 打开测试计划主界 ...
- C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(上)
译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(上)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...