重绘和回流(reflow和repaint)
由于DOM操作会导致浏览器的回流,回流需要花费大量的时间进行样式计算和节点重绘与渲染,所以应当尽量减少回流次数。
以下是几种常见的减少重绘和回流的方法:
一、不要一项一项的更改页面的样式,尽量一口气写完,最好使用 元素.style = “”;或者 元素·style.cssText= "";
二、读写DOM也要尽量放在一起
三、使用文档碎片暂时存放新建的元素,最后在将文档碎片插入页面
var LinShi = document.createDocumentFragment();
var newYuanSu = document.createElement("div");
....
LinShi .appendChild (newYuanSu);
四、在html页面中 适当的使用 display:fixed;或者position:absolute;可以减少重绘回流
五 、使用window.requestAnimationFrame(function(){ for循环 });可以减少重绘回流, 该方法将发生的重绘回流的代码推迟到下一次重绘回流时一起执行
六、缓存DOM信息
七、在绑定多个事件的时候,使用事件绑定 : 父元素.事件名= function(eve){
var eve = e || window.event ;
if(eve.target.NodeName==""){
}
}
重绘和回流(reflow和repaint)的更多相关文章
- 浏览器的重绘与回流(Reflow & Repaint)介绍
重绘 当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作. 回流 当改变 ...
- 理解浏览器的重绘与回流(repaint&&reflow)
今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这 ...
- 介绍下重绘和回流(Repaint & Reflow),以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
- 重绘和回流(Repaint & Reflow)总结,以及如何进行优化
1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...
- 浅谈JS重绘与回流
在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...
- DOM的重绘和回流及代码性能优化
1.DOM的重绘和回流Repaint&Reflow 1.1重绘:元素样式的改变(但宽高.大小.位置等不变) 如outline.visibility.color.background-color ...
- 【web性能】页面呈现、重绘、回流
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- 高性能WEB开发:深入理解页面呈现、重绘、回流
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- Web前端性能优化-重绘与回流
1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 ...
随机推荐
- 利用模板导出文件(二)之jacob利用word模板导出word文件(Java2word)
https://blog.csdn.net/Fishroad/article/details/47951061?locationNum=2&fps=1 先下载jacob.jar包.解压后将ja ...
- JS--label语句的使用
使用label语句可以在代码中添加标签,以便将来使用. 一般与for循环一起使用 如: var num = 0; outermost: for(var i=0;i<10;i++){ for(va ...
- 输出前n大的数(分治)
描述:给定一个数组包含n个元素,统计前m大的数并且把这m个数从大到小输 出. 输入: 第一行包含一个整数n,表示数组的大小.n < 100000.第二行包含n个整数,表示数组的元素,整数之间以一 ...
- learning ddr pagesize calculate
example: if DDR is 512MB*16*8 COLBITS = 10, A0-A9 be used for cloumn address. ORG = 16 , each bank ...
- Java获取后台数据,动态生成多行多列复选框
本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...
- python常见面试题(mark)
1.大数据的文件读取 ① 利用生成器generator ②迭代器进行迭代遍历:for line in file 2.迭代器和生成器的区别 1)迭代器是一个更抽象的概念,任何对象,如果它的类有next方 ...
- xilinx 高速收发器Serdes深入研究-Comma码(转)
一.为什么要用Serdes 传统的源同步传输,时钟和数据分离.在速率比较低时(<1000M),没有问题. 在速率越来越高时,这样会有问题 由于传输线的时延不一致和抖动存在,接收端不能正确的采样数 ...
- DevExpress WinForms使用教程:Ribbon性能
[DevExpress WinForms v18.2下载] DevExpress XAF团队提供Ribbon新能改进,其中XAF Office Module的实际应用程序需要花费很长时间才能加载,导致 ...
- MVC扩展之HtmlHelper辅助方法
1.什么是HtmlHelper辅助方法?其实就是HtmlHelper类的扩展方法,如下所示: namespace System.Web.Mvc.Html { public static class F ...
- TensorFlow函数:tf.zeros_like
tf.zeros_like函数 tf.zeros_like( tensor, dtype=None, name=None, optimize=True ) 定义在:tensorflow/python/ ...