PJ应用基础与性能优化.ppt

高效的CSS 不要在ID和class选择器前使用标签名 尽量少使用层级 用class代替层级关系 尽量避免使用属性选择器等复杂选择器 避免动态表达式 解析html构建DOM树 2 从服务器端接收到html 1 解析CSS构建 渲染树 3 为渲染树生成布局 4 绘制 渲染树 5 Reflow Repaint 当 DOM 元素的属性发生变化 (如 color) 时,而这些属性只是影响元素的外观风格，浏览器会通知 render 重描相应的元素，此过程称为 Repaint。 如果该次变化涉及元素布局 (如 width)，浏览器则抛弃原有属性，重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 Reflow。 Reflow必将引起Repaint，而Repaint不一定会引起Reflow 。 什么操作会引起Reflow Repaint DOM元素的添加、修改（内容）、删除 隐藏元素 display:none(Reflow) visibility:hidden(Repaint) 应用新的样式或者修改任何影响元素外观的属性 用户的操作，如改变浏览器大小，改变浏览器的字体大小等 Reflow Repaint var s = document.body.style; s.padding = 2px; // reflow+repaint s.border = 1px solid red; // 再一次 reflow+repaint s.color = blue; // 再一次repaint s.backgroundColor = #ccc; // 再一次 repaint s.fontSize = 14px; // 再一次 reflow+repaint // 添加node，再一次 reflow+repaint document.body.appendChild(document.createTextNode(abc!)); Reflow Repaint 很多浏览器会维护一个队列，把所有会引起Reflow/Repaint的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会把flush队列，进行一个批处理。这样就会让多次的Reflow、Repaint变成一次。 浏览器的优化 Reflow Repaint offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height width,height 请求了getComputedStyle(), 或者 ie的 currentStyle 当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列， 因为队列中可能会有影响到这些值的操作。 破坏优化 Reflow Repaint 如何减少reflow和repaint 离线操作DOM 集中修改样式 缓存Layout属性值 Reflow Repaint 离线操作DOM(documentFragment\display:none) var list = document.getElementById(“list”); for (var i=0; i10 ;i++ ){ var item = document.createElement(“li”); list.appendChild(item); //10 reflow+repaint } Reflow Repaint 离线操作DOM(documentFragment\display:none) var list = document.getElementById(“list”); var fragment = document.createDocumentFragment(); for (var i=0; i10 ;i++ ){ var item = document.createElement(“li”); fragment.appendChild(item); //no reflow+repaint } list.appendChild(fragment); //1 reflow+repaint Reflow Repaint 集中修改样式 // 不好的写法 var left = 1; var top = 1; el.style.left = left + px; el.style.top = top + px; // 比较好的写法 el.className += className1; // 比较好的写法 el.style.cssText