给大家带来网页制造进修:reflow观点

对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
破洛洛文章简介：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