影响 reflow 的因素及其优化
来源:互联网 发布:mysql怎么写sql语句 编辑:程序博客网 时间:2024/04/30 16:25
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))
中文:http://www.planabc.net/2009/04/13/reflow/
原文: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/#expressions
- 影响 reflow 的因素及其优化
- 影响SEO优化的关键优化因素
- 【DSP开发技术】影响高性能DSP功耗的因素及其优化方法
- 影响关键词优化的一些外在因素
- google优化之空间因素的影响
- CSS Repaint and Reflow 及其优化
- [转]影响搜索引擎优化的八项因素
- 性能优化:影响程序启动性能的因素
- 影响百度百度优化排名的因素是什么呢?
- 影响网站SEO优化排名的因素有哪些?paobujiv
- 百度自然搜索排名的影响因素与优化方法
- 影响股价的因素
- 影响意志力的因素
- 影响汇率变动的因素
- 影响SEO的因素
- 影响黄金的因素
- 影响汇率的因素
- 影响股市的因素
- 在循环升序数组中查找一个数
- 基于JavaScript的公式解释器 - 15 【单元格范围对象】
- wcf自主host多个服务的问题
- 恶搞之手机垃圾信息发送器 手机短信骚扰器
- 利用DOM解析XML文档实例
- 影响 reflow 的因素及其优化
- VS Add Service Reference from Windows Azure
- 利用DOM解析XML文档实例
- 基于JavaScript的公式解释器 - 16 【MailStone,测试】
- 忽然不能上网了-【解决办法】
- 课堂上我们为什么不发言
- 工作一年多了
- 自定义控件使用GDI+画图片
- Windows Phone 7常用资源大集合