重绘和回流(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 改变外观.风格 ...
随机推荐
- java爬虫进阶 —— ip池使用,iframe嵌套,异步访问破解
写之前稍微说一下我对爬与反爬关系的理解 一.什么是爬虫 爬虫英文是splider,也就是蜘蛛的意思,web网络爬虫系统的功能是下载网页数据,进行所需数据的采集.主体也就是根据开始的超链接,下 ...
- linux下free命令详解
free 命令显示系统内存的使用情况,包括物理内存.交换内存(swap)和内核缓冲区内存. 如果加上 -h 选项,输出的结果会友好很多: 有时我们需要持续的观察内存的状况,此时可以使用 -s 选项并指 ...
- [IOS微信] PList文件解析,boost数据读取
最近在解析IOS版微信数据中的 mmsetting.archive 文件时,第一次接触到PList文件. 注:mmsetting.archive 不是一个标准的PList文件,其中含有汉字,并且很多 ...
- CAD绘制栏杆5.10
REC绘制一个矩形,(40,40)回车.通过它的中点移动到扶手的中点用移动工具把它往右边稍微移动.在三维图中EXT命令拉伸它,拉到扶手底面.如图选择三维扶手,右击,加栏杆,选择我们绘制的栏杆,单元宽度 ...
- 【Java算法】获得一个随机字符串
package suanfa; import java.util.Random; public class RandomStr { public static String getRandomStr( ...
- ueditor自定义额外参数
<script>ue.ready(function () { ue.setContent('123456');//设置富文本编辑器初始化数据 ue.execCommand('serverp ...
- QuickStart系列:docker部署之PostgreSQL
mysql --> mariadb --> postgresql 官网简介 https://www.postgresql.org/ 使用的镜像名称 centos/postgresql-96 ...
- 4.2计算字符的ASCII碼
Q:终端输入一个字符,输出ASCII碼 #include<stdio.h> int main() { char c; printf("input a charscter:&quo ...
- POST提交表单时EnType设置问题
POST提交表单时EnType设置问题 首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选: 1.application/x-www-form-urlencoded 2.mult ...
- 如何查看.java文件的字节码(原码)
出自于:https://www.cnblogs.com/tomasman/p/6751751.html 直接了解foreach底层有些困难,我们需要从更简单的例子着手.下面上一个简单例子: 1 pub ...