javascript 减少回流

减少回流（REFLOWS）

　　当浏览器重新渲染文档中的元素时需要重新计算它们的位置和几何形状，我们称之为回流。回流会阻塞用户在浏览器中的操作，因此理解提升回流时间是非常有帮助的。

回流时间图表

　　你应该批量地触发回流或重绘，但是要节制地使用这些方法。尽量不处理DOM也很重要。可以使用DocumentFragment，一个轻量级的文档对象。你可以把它作为一种方法来提取文档树的一部分，或创建一个新的文档“片段”。与其不断地添加DOM节点，不如使用文档片段后只执行一次DOM插入操作，以避免过多的回流。

　　例如，我们写一个函数给一个元素添加20个div。如果只是简单地每次append一个div到元素中，这会触发20次回流。

function addDivs(element) {var div;for (var i = 0; i < 20; i ++) {div = document.createElement('div');div.innerHTML = 'Heya!';element.appendChild(div);}
}

　　要解决这个问题，可以使用DocumentFragment来代替，我们可以每次添加一个新的div到里面。完成后将DocumentFragment添加到DOM中只会触发一次回流。

function addDivs(element) {var div;// Creates a new empty DocumentFragment.var fragment = document.createDocumentFragment();for (var i = 0; i < 20; i ++) {div = document.createElement('a');div.innerHTML = 'Heya!';fragment.appendChild(div);}element.appendChild(fragment);
}

转载于:https://www.cnblogs.com/zys8119/p/5600302.html

javascript 减少回流相关推荐

【JavaScript】回流（reflow）与重绘（repaint）
重绘与回流首先要了解页面是如何呈现的: HTML文档加载后生成DOM树(包括display:none;元素): 在DOM树的基础上配合css样式结构体生成render树(不包含display:non ...
页面性能优化，如何减少回流
在开发时,不可避免的会遇到性能优化的问题,怎么做性能才会更好. 说到页面性能优化,我们就谈谈两个概念重绘和回流. 1.什么是重绘,什么是回流? 重绘: 当渲染树中的一些元素需要更新属性,而这些属性只是 ...
重绘和回流----降低回流减少性能影响
回流和重绘原创 2016年02月29日 14:49:02 标签: 布局 / dom 640 回流与重绘 1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重 ...
javascript --- [读书笔记] 回流与重绘前端优化小结
1. 浏览器渲染原理请说出: 从用户在浏览器地址输入网址,到看整个页面,中间都发生了哪些事情? HTTP请求阶段 HTTP响应阶段浏览器渲染阶段 1.1 可能用到的知识 1.1.1 进程 Proc ...
CSS什么情况引起回流,回流（重排）与重绘 —— 什么是回流和重绘，造成的原因是什么，如何去减少？...
浏览器的渲染原理浏览器的渲染原理步骤: 解析文档(HTML.SVG.XHTML),生成 DOM Tree 解析CSS,生成 CSSOM Rule Tree 根据 DOM Tree 和 CSSOM R ...
【转】高性能WEB开发系列之重绘与回流
原文转载:http://www.cnblogs.com/wangzhichao/archive/2011/05/16/2047633.html 页面呈现流程在讨论页面重绘.回流之前.需要对页面的呈现 ...
javascript的性能优化
(1) 如何加载JS,JS文件应放在什么位置外部JS的阻塞下载所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继 ...
JavaScript从初级往高级走系列————Virtual Dom
原文博客地址:https://finget.github.io/2018/05/22/virtualDom/ 什么是虚拟DOM 用JS模拟DOM结构 DOM变化的对比,放在JS层来做(图灵完备语言) ...
页面重绘和回流以及优化
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

javascript 减少回流

javascript 减少回流相关推荐

最新文章

热门文章