· 在线留言 · 关于我们
全国7X24小时服务热线:
029-8831-1253
 
当前位置:首页>信息化频道>行业资讯

行业资讯

西安网站设计,影响reflow的因素及其优化
西安软件公司, 西安软件开发 http://www.jzsoftit.com , 西安网站建设, 西安网站制作 http://www.jzsoftit.cn


Yahoo! 性能工程师 Nicole Sullivan 在最新的文章 《Reflows & Repaints: CSS Performance making your JavaScript slow?》 中总结了导致 reflow 发生的一些因素:

调整窗口大小(Resizing the window)
改变字体(Changing the font)
增加或者移除样式表(Adding or removing a stylesheet)
内容变化,比如用户在input框中输入文字(Content changes, such as a user typing text in
an input box)
激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))
操作 class 属性(Manipulating the class attribute)
脚本操作 DOM(A script manipulating the DOM)
计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)
设置 style 属性的值 (Setting a property of the style attribute)
reflow 会引起开销,影响页面的性能,那如何才能做到合理的优化呢?Nicole Sullivan 也提供了部分建议:

如果想设定元素的样式,通过改变元素的 class 名 (尽可能在 DOM 树的最里层)(Change classes on the element you wish to style (as low in the dom tree as possible))
避免设置多项内联样式(Avoid setting multiple inline styles)
应用元素的动画,使用 position 属性的 fixed 值或 absolute 值(Apply animations to elements that are position fixed or absolute)
权衡平滑和速度(Trade smoothness for speed)
避免使用 table 布局(Avoid tables for layout)
避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)(Avoid JavaScript expressions in the CSS (IE only))
 

关于我们  | 果蔬质量追溯系统  | 网站建设  | 网站推广  | 网站运营  | 软件开发  | 软硬件集成  | 软件选型  | 软件外包  | 系统托管  | 成功案例   | IT硬件  | 常见问题  | 在线留言  |  联系方式
  © 2005 www.jzsoftit.com  西安捷众软件科技有限公司 版权所有
地址:西安市高新区科技路东口中天国际B座19层 电话:029-88311253   QQ:1009213309  Email:jzsoftit@163.com