CSS
常见CSS书写顺序
- 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.CSS3中新增属性：content cursor box-shadow border-radius box-shadow text-shadow transform background:linear-gradient… 此书写顺序可以减少浏览器reflow（回流），提升浏览器渲染dom的性能。
- 1.Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染
- 2.Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画改变的这一部分 对比可知Reflow要比Repaint更花费时间，也就更影响性能。
编写css样式时应注意： CSS选择符是从右到左进行匹配的。从右到左！所以，#nav li 我们以为这是一条很简单的规则，秒秒钟就能匹配到想要的元素，但是，但是，但是，是从右往左匹配啊，所以，会去找所有的li，然后再去确定它的父元素是不是#nav。
- 1.dom深度尽量浅。
- 2.减少inline javascript、css的数量。
- 3.使用现代合法的css属性。
- 4.不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素。
- 5.避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。后代选择符;#tp p{} 子选择符：#tp>p{}
- 6.避免使用通配符，举一个例子，.mod .hd *{font-size:14px;} 根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配.hd（就是要对dom树上的所有节点进行遍历他的父级元素）,然后匹配.mod,这样的性能耗费可想而知.
浏览器
浏览器渲染流程
- 1.解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
- 2.构建render树：DOM树和CSS树合并之后形成的render树
- 3.布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置
- 4.绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上 浏览器功能
- 1.输入网址。
- 2.浏览器查找域名的IP地址。
- 3.浏览器给web服务器发送一个HTTP请求
- 4.网站服务的永久重定向响应
- 5.浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。
- 6.服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。
- 7.服务器发回一个HTML响应
- 8.浏览器开始显示HTML
- 9.浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等… 现有浏览器内核
- 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内核 此文为网络文章阅读后的整合，文本部分有所引用网络原文
