|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展.网页制造poluoluo文章简介:扫瞄器为了从头衬着部分或全部页面,从头盘算页面元素地位和多少布局(geometries)的历程叫做reflow。
- 原文:Minimizingbrowserreflow
- LindseySimon
- 翻译:ytzong
扫瞄器为了从头衬着部分或全部页面,从头盘算页面元素地位和多少布局(geometries)的历程叫做reflow。因为reflow是一种扫瞄器中的用户拦阻(user-blocking)操纵,以是懂得怎样削减reflow次数,及分歧的文档属性(DOM层级(DOMdepth),CSS效力,不必范例的style变更)对reflow次数的影响对开辟者来讲十分需要。偶然reflow页面中的一个元素会reflow它的父元素(译注:这里是单数)和一切子元素。
有多种用户操纵和DHTML变更大概会触发reflow。调剂扫瞄器窗口的巨细,用javascript盘算款式(computedstyles),在DOM中创立删除元素,改动元素的class城市触发reflow。值得注重的是,有些操纵会屡次触发reflow,超越你的设想。下图源自SteveSouders的演讲"EvenFasterWebSites":
从上表能够很分明的看出,在一切扫瞄器中并不是一切javascript把持的款式都触发reflow,即便触发了触发的次数也不尽不异。同时能够看呈现代扫瞄器在把持reflow次数方面做的愈来愈好。
在Google,我们经由过程多种体例对我们的页面及Web使用测速,同时reflow是我们增添UI时思索的一个关头要素。我们努力于转达轻盈的(lively),交互性强的(interactive)和使人愉悦的(delightful)的用户体验。
准绳
上面是一些减小reflow的准绳:
- 削减不用要的DOM层级(DOMdepth)。改动DOM树中的一级会招致一切层级的改动,上至根部,下至被改动节点的子节点。这招致大批工夫泯灭在实行reflow下面。
- 只管削减CSS划定规矩,往除未用到的CSS。
- 假如做庞大的体现变更,如动画,让它离开文档流。用相对定位或fixed定位来完成。
- 制止不用要的庞大的CSS选择器,特别是儿女选择器(descendantselectors),由于为了婚配选择器将泯灭更多的CPU。
鄙人面的视频中(译注:援用自youtube,没法寓目,请到原文翻墙),Lindsey先容了一些削减reflow的办法。
延长浏览
- Mozilla关于HTMLreflow的纪录(MozillasNotesonHTMLreflow)
- Opera的重绘和reflow(OperasRepaintsandreflows)
- SatoshiUeyama在Firefox中调试reflow的例子(SatoshiUeyamasdebug-Firefoxreflowdemos):
- google.co.jpreflow
- mozilla.orgreflow
- ja.wikipedia.orgreflow
- NicoleSullivan的关于reflow和重绘(NicoleSullivanonReflowsandRepaints)
</p>
Resig在2008年在其博客中介绍过HTML5的data-属性,现如今HTML5在如火如荼地推广,似乎国内的技术有些延迟,这篇博文可以在这里找到。 |
|