重绘和回流(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 改变外观.风格 ...
随机推荐
- ResouceUtils.getFile()取不到Jar中资源文件源码小结
Spring提供了一个工具类可以加载classpath下的文件,一般情况下无任何问题,但是当它作为公共的jar包中的工具来加载jar包中的文件时则报出找不到文件的错误. 点开看了一下这个工具类Reso ...
- Java ip地址查询,根据ip接口获得ip所在省市区,邮编,运营商等
早上一来,项目经理就说需要添加一个用户ip归属地查询功能,然后在网上搜罗半天,研究出一个比较简单的方法,通过接口返回地址json数据 有百度接口,新浪接口,这里用的是淘宝ip接口 通过淘宝IP地址库获 ...
- mac navicate 2013 - Lost connection to MySQL server at 'reading initial communication packet
mac 本地mysql用navicate打开表时遇到如下错误: 2013 - Lost connection to MySQL server at 'reading initial communica ...
- shell 变量介绍
变量命名规则 变量名必须以字母或下划线开头,名字中间只能由字母,数字和下划线组成,大小写是区分的 变量名的长度不得超过255个字符 变量名在有效的范围内必须是唯一的 在Bash中,变量的默认类型都是字 ...
- asp.net 发送电子邮件本地测试正常,但服务器上异常的解决办法
如题,这个问题曾经非常苦恼,代码肯定是没有问题的.在网上也查找了不少资料,按照他们的步骤做了,还是无效. 最后问题解决了,原来:我租用腾讯云服务器,腾讯为了防止垃圾邮件,禁止了邮件发送的25号端口,原 ...
- Ubuntu16.04无法使用WiFi
本人联想431,安装ubuntu16.04 lts,打开之后没有wife,参考这个解决 http://blog.csdn.net/bubblem/article/details/53575017 U ...
- 遍历所有子物体中renderer(渲染器)中的material(材质)并改变其alpha值实现若隐若现的效果
using UnityEngine;using System.Collections;using UnityEngine.UI; public class CubeControl : MonoBeha ...
- C++标准异常概述
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- 如何查看.java文件的字节码(原码)
出自于:https://www.cnblogs.com/tomasman/p/6751751.html 直接了解foreach底层有些困难,我们需要从更简单的例子着手.下面上一个简单例子: 1 pub ...
- python中各种遇到的函数
函数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(lis ...