浏览器渲染和优化：重绘（Repaint）和重排（Reflow）
浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML,也包括PDF，image及其他格式。用户用URL来指定所请求资源的位置，通过DNS查询，将网址转换为IP地址。
浏览器工作流程：
1.输入网址。
2.浏览器查找域名的IP地址
3,浏览器给WEB服务器发送一个HTTP请求
4.网站服务的永久重定向响应
5.浏览器跟踪重定向地址（现在浏览器知道了要访问的正确地址，所以它会发送另一个获取请求）
6，服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。
7.服务器发回一个HTML响应
8.浏览器开始显示HTML
9,浏览器发送请求，以获取嵌入在HTML中的对象
浏览器的渲染过程：
1.处理html生成Dom（Document Object Model） Tree
2.处理css生成CSSOM（CSS Object Model） Tree
3.在文档对象模型和CSS对象模型之上，创建一棵由一组待生成渲染的对象组成的渲染树，即RenderTree
4.对Render树进行布局计算，即对渲染树上的每个元素，计算它的坐标，称之为布局。
5.绘制即Painting,渲染树上的元素最终展示在浏览器里
关于浏览器的优化，首先我们需要先了解一下重绘和重排。
重绘（Repaint）：布局没有发生改变，改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)
重排（Reflow）：当DOM变化影响了元素的几何属性（宽、高改变等等），浏览器此时需要重新计算元素几何属性，并且页面中其他元素的几何属性可能会受影响这样渲染树就发生了改变，也就是重新构造RenderTree渲染树
触发重排的情况：
（1）页面初始渲染
（2）DOM操作（元素添加、删除、修改或者元素顺序的改变）
（3）改变元素位置，改变元素尺寸（宽、高、内外边距、边框等），改变元素内容（文本或图片等）
（4）浏览器窗口的操作（缩放，滚动）
（5）添加或删除样式表
（6）更改“类”的属性
（7）伪类激活（悬停）
优化：
（1）减少重绘和重排
（1）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。
（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
（4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
（2）编写CSS注意事项
CSS选择符是从右到左进行匹配的，切记！所以，#nav li 我们以为这是一条很简单的规则，秒秒钟就能匹配到想要的元素，但是，是从右往左匹配啊，所以，会去找所有的li，然后再去确定它的父元素是不是#nav。，因此，写css的时候需要注意：
（1）dom深度尽量浅。
（2） 减少inline javascript、css的数量。使用现代合法的css属性。
（3） 不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素。
（4）避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。后代选择符;#tp p{} 子选择符：#tp>p{}
（51） 避免使用通配符，举一个例子，.mod .hd *{font-size:14px;} 根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配.hd（就是要对dom树上的所有节点进行遍历他的父级元素）,然后匹配.mod,这样的性能耗费可想而知.
（3）Script标签的位置
首先，我们需要了解Javascript的加载和执行的特点：
（1）载入后马上执行，按顺序从上向下执行；
（2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。
减少 JavaScript 对性能的影响的方法：
（1）将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。
（2）尽可能地合并脚本。页面中的script标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
（3）采用无阻塞下载 JavaScript 脚本的方法：
a.使用script标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
b.使用动态创建的script元素来下载并执行代码；
(4) 减少http请求的次数
根据功能和数据加载流程合并相应的js,css,images 减少其请求的次数
