由于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)的更多相关文章

  1. 浏览器的重绘与回流(Reflow & Repaint)介绍

    重绘 当页面元素样式改变不影响元素在文档流中的位置时(如background-color,border-color,visibility),浏览器只会将新样式赋予元素并进行重新绘制操作. 回流 当改变 ...

  2. 理解浏览器的重绘与回流(repaint&&reflow)

    今天在做练习的时候,遇到了重绘与回流这个词,表示连个毛都没有听过.遂查之,首先将网上的(http://blog.sina.com.cn/s/blog_8dace7290102wezv.html)关于这 ...

  3. 介绍下重绘和回流(Repaint & Reflow),以及如何进行优化

    1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...

  4. 重绘和回流(Repaint & Reflow)总结,以及如何进行优化

    1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...

  5. 浅谈JS重绘与回流

    在说浏览器渲染页面之前,我们需要先了解两个点,一个叫 浏览器解析 URL,另一个就是本章节将涉及的 重绘与回流: 重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新, ...

  6. DOM的重绘和回流及代码性能优化

    1.DOM的重绘和回流Repaint&Reflow 1.1重绘:元素样式的改变(但宽高.大小.位置等不变) 如outline.visibility.color.background-color ...

  7. 【web性能】页面呈现、重绘、回流

    在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

  8. 高性能WEB开发:深入理解页面呈现、重绘、回流

    在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

  9. Web前端性能优化-重绘与回流

    1.什么是重绘与回流 Render tree 的重新构建就叫回流.当布局和几何属性改变时就需要回流,鼠标移动到图片 图片变大 也会触发回流.回流 能避免就避免 Render tree 改变外观.风格 ...

随机推荐

  1. Java 9中新的货币API

    译文出处: Java译站   原文出处:Michael Scharhag JSR 354定义了一套新的Java货币API,计划会在Java 9中正式引入.本文中我们将来看一下它的参考实现:JavaMo ...

  2. 码云git使用四(分支的创建,使用和合并)

    我们在使用git的时候,一般都不是直接在主代码中开发, 通常我们做的操作是创建一个分支,我们在分支上开发,开发完毕,在提交到主代码中. 我们现在学习创建分支,合并分支. 1.首先我们下载到本地都是在主 ...

  3. CentOS查询系统版本

    1.cat /proc/version 2.cat /etc/redhat-release 3.cat /proc/version 4.uname -a

  4. Java ip地址查询,根据ip接口获得ip所在省市区,邮编,运营商等

    早上一来,项目经理就说需要添加一个用户ip归属地查询功能,然后在网上搜罗半天,研究出一个比较简单的方法,通过接口返回地址json数据 有百度接口,新浪接口,这里用的是淘宝ip接口 通过淘宝IP地址库获 ...

  5. python常用

    列出当前目录 import os: print os.getcwd() python load .mat variable a import scipy.io as sp tmp=sp.loadmat ...

  6. python2.x 与 python3.x的区别

    从语言的源码角度: python2.x 的源码书写不够规范,且源码有重复,代码的复用率不高; python3.x 的源码清晰.优美.简单 从语言的特性角度: python2.x 默认为ASCII字符编 ...

  7. am335x system upgrade uboot nand boot(三)

    在uboot 下初始化nand,一般需要做如下工作: 第一: 配置默认从NAND boot Index: include/configs/am335x_evm.h=================== ...

  8. OOP⑺

    1.多态和instanceof 都是去买东西,但是根据我们给别人金额的不同,得到不同的结果!!!! 生活中的多态! 操作是否一致? 一致! 都是买东西! 什么不一样?? 01.消费金额不一样 02.因 ...

  9. 【原创】连接数据库MySQL,读取、显示、修改数据

    /* Time: 2017.01.02 —— 2017.01.04 * Author: WJ * Function:连接数据库,从数据库中读取图片并显示(已成功) */ [参考链接] MySQL存入图 ...

  10. SpringMVC中文乱码的解决办法

    中文乱码分类: (1)按照请求分类: GET请求乱码 POST请求乱码 (2)按照乱码位置分类 从前台传到后台的数据乱码(存储到数据库中的数据乱码) 从后台传到前台的数据乱码(显示在页面的数据乱码) ...