浏览器

一、主流浏览器及内核
1.Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
2.Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
3.WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
4.Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
二、渲染主流程
　解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
　DOM树于渲染树的区别：DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点，渲染树中的每一个节点都存储有对应的css属性
三、重绘和重排（repaints and reflows）
每个页面至少在初始化的时候会有一次重排操作。任何对渲染树的修改都有可能会导致下面两种操作：
1，重排：就是渲染树的一部分必须要更新 并且节点的尺寸发生了变化就会触发重排操作。
2，重绘：部分节点需要更新，但是没有改变他的集合形状，比如改变了背景颜色就会触发重绘。

触发重绘或者重排的情况：
(1)增加或删除可见的DOM节点
(2)元素位置改变
(3)元素尺寸改变(因为边距，填充，边框宽度、高度，高度等属性改变)
(4)内容改变
(5)设置 display: none;（重排并重绘） 或者 visibility: hidden（只有重排）
(6)移动页面中的元素
(7)增加或者修改样式
(8)用户 改变窗口大小，滚动页面等

对DOM元素进行多次修改时，减少重绘和重排版的步骤
(1)从文档流中摘除该元素
(2)对其应用多重改变
(3)将元素带回文档中