如何减少reflow

浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构(geometries)的进程叫做 reflow。
有多种用户操作和 DHTML 变化可能会触发 reflow:
1.调整浏览器窗口的大小
2.用 javascript 计算样式(computed styles)
3.在 DOM 中创建删除元素
4.改变元素的 class
但是并非所有 javascript 控制的样式都触发 reflow,即使触发了触发的次数也不尽相同

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

减少不必要的 DOM 层级(DOM depth)。改变 DOM 树中的一级会导致所有层级的改变,上至根部,下至被改变节点的子节点。这导致大量时间耗费在执行 reflow 上面。
尽量减少 CSS 规则,去除未用到的 CSS。
如果做复杂的表现变化,如动画,让它脱离文档流。用绝对定位或 fixed 定位来完成。
避免不必要的复杂的 CSS 选择器,尤其是后代选择器(descendant selectors),因为为了匹配选择器将耗费更多的 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指层叠样式表 (Cascading Style Sheets),如果说把页面想象成一个人,HTML就是人的骨架,CSS就是人的衣装,一个人的品味从他的衣装就能一目了然。
正确理解:
HTML是一门标记语言,使用合理的HTML标签前你必须了解其属性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。

你可能感兴趣的:(r)