什么是 Repaint 和 Reflow, 相关介绍
|
1. 什么是 repaint 和 reflow 一个页面由两部门构成: DOM : 描写该页面的布局 render : 描写 DOM 节点 (nodes) 在页面上怎样泛起 当 DOM 元素的属性产生变革 (如 color) 时, 赏识器会关照 render 从头描画响应的元素, 此进程称为 repaint. 假如该次变革涉及元素机关 (如 width), 赏识器则丢弃原有属性, 从头计较并把功效转达给 render 以从头描画页面元素, 此进程称为 reflow. 这两个进程是很淹灭赏识器机能的, 从 IE 系列和 Chrome 渲染页面速率上的差距即可看出渲染引擎计较对应值和泛起并不必然高效, 而每次对元素的操纵城市产生 repaints 或 reflow, 因此编写 DOM 交互时假如不留意就会导致页面机能低下. 2. Reflow 当产生以下环境的时辰, 会激发 reflow: 可见元素的增删 元素的位置, 巨细, 内容的改变 页面第一次渲染 改变赏识器窗口的巨细 荣幸地, 赏识器对 reflow 的处理赏罚是和 PHP 的 Output Control 相似的 — 把 reflow 放进一个行列, 到达必然水平或时限就举办 flush. 但不幸的是, 这个进程也许会被我们逼迫提前执行 — 只要行使下面所列的任一个城市迫使赏识器 flush, 因此发生 reflow: offsetTop, offsetXXX… scrollTop, scrollXXX… clientTop, clientXXX… getComputedStyle / currentStyle 3. 怎么优化 起首是镌汰对 DOM 中有关机关的操纵, 假设我们要动态改变一个元素的巨细为 100*100px: Copy to Clipboard 引用的内容：[www.veryhuo.com]
var el = document.getElementById("id"); el.style.width = 100px; el.style.height = 100px; // suppose there are two els : el2, el3 el2.style.width = el.style.width * 1.5; el3.style.width = el.style.width * 2; 写成这样会有更好的机能: el.style.cssText = "width: 100px; height: 100px;"; // or el.className = "square"; var width = el.style.width; el2.style.width = width * 1.5; el3.style.width = width * 2; 操纵 DOM 时只管行使 DocumentFragment 和 cloneNode: Copy to Clipboard引用的内容：[www.veryhuo.com]
// DocumentFragment var fm = document.createDocumentFragment(); var a; for(var i = 0; i < 20; i++){ a = document.createElement("a"); a.href = i + ".html"; a.innerHTML = "page " + i; fm.appendChild(a); } document.getElementById("tar").appendChild(fm); // cloneNode var ul = document.getElementById("ul"); var clone = ul.cloneNode(true); // true = deep copy var li; for(var i = 0; i < 20; i++){ li = document.createElement("li"); li.appendChild(document.createTextNode(i)); clone.appendChild(li); } ul.parentNode.replaceChild(clone, ul); 大抵优化思绪如下: 把元素从 DOM 流中剥离 (clone, fragment, position: absolute, 绝对定位对动画或拖曳工具尤为有效) 在被剥离的的元素长举办各类操纵 把被剥离的元素规复到 DOM 流 留意: IE lte 8 有一个 bug — :hover, 大量呈现行使该选择器的元素的话会低落页面相应速率 在不鸟 older browsers 的环境下, 可以大量行使 firstElementChild(),querySelectorAll() 等 API, 可实现的成果和 jQuery 等库的 CSS 选择器和遍历函数相差不大 另外对变乱的绑定上尽也许行使 delegation, 也就是公道操作 event 的冒泡特征, 我以为这对 repaint & reflow 的影响是较量小的, 不外对付代码优化, 复用性和机动性都有很大的辅佐, 有空再继承 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
