关于网页机能
网页机能治理是一个很大的话题，最近在温习相干的学问，小结一下。
页面加载递次
网页天生的历程大抵以下：
-
HTML代码转化成DOM -
CSS代码转化成CSSOM（CSS Object Model） - 连系
DOM和CSSOM，天生一棵衬着树（包含每一个节点的视觉信息） - 天生规划（
layout），行将一切衬着树的一切节点举行平面合成 - 将规划绘制（
paint）在屏幕上
CSS加载、JS加载是不是壅塞DOM树的剖析和衬着
由上面的历程我们能够看出，在衬着之前，
CSSOM和DOM已天生。
- 实际上，
css的加载不会壅塞DOM树剖析，然则会壅塞DOM树衬着。要在款式加载好了以后，才最先衬着页面。这是合理的。 - 而
JS执行会壅塞DOM树的剖析和衬着。当引用了JS的时刻，浏览器发送1个JS request就会一向守候该request的返回。由于浏览器须要1个稳固的DOM树结构，而JS中很有能够有代码直接转变了DOM树结构，比方运用document.write或appendChild,以至是直接运用的location.href举行跳转，浏览器为了防备涌现JS修正DOM树，须要从新构建DOM树的状况，所以，JS执行会壅塞DOM树的剖析和衬着。
这两个划定规矩的本质都是进步页面的机能，防止发作不必要的从新衬着。
页面机能优化
重排和重绘会不停触发，这是不可防止的。然则，它们异常消耗资本，是致使网页机能低下的根本原因。
以下三种状况，会致使网页从新衬着。
- 修正DOM
- 修正款式表
- 用户事宜（比方鼠标悬停、页面转动、输入框键入笔墨、转变窗口大小等等）
从新衬着，就须要从新天生规划和从新绘制。前者叫做”重排”（reflow），后者叫做”重绘”（repaint）须要注重的是，”重绘”不肯定须要”重排”，比方转变某个网页元素的色彩，就只会触发”重绘”，不会触发”重排”，由于规划没有转变。然则，”重排”必定致使”重绘”，比方转变一个网页元素的位置，就会同时触发”重排”和”重绘”，由于规划转变了
有一些技能，能够下降浏览器从新衬着的频次和本钱。
-
DOM的多个读操纵（或多个写操纵），应当放在一同。不要两个读操纵之间，到场一个写操纵。 - 不要一条条地转变款式，而要经由过程转变
class，或许csstext属性，一次性地转变款式。 - 先将元素设为
display: none（须要1次重排和重绘），然后对这个节点举行100次操纵，末了再恢复显现（须要1次重排和重绘）。如许一来，你就用两次从新衬着，庖代了能够高达100次的从新衬着。 -
position属性为absolute或fixed的元素，重排的开支会比较小，由于不必斟酌它对其他元素的影响。 - 只在必要的时刻，才将元素的
display属性为可见，由于不可见的元素不影响重排和重绘。别的，visibility : hidden的元素只对重绘有影响，不影响重排. - 猎取某些属性浏览器引擎能够会针对重排做了优化。比方Opera，它会比及有充足数目的变化发作，或许比及肯定的时候，或许等一个线程完毕，再一同处置惩罚，如许就只发作一次重排。但除了衬着树的直接变化，当猎取一些属性时，浏览器为获得准确的值也会触发重排。如许就使得浏览器的优化失效了。这些属性包含：
offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()(currentStyle in IE)。所以，在屡次运用这些值时应举行缓存。
参看文献
