浏览器渲染原理及css书写顺序

浏览器内核

(1)Trident内核，由于被微软采用，并得益于微软操作系统的普及，以前几乎一统天下，所以又称为“IE内核”，主要浏览器有IE系列浏览器；

(2)Gecko内核，因为被Mozilla FireFox浏览器采用并得到开发者的进一步丰富，又被称为“Firefox内核”；

(3)WebKit内核，是Safari浏览器使用的内核，由Apple研发。 Google Chrome、Opera及各种国产浏览器高速模式也使用Webkit作为内核。

(4)Blink内核，由Google和Opera Software共同开发的浏览器内核，现在Chrome（28及往后版本）、Opera（15及往后版本）都将Webkit内核换成了Blink内核。

浏览器主要组件结构：

浏览器功能

1、输入网址。
2、浏览器查找域名的IP地址。
3. 浏览器给web服务器发送一个HTTP请求
4. 网站服务的永久重定向响应
5. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。
6. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。
7. 服务器发回一个HTML响应
8. 浏览器开始显示HTML
9. 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

浏览器的渲染流程

①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构

②构建render树：DOM树和CSS树合并之后形成的render树。

③布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。

④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

css书写顺序

目的： 减少浏览器reflow（回流），提升浏览器渲染dom的性能

1>.Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
2>.Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。
Reflow要比Repaint更花费时间，也就更影响性能。

（1）定位属性：position display float left top right bottom overflow clear z-index

（2）自身属性：width height padding border margin background

（3）文字样式：font-family font-size font-style font-weight font-varient color

（4）文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

（5）css3中新增属性：content box-shadow border-radius transform……

注意

（1）dom深度尽量浅。
（2）减少inline javascript、css的数量。
（3）使用现代合法的css属性。
（4）不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素。
（5）避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。
（6）避免使用通配符
（7）display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。
（8）display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。
（9）有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

参考：
网页在浏览器上的渲染过程