|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
破洛洛文章简介:Yahoo!功能工程师NicoleSullivan在最新的文章中总结了招致reflow产生的一些要素.
假如关于reflow这个观点你还不太分明大概不晓得,请先浏览:
- 《NotesonHTMLReflow》
- 《Whatisareflow?》
- 《Gecko:ReflowRefactoring》
- 《reflow》
- 《抽象化的reflow》
- 《款式的实行效力-reflow》
Yahoo!功能工程师NicoleSullivan在最新的文章《Reflows&Repaints:CSSPerformancemakingyourJavaScriptslow?》中总结了招致reflow产生的一些要素:
- 调剂窗口巨细(Resizingthewindow)
- 改动字体(Changingthefont)
- 增添大概移除款式表(Addingorremovingastylesheet)
- 内容变更,好比用户在input框中输出笔墨(Contentchanges,suchasausertypingtextin
aninputbox)
- 激活CSS伪类,好比:hover(IE中为兄弟结点伪类的激活)(ActivationofCSSpseudoclassessuchas:hover(inIEtheactivationofthepseudoclassofasibling))
- 操纵class属性(Manipulatingtheclassattribute)
- 剧本操纵DOM(AscriptmanipulatingtheDOM)
- 盘算offsetWidth和offsetHeight属性(CalculatingoffsetWidthandoffsetHeight)
- 设置style属性的值(Settingapropertyofthestyleattribute)
reflow会引发开支,影响页面的功能,那怎样才干做到公道的优化呢?NicoleSullivan也供应了部分倡议:
- 假如想设定元素的款式,经由过程改动元素的class名(尽量在DOM树的最里层)(Changeclassesontheelementyouwishtostyle(aslowinthedomtreeaspossible))
- 制止设置多项内联款式(Avoidsettingmultipleinlinestyles)
- 使用元素的动画,利用position属性的fixed值或absolute值(Applyanimationstoelementsthatarepositionfixedorabsolute)
- 衡量光滑和速率(Tradesmoothnessforspeed)
- 制止利用table结构(Avoidtablesforlayout)
- 制止利用CSS的JavaScript表达式(仅IE扫瞄器)(AvoidJavaScriptexpressionsintheCSS(IEonly))
具体浏览:
- 《Reflows&Repaints:CSSPerformancemakingyourJavaScriptslow?》
原文:http://www.planabc.net/2009/04/13/reflow/
结构清晰,容易被搜索引擎搜索到,天生优化了seo |
|