当某些内容被附加到内存中的DOM时,是否会导致浏览器重排?或者仅当屏幕上的像素被告知要改变回流发生时?例如:
案例1:Img元素一次附加到DOM
var parentDiv = $('#imgHolder'); var imgArray = []; // Array of img paths populated in another function $.each(imgArray,function() { parentDiv.append(createImgEle(this)); // createImgEle() // returns an <img> with the right src }
情况2:Img元素放在一个单独的数组中,然后附加到DOM
var parentDiv = $('#imgHolder'); var imgArray = []; // Array of img paths populated in another function var tempArray = []; // Holds the img elements until its fully populated $.each(imgArray,function() { tempArray.push(createImgEle(this)); } parentDiv.append(tempArray);
案例3:案例1或2,但默认情况下,parentDiv设置为display:none;并在每个循环完成后显示.
基本上,我想知道的是,当屏幕像素被告知改变时,浏览器是否才开始重排?
顺便说一句,代码仅用于示例目的而不是生产中,所以不要因为任何逻辑错误而抨击我.谢谢你的任何建议.
解决方法
Basically,what I want to know is,does the browser only start to reflow when the pixels of the screen are told to change?
不,当DOM发生变化时,浏览器会重新流动.之后,它将重新绘制(告诉屏幕上的像素改变).
有关详细信息,请查看this dev.opera.com article和问题When does reflow happen in a DOM environment?.
简而言之:当然有优化后续DOM更改,例如,如果在循环中插入元素数组.我不希望你的案例1和2明显不同.
只有在进行非常繁重的DOM更改时,您才需要使用案例#3.这使得回流(如果它们在插入循环期间发生)在遇到隐藏元素时停止,因此它们基本上被阻止.但是,循环前后的两次显示更改可能会导致某些浏览器出现闪烁.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。