前端开发者必须要知道网页是如何渲染的
【编者按】其实，有关网页渲染的文章很多，但是相关信息比较分散，且论述并不是很完整。如果要想对这个主题有个大致的了解，我们还得学习很多知识。因此，Web开发者Alexander Skutin 决定写一篇文章。他相信，这篇文章不仅能帮助初学者，也能对那些想要刷新知识结构的高级前端开发者有所裨益。原文地址
译文如下：
网页渲染必须在很早的阶段进行，可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧，从而避免在实践的过程中遇到性能问题。
这篇文章不会研究浏览器内部的详细机制，而是提出一些通用的规则。毕竟，不同浏览器引擎的工作机制各不相同，这无疑会让开发者对浏览器特性的研究变得更加复杂。
浏览器是如何完成网页渲染？
首先，我们回顾一下网页渲染时，浏览器的动作：
根据来自服务器端的HTML代码形成文档对象模型（DOM）
加载并解析样式，形成CSS对象模型。
在文档对象模型和CSS对象模型之上，创建一棵由一组待生成渲染的对象组成的渲染树（在Webkit中这些对象被称为渲染器或渲染对象，而在Gecko中称之为“frame”。）渲染树反映了文档对象模型的结构，但是不包含诸如标签或含有display:none属性的不可见元素。在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的DOM对象，或者文本块，还加上计算过的样式。换言之，渲染树是一个文档对象模型的直观展示。
对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。
最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。
当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重复执行，因为网页的内在结构已经发生了改变。
重绘
当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。
重排
当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。这些改变通常由以下事件触发：
DOM操作（元素添加，删除，修改，或者元素顺序的改变）;
内容变化，包括表单域内的文本改变;
CSS属性的计算或改变;
添加或删除样式表;
更改“类”的属性;
浏览器窗口的操作（缩放，滚动）;
伪类激活（：悬停）。
浏览器如何优化渲染？
浏览器尽可能将重绘/重构 限制在被改变元素的区域内。比如，对于位置固定或绝对的元素，其大小改变只影响元素本身及其子元素，然而，静态定位元素的大小改变会触发后续所有元素的重流。
另一种优化技巧是，在运行几段JavaScript代码时，浏览器会缓存这些改变，在代码运行完毕后再将这些改变经一次通过加以应用。举个例子，下面这段代码只会触发一个重构和重绘：
var $body = $('body');
$body.css('padding', '1px'); // reflow, repaint
$body.css('color', 'red'); // repaint
$body.css('margin', '2px'); // reflow, repaint
// only 1 reflow and repaint will actually happen然而，如前所述，改变元素的属性会触发强制性的重排。如果我们在上面的代码块中加入一行代码，用来访问元素的属性，就会发生这种现象。
var $body = $('body'); $body.css('padding', '1px'); $body.css('padding'); // reading a property, a forced reflow $body.css('color', 'red'); $body.css('margin', '2px');
其结果就是，重排发生了两次。因此，你应该把访问元素属性的操作都组织在一起，从而优化网页性能。（你可以在JSBin查到更为详细的例子）
有时，你必须触发一个强制性重排。比如，我们必须将同样的属性(比如左边距)两次赋值给同一个元素。起初，它应该设置为100px，且不带动效。接着，它必须通过过渡(transition)动效改变为50px。你现在可以在JSbin上学习这个例子，不过我会在这儿更详细地介绍它。
首先，我们创建一个带过渡效果的CSS类：.has-transition { -webkit-transition: margin-left 1s ease-out; -moz-transition: margin-left 1s ease-out; -o-transition: margin-left 1s ease-out; transition: margin-left 1s ease-out; }
然后继续执行：// our element that has a "has-transition" class by default var $targetElem = $('#targetElemId');
// remove the transition class
$targetElem.removeClass('has-transition');
// change the property expecting the transition to be off, as the class is not there
// anymore
$targetElem.css('margin-left', 100);
// put the transition class back
$targetElem.addClass('has-transition');
// change the property
$targetElem.css('margin-left', 50);然而，这个执行无法奏效。所有改变都被缓存，只在代码块末尾加以执行。我们需要的是强制性的重排，我们可以通过以下更改加以实现：
// remove the transition class $(this).removeClass('has-transition');
// change the property
$(this).css('margin-left', 100);
// trigger a forced reflow, so that changes in a class/property get applied immediately
$(this)[0].offsetHeight; // an example, other properties would work, too
// put the transition class back
$(this).addClass('has-transition');
// change the property
$(this).css('margin-left', 50);现在代码如预期那样执行了。
有关性能优化的实际建议
总结现有的资料，我提出以下建议：
创建有效的HTML和CSS文件，不要忘记指明文档的编码方式。样式应该包含在标签内，脚本代码则应该加在标签末端。
尽量简化和优化CSS选择器（这种优化方式几乎被使用CSS预处理器的开发者统一忽视了）将嵌套程度保持在最低水平。以下是CSS选择器的性能排名（从最快者开始）
1. 识别器:#id
2. 类:.class
3. 标签：div
4. 相邻兄弟选择器：a + i
5. 父类选择器：ul> li
6. 通用选择器：*
7. 属性选择：input[type="text"]
8. 伪类和伪元素：a:hover你应该记住，浏览器在处理选择器时依照从右到左的原则，因此最右端的选择器应该是最快的：#id或则.class：div * {...} // bad .list li {...} // bad .list-item {...} // good #list .list-item {...} // good * 1.在你的脚本代码中，尽可能减少DOM操作。缓存所有东西，包括元素属性以及对象（如果它们被重用的话）。当进行复杂的操作时，使用“孤立”元素会更好，之后可以将其加到DOM中（所谓“孤立”元素是与DOM脱离，仅保存在内存中的元素）。
2.如果你使用jQuery来选择元素，请遵从jQuery选择器最佳实践方案。
3.为了改变元素的样式，修改“类”的属性是奏效的方法之一。执行这一改变时，处在DOM渲染树的位置越深越好（这还有助于将逻辑与表象脱离）。
4.尽量只给位置绝对或者固定的元素添加动画效果。
5.在使用滚动时禁用复杂的悬停动效（比如，在中添加一个额外的不悬停类）。读者可以阅读关于这个问题的一篇文章。
想了解更多的细节问题，大家也可以看看这两篇文章：
1,How browsers work？
2,Rendering: repaint, reflow/relayout, restyle
绛旓細鍓嶇寮鍙戣呴渶瑕鎺屾彙鐨勬妧鑳戒富瑕佸寘鎷細HTML銆丆SS銆丣avaScript锛屼互鍙婄浉鍏崇殑鍓嶇妗嗘灦鍜屽伐鍏枫侶TML鏄缃戦〉寮鍙鐨勫熀纭锛屽畠鐢ㄤ簬鏋勫缓缃戦〉鐨勭粨鏋勩侶TML鏄竴绉嶆爣璁拌瑷锛岄氳繃鏍囩鏉ユ弿杩扮綉椤电殑鍚勪釜閮ㄥ垎锛屽鏍囬銆佹钀姐侀摼鎺ャ佸浘鐗囩瓑銆傛帉鎻TML鏄墠绔紑鍙戠殑鍩虹锛岄渶瑕佺啛鎮夊父鐢ㄧ殑HTML鏍囩鍜屽睘鎬с侰SS鏄敤浜庢弿杩扮綉椤垫牱寮忕殑璇█銆
绛旓細鐩戞帶缃戠粶璇锋眰銆佹煡鐪嬪拰淇敼DOM缁撴瀯绛夈傜啛缁冧娇鐢ㄨ繖浜涘伐鍏峰彲浠ュぇ澶ф彁楂樺紑鍙戞晥鐜囥傛帉鎻′互涓婃妧鑳藉悗锛屽墠绔紑鍙戣呭彲浠ュ叿澶囨瀯寤虹幇浠缃戦〉鍜屽簲鐢ㄧ殑鍩烘湰鑳藉姏銆傞殢鐫鎶鏈殑涓嶆柇杩涙锛屽墠绔鍩熻繕鏈夎澶氬叾浠栨柊鎶鏈拰瓒嬪娍锛屽鍓嶇瀹夊叏銆佹ц兘浼樺寲銆丳WA绛夛紝杩欎簺涔熸槸鍓嶇寮鍙戣呴渶瑕鍏虫敞鍜屽涔犵殑鏂瑰悜銆
绛旓細2. 浜や簰鍔熻兘寮鍙戯細闄や簡闈欐椤甸潰锛屽墠绔紑鍙戣繕闇瑕佸疄鐜缃戦〉涓婄殑鍚勭浜や簰鍔熻兘锛屽鐐瑰嚮鎸夐挳銆佽〃鍗曟彁浜ょ瓑銆傝繖闇瑕侀氳繃JavaScript鏉ュ疄鐜般鍓嶇寮鍙戣呴渶瑕浜嗚ВJavaScript鍙婂叾鐩稿叧鐨勬鏋跺拰搴擄紝浠ュ疄鐜板鏉傜殑浜や簰閫昏緫鍜屽姩鎬佸唴瀹广3. 鎬ц兘浼樺寲涓庣淮鎶わ細鍓嶇寮鍙戣呰繕闇瑕佸叧娉ㄧ綉椤电殑鎬ц兘浼樺寲锛屽寘鎷姞杞介熷害銆佸搷搴旈熷害绛夈傛澶栵紝...
绛旓細浠婂ぉ鎴戣灏嗗叧娉ㄧ偣鏀惧埌缃戦〉娓叉煋浠ュ強鍏堕噸瑕佹т笂銆傝櫧鐒跺凡缁忔湁寰堝鏂囩珷鎻愬埌杩囪繖涓富棰樹簡锛屼絾澶ч儴鍒嗕俊鎭兘鏄浂纰庣殑鐗囨銆備负浜嗘濊冭繖浠朵簨鎯咃紝鎴闇瑕鐮旂┒寰堝淇℃伅鐨勬潵婧愩傝繖涔熷氨鏄负浠涔堟垜瑙夊緱鎴戝簲璇ュ啓杩欑瘒鏂囩珷鐨勫師鍥犮傛垜鐩镐俊杩欑瘒鏂囩珷瀵规柊鎵嬩細寰堟湁鐢紝骞朵笖瀵规兂鍒锋柊鍜屽珐鍥轰粬浠凡缁忎簡瑙ｇ殑涓滆タ鐨勯珮鎵嬩篃鍚屾牱閫傜敤銆傛覆鏌...
绛旓細鍓嶇涓昏璐熻矗缃戦〉鐨勫紑鍙戝拰璁捐銆備竴銆佸墠绔紑鍙戠殑鍩烘湰浠诲姟 鍓嶇寮鍙戜富瑕佽礋璐ｅ垱寤哄拰缁存姢缃戦〉鐨勮瑙夊憟鐜般佺敤鎴蜂綋楠屼互鍙婁氦浜掑姛鑳姐傚叿浣撴潵璇达紝鍓嶇寮鍙戠殑宸ヤ綔鍖呮嫭浠ヤ笅鍑犱釜鏂归潰锛氫簩銆佸叿浣撳伐浣滃唴瀹 1. 璁捐鍜屽竷灞锛鍓嶇寮鍙戣呴渶瑕鏍规嵁璁捐绋垮疄鐜扮綉椤电殑甯冨眬锛岀‘淇椤甸潰鍦ㄤ笉鍚岃澶囧拰娴忚鍣ㄤ笂鐨勬樉绀烘晥鏋滀竴鑷淬2. 缂栧啓浠ｇ爜...
绛旓細鍏舵锛孋SS锛堝眰鍙犳牱寮忚〃锛夌敤浜庢帶鍒缃戦〉鐨勬牱寮忓拰甯冨眬銆傚畠瀹氫箟浜嗙綉椤典腑鍏冪礌鐨勫瑙傦紝濡傞鑹层佸瓧浣撱佸ぇ灏忋侀棿璺濈瓑銆侰SS浣垮緱寮鍙戣鍙互瀵圭綉椤佃繘琛岀編鍖栵紝骞朵娇鍏跺湪涓嶅悓璁惧鍜屾祻瑙堝櫒涓婂憟鐜颁竴鑷寸殑鏍峰紡銆傜啛鎮塁SS骞惰兘澶熺啛缁冭繍鐢ㄥ悇绉嶉夋嫨鍣ㄣ佸睘鎬у拰甯冨眬鎶宸э紝鏄鍓嶇寮鍙涓笉鍙垨缂虹殑涓閮ㄥ垎銆傛帴涓嬫潵锛孞avaScript鏄竴绉嶈剼鏈...
绛旓細浜屻佸紑鍙戝姩鎬佷氦浜掑姛鑳 鍓嶇寮鍙戜笉浠呰瀹炵幇闈欐椤甸潰鐨勫睍绀猴紝杩橀渶瑕佸疄鐜伴〉闈㈢殑鍔ㄦ佷氦浜掑姛鑳姐備緥濡傦紝鍝嶅簲鐢ㄦ埛鐨勭偣鍑汇佽緭鍏ョ瓑鎿嶄綔锛屽疄鐜版暟鎹殑瀹炴椂鏇存柊鍜岄〉闈㈢殑瀹炴椂鍙嶉绛夈傝繖闇瑕佸墠绔紑鍙戣鐔熺粌鎺屾彙JavaScript鍙婂叾鐩稿叧妗嗘灦鍜屽簱锛屽React銆乂ue绛夛紝浠ュ疄鐜伴珮鏁堢殑鍓嶇寮鍙戙備笁銆佷紭鍖栭〉闈㈡ц兘鍜岀敤鎴蜂綋楠 鍓嶇寮鍙戣呰繕闇瑕...
绛旓細浣滀负涓鍚峸eb鍓嶇寮鍙戣锛闇瑕鎺屾彙澶氫釜鏂归潰鐨勭煡璇嗗拰鎶鑳姐備互涓嬫槸涓浜涘缓璁殑璇剧▼鍜屽涔犳柟娉曪細璇剧▼锛欻TML锛欻TML鏄缃戦〉寮鍙鐨勫熀纭锛屼綘闇瑕佸涔犲浣曚娇鐢℉TML鍏冪礌鍜屽睘鎬ф潵鏋勫缓缃戦〉缁撴瀯銆侰SS锛欳SS鏄敤浜庣編鍖栫綉椤电殑鏍峰紡琛ㄨ瑷锛屼綘闇瑕佸涔犲浣曚娇鐢–SS鏉ヨ缃綉椤电殑甯冨眬銆侀鑹层佸瓧浣撶瓑鏍峰紡銆侸avaScript锛欽avaScript鏄竴绉嶈剼鏈...
绛旓細褰撶劧闇瑕侊紒鍋歸eb鍓嶇寮鍙戝繀椤诲叿澶囩紪鍐欎唬鐮佺殑鑳藉姏銆俉eb鍓嶇寮鍙戞槸鍒涘缓鍜岃璁缃戠珯銆缃戦〉鍜屽簲鐢ㄧ殑鍓嶇鐣岄潰鍜屼氦浜掓х殑宸ヤ綔銆鍓嶇寮鍙戣呴渶瑕鎺屾彙涓绉嶆垨澶氱缂栫▼璇█锛屼互渚胯兘澶熺紪鍐欏拰瀹炵幇缃戦〉鐨勫悇绉嶅姛鑳藉拰鏁堟灉銆傚湪web鍓嶇寮鍙戜腑锛屽父鐢ㄧ殑缂栫▼璇█鍖呮嫭HTML銆丆SS鍜孞avaScript绛夈侶TML鏄綉椤电殑鍩虹鏍囪璇█锛岀敤浜庡畾涔夌綉椤电殑...
绛旓細鍏蜂綋鏉ヨ锛學eb鍓嶇寮鍙戠殑宸ヤ綔鍖呮嫭浠ヤ笅鍑犱釜鏂归潰锛欻TML/CSS寮鍙戯細HTML鏄缃戦〉鐨勫熀鏈鏋讹紝璐熻矗缃戦〉鐨勭粨鏋勫拰鍐呭锛汣SS鍒欒礋璐ｇ綉椤电殑鏍峰紡鍜岀編鍖栵紝浣跨綉椤电湅璧锋潵鏇村姞缇庤鍜屾槗浜庝娇鐢ㄣ俉eb鍓嶇寮鍙戣呴渶瑕鐔熺粌鎺屾彙HTML鍜孋SS锛岃兘澶熸牴鎹璁＄瀹炵幇缃戦〉鐨勭粨鏋勫拰鏍峰紡銆侸avaScript缂栫▼锛欽avaScript鏄竴绉嶈剼鏈瑷锛岀敤浜庡疄鐜扮綉椤电殑...
