建设网站的风险分析,小程序 企业网站,wordpress 动态解析,常德网站建设费用减少回流#xff08;REFLOWS#xff09; 当浏览器重新渲染文档中的元素时需要 重新计算它们的位置和几何形状#xff0c;我们称之为回流。回流会阻塞用户在浏览器中的操作#xff0c;因此理解提升回流时间是非常有帮助的。 回流时间图表 你应该批量地触发回流或重绘#x… 减少回流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
