网页制作学习:reflow概念

夜店之王BJ

夜店之王BJ

2016-02-19 23:51

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐网页制作学习:reflow概念,无聊中的都看过来。

如果对于 reflow 这个概念你还不太清楚或者不知道,请先阅读:

《Notes on HTML Reflow》 《What is a reflow?》 《Gecko:Reflow Refactoring》 《reflow》 《形象化的reflow》 《样式的执行效率-reflow》

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)调整窗口大小(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))

详细阅读:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/) 《Reflows & Repaints: CSS Performance making your JavaScript slow?》

原文:http://www.planabc.net/2009/04/13/reflow/

展开更多 50%)
分享

猜你喜欢

网页制作学习:reflow概念

Web开发
网页制作学习:reflow概念

网页制作学习:reflow的问题

Web开发
网页制作学习:reflow的问题

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页制作学习教程:CSS Position

Web开发
网页制作学习教程:CSS Position

制作网页需要学习哪些技术?

Web开发
制作网页需要学习哪些技术?

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何学习DIV CSS制作网页

Web开发
如何学习DIV CSS制作网页

网页制作之学习CSS的理由

Web开发
网页制作之学习CSS的理由

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

DIV+CSS制作网页心得

DIV+CSS制作网页心得

不想在QQ圈子中看到某个人怎么办?

不想在QQ圈子中看到某个人怎么办?
下拉加载更多内容 ↓