How (not) to trigger a layout in WebKit
2016-03-14 10:44
357 查看
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:
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:
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
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#事件委托
- css实现高度不固定的div元素模块在页面中水平垂直居中
- gdb调试技巧总结
- 使用maven创建web项目
- UIScrollerView循环滚动,加定时器和pageControl
- BCP导出导入大容量数据实践
- #pragma once与#ifndef两种防止头文件二次编译的区别
- swift 网络请求
- 鼠标hover时tab自动切换
- AstncTadk与Handler的优缺点比较
- 按下Mac键盘上的音量键F12,实现的却是切屏功能
- 超简单实现双击返回键退出程序,妙用Handler
- 常用的开源数据库连接池比较
- WPF学习之数据绑定
- java中多态的概念
- TXT
- mysql 5.6搭建总结
- 命令模式&策略模式
- 为什么说 DOM 操作很慢
- jQuery中ready与load事件的区别