How (not) to trigger a layout in WebKit
As most web developers are aware, a significant amount of a script's running time may be spent performing DOM operations triggered by the script rather than executing the JS byte code itself. One such potentially costly operation is layout (aka reflow) -- the process of constructing a render tree from a DOM tree. The larger and more complex the DOM, the more expensive this operation may be.
An important technique for keeping a page snappy is to batch methods that manipulate the DOM separately from those that query the state. For example:
// Suboptimal, causes layout twice.
var newWidth = aDiv.offsetWidth + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + 'px'; // Write
// Better, only one layout.
var newWidth = aDiv.offsetWidth + 10; // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
aDiv.style.height = newHeight + 'px'; // Write
Stoyan Stefanov's tome on repaint, relayout and restyle provides an excellent explanation of the topic.
This often leaves developers asking the question: What triggers layout? Last week Dimitri Glazkov answered this question with this codesearch link. Trying to understand it better myself, I went through and translated it into a list of properties and methods. Here they are:
Element
clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth
Frame, Image
height, width
Range
getBoundingClientRect(), getClientRects()
SVGLocatable
computeCTM(), getBBox()
SVGTextContent
getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()
SVGUse
instanceRoot
window
getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()
This list is almost certainly not complete, but it is a good start. The best way to check for over-layout is to watch for the purple layout bars in the Timeline panel of Chrome or Safari's Inspector.
来源:http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
最新文章
- C#编译执行过程
- Linux时间戳和标准时间的互转
- 关于AutoCAD 2014的securityload…
- postgres与osm初步使用
- Notepad++配置Python开发环境
- 【原】UIView实现点击着重效果的解决方案
- CCF 201403-1	相反数 (水题)
- iOS系统控件显示中文
- UI5_HomeWork
- DashClock
- ActionBarSherlock学习笔记 第一篇——部署
- 局部刷新Ajax
- MySQL中的EXPLAIN
- Java用户界面技术
- D3_book 11.2 stack
- 【文文殿下】[AH2017/HNOI2017]礼物
- [Baltic 2011]Lamp BZOJ2346
- input 输入框只能输入纯数字
- 软工实践团队项目-";智能聊天机器人";简介
- mysql 随机获取一条或多条数据