如何减少reflow

浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构（geometries）的进程叫做reflow。

有多种用户操作和DHTML变化可能会触发reflow:

1.调整浏览器窗口的大小

2.用javascript计算样式（computedstyles）

3.在DOM中创建删除元素

4.改变元素的class

但是并非所有javascript控制的样式都触发reflow，即使触发了触发的次数也不尽相同

下面是一些减小reflow的原则：

减少不必要的DOM层级（DOMdepth）。改变DOM树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行reflow上面。

尽量减少CSS规则，去除未用到的CSS。

如果做复杂的表现变化，如动画，让它脱离文档流。用绝对定位或fixed定位来完成。

避免不必要的复杂的CSS选择器，尤其是后代选择器（descendantselectors），因为为了匹配选择器将耗费更多的CPU。

请减少对DOM的操作:

基本原理：

对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

解决办法：

修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。

减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

使用JSON格式来进行数据交换:

基本原理：

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。

高效使用HTML标签和CSS样式:

基本原理：

HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。

CSS指层叠样式表(CascadingStyleSheets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。

正确理解：

HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如FlowElements，MetadataElements，PhrasingElements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。