重绘和回流(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 改变外观.风格 ...
随机推荐
- koa学习
http://www.ruanyifeng.com/blog/2017/08/koa.html
- Vue--项目开发之实现tabbar功能来学习单文件组件1
创建好一个Vue项目后,我们进入项目里,点开src文件下的components文件里的helloworld.vue 文件.清空初始数据.然后开始编写. 一个.vue文件初始格式为以下三部分(组件三部曲 ...
- DoTween动画中的几种函数。
1.transform.DOLocalMoveX(200, 1).From(true); 动画默认是从当前位置沿着X轴移动到x=200的位置. 加上Form变为从X=200的位置移动到当前位置,fro ...
- day8-python函数
函数的简介 函数就是完成特定功能的一个语句组,这组语句可以作为一个单位使用,并且给它取一个名字. 降低编程难度 代码重用 可以通过函数名在程序的不同地方多长执行,这通常叫函数调用(.). 预定义函数 ...
- windows添加PDF虚拟打印机
添加PDF虚拟打印机(果真姜还是老的辣,我摸索了两天没结果的事情,大佬轻轻松松两分钟搞定...) 这种PDF虚拟打印机的功能是将需要被打印的内容写到当前系统的指定目录下的指定文件中.整个过程都不需要连 ...
- 4.5 C++重载、覆盖和遮蔽
参考:http://www.weixueyuan.net/view/6375.html 总结: 函数签名包括函数名和函数参数的个数.顺序以及参数数据类型. 需要注意的是函数签名并不包含函数返回值部分, ...
- 如何从零安装Mysql
1.yum/rpm安装 2.采用二进制方式免编译安装MySQL. 3.考虑到MySQL5.4.xx及以后系列产品的特殊性,其编译方式和早期的第一条产品线的有所不同,这里采用cmake或gmake方式的 ...
- Windows server 2016 安装 TFS
一:准备: 1.1下载TFS https://visualstudio.microsoft.com/zh-hans/tfs/ 1.2 下载SQL2017 http://msdn.itellyou.cn ...
- 关于 global nonlocal 用法
# 1 关于 globals() locals() nolocl 还有内置函数的引用## 概念的解释# 命名空间# 1 局部命名空间:每一个函数都有自己的命名空间# 2 全局命名空间:写在函数外的变量 ...
- socket长连接理解
在一个tcp连接上可以连续发送多个数据包,在tcp连接保持期间,如果没有数据包发送,需要双方发检测包以维持此连接,一般需要自己做在线维持. 长连接指建立socket连接后不管是否使用都保持连接,但安全 ...