为什么要弄清楚浏览器内核
在使用CSS3的过程中，我们经常会遇到要给某个属性加浏览器前缀的问题；原因就是各个浏览器的不同版本对每个CSS3的属性的支持程度是不一样的，因此我们在写CSS3样式时要加上表示不同浏览器内核的前缀；这样浏览器就能更好地支持我们编写的样式了。
–（PS：其实使用预编译语言less的好处之一就是不用我们自己写这些繁琐的前缀哟！）
最重要的是；浏览器内核决定了浏览器如何对网页进行渲染；不同的内核产生的渲染效果可能就不同。
不同浏览器内核
| 内核 | Trident | Gecko | WebKit | Presto |
|---|---|---|---|---|
| 对应浏览器 | IE、傲游等 | Firefox、Netscape6至9 | Safari和Chrome及android原生 | Opera 7.0及以上 |
| 优点 | 市场占额大 | 支持复杂效果与浏览器扩展接口 | 源码结构清晰，渲染速度快 | 处理快，兼容好 |
| 缺点 | W3C标准支持与安全性差 | 消耗资源多 | 兼容性差 | 缺省 |
浏览器渲染原理
- 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
- 浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件；
- 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
- 浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
- 浏览器在代码中发现一个< img >标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
- 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
- 浏览器发现了一个包含一行Javascript代码的< script >标签，赶快运行它；
8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码； - 终于等到了< /html >的到来，浏览器泪流满面……
- 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下标签的CSS路径；
- 浏览器召集了在座的各位< span > < ul > < li >们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
