20
二
这篇文章节选自opera.com, 主要是阐述js,opera和reflow”三角关系”, 也加了一些我个人的理解. (需要注意的是这个文章主要是以Opera的角度来说的, 所以有些地方可能不是全部浏览器会有相同解析.)
你也可以访问原文”Efficient JavaScript”
那我开始吧, Let’s get moving~~ 继续阅读 »
标签为‘reflow’的日志
13
二
这里我节选了两篇来自mozilla.org的技术文章, 虽然不全是reflow的内容, 但对于更深如理解reflow是有好处的, 尤其关注第二篇, 对我们实际工作很有裨益.
Notes on HTML Reflow 部分节选翻译
要是你还没了解何为reflow, 请查看这里
All HTML reflow, including the intial reflow, begins at the root frame, which corresponds to the <html> element of the HTML document. Reflow proceeds recursively through some or all of the frame hierarchy, computing geometric information for each frame object that requires it. Reflow may have the side-effect of creating new continuation frames, for example, for a text frame when the text must be wrapped.
大致意思为: 所有的reflow, 都是由根标签开始, 对应与HTML文档, 就是<html>标签了, reflow会一直逐级进行到需要从新计算的框架(frame),甚至全部框架. 继续阅读 »
10
二
什么东西会导致reflow?
其实看了上一篇对reflow的描述, 我们基本能猜到, reflow是不能避免的! 但是我们需要想办法尽量减少reflow.先看看什么会导致reflow, 以下节选自Stubbornella (请原谅我有点粗糙的翻译, 我相信继续翻译的话, 会好起来的~~, 有不足的地方, 请不吝指出!)
导致reflow的情况:
Unfortunately, lots of things. Among them some which are particularly relevant when writing CSS:
* Resizing the window
* Changing the font
* Adding or removing a stylesheet
* Content changes, such as a user typing text in an input box
* Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)
* Manipulating the class attribute
* A script manipulating the DOM
* Calculating offsetWidth and offsetHeight
* Setting a property of the style attribute
好了, 来翻译 继续阅读 »
10
二
最近在蓝色理想论坛上, 看到一个讨论页面重构后反而导致了浏览器崩溃的问题. 讨论还是没有最终定论, 但就抛出了一个关于reflow的关键词. Reflow一词对于我来说是比较生疏的, 虽然都知道某些CSS或JS的用法, 会影响浏览器效率, 但没有真正归纳总结, 大部分也知其然不只其所以然. 要了解问题的根本, 必须从根源下手, 我于是开始搜集关于Reflow的介绍, 以及深入的探讨文章, 我们一起来关注Reflow吧, 这是一个优秀的页面前端从业人员所需要熟知的 继续阅读 »