重绘和回流(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 改变外观.风格 ...
随机推荐
- 【Jmeter基础知识】Jmeter的三种参数化方式
JMeter的三种参数化方式包括: 1.用户参数 2.函数助手 3.CSV Data Set Config 一.用户参数 位置:添加-前置处理器-用户参数 操作:可添加多个变量或者参数 二.函数助手 ...
- LY.JAVA面向对象编程.final、多态、抽象类、接口
2018-07-08 13:47:26 final关键字 多态 从右向前念 多态的成员访问特点及转型的理解 多态的问题理解: class 孔子爹 { public int age = 40; p ...
- 利用VisualVm和JMX远程监控Java进程
自Java 6开始,Java程序启动时都会在JVM内部启动一个JMX agent,JMX agent会启动一个MBean server组件,把MBeans(Java平台标准的MBean + 你自己创建 ...
- 双向链表--首页大小不一卡片排序 --- react --- js
1.4中类型(grid_type)的卡片:1:大方块:2:竖长块:3:横长块:4:小方块 var order = 0; // 创建链表 function List(head) { this.head ...
- python 调用zabbix api实现查询主机信息,输出所有主机ip
之前发现搜索出来的主机调用zabbix api信息都不是那么明确,后来通过zabbix官方文档,查到想要的api信息,随后写一篇自己这次项目中用到的api. #!/usr/bin/env python ...
- 枚举,Math和Random
1.实用类: 01.枚举 enum Student stu=new Student(); 我们为了保证用户一个健康的输入! 我们使用了封装特性! 用户就不能直接访问我们的属性了!! private c ...
- day 69 权限的设置
1.权限控制 1). 表结构的设置 2). 流程 1.登录 get: 通过中间件的白名单 re 获取到登录页面 post: 通过中间件的白名单,认证成功,保存权限信息, --ORM 去空的权限 去重 ...
- asp.net webapi 返回json结果的方法
第一种: public static void Register(HttpConfiguration config) { //1.将默认的xml格式化程序清除 GlobalConfiguration. ...
- Flatten Nested List Iterator
Given a nested list of integers, implement an iterator to flatten it. Each element is either an inte ...
- intelij idea常用设置
1.genneral设置 2.自动导包 3.设置显示行号和方法分隔符 4.忽略大小写提示代码 比如:输入str会让其提示String 5.去掉单行显示类,让idea多行显示,容易找到类 6.设置字体及 ...