由于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. 开发Web应用(1)(二十)

    静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...

  2. struts项目部署在Tomca上在断网情况下启动报错

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6015693.html 前段时间,项目部署到现场后,反馈Tomcat能正常启动,但是项目有时访问不了也不报错. ...

  3. Python爬虫关于多层嵌套iframe的解决

    近期由于公司资源需要,我爬取了一个视频网站,结果以为一个很容易的小爬虫,却步步是坑啊,费了一天终于都解决了(太菜了!!!). 前面导航页的爬虫就不多说了,无非就是webdriver和PhantomJS ...

  4. 码云git使用二(从码云git服务器上下载到本地)

    假如我们现在已经把项目添加到码云git服务器了. 我们现在需要通过studio工具把码云git服务器上的某个项目下载到本,并且运行. 1.打开码云网页,找到对应项目的git路径. 2.打开studio ...

  5. angular组件之间的通讯

    组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...

  6. python 转换代码格式

    import os dirname="C:\\Users\\haier\\Desktop\\new" def walk(path): for item in os.listdir( ...

  7. 【配置】pom.xml的配置

    pom.xml的配置: 地址:https://mvnrepository.com/ 示例:配置log4j 1.在搜索框中搜索log4j 2.在搜索结果页点击log4j 3.选择一个最新的版本,点击 4 ...

  8. Ubuntu下怎么编译并运行C、C++和Pascal语言?

    很多同学在安装了Ubuntu的环境后,发现在Windows下的许多东西都打不开了,但是用网站上的在线IDE又不是很方便. 所以,ljn教你如何在Ubuntu下编译并运行C.C++和Pascal. 一. ...

  9. MATLAB 批量处理图片

    function resizephotos(directory, wh, isrecursive, isoverwrite, savetopath, supportFormat) % resizeph ...

  10. RabbitMQ 队列、消息持久化

    RabbitMQ的消息队列的持久化是一个很不错的功能,设置也非常简单.如下代码: 1.设置队列持久化(在声明队列的时候设置) channel.QueueDeclare(queue: "q.l ...