举例:在导航栏输入www.baidu.com到显示页面的过程
1.DNS解析
1、主机先向本地服务器进行递归查询。
2、本地服务器采用迭代查询。它先向一个根域名服务器(.com)查询。
3、根域名服务器告诉本地服务器，下一次应查询的顶级域名服务器(baidu.com)的IP地址。
4、本地域名服务器向顶级域名服务器(baidu.com)进行查询。
5、顶级域名服务器(baidu.com)告诉本地域名服务器，下一步应查询的权限服务器(www.baidu.com)的IP地址。
6、本地域名服务器向权限域名服务器(www.baidu.com)进行查询。
7、权限域名服务器(www.baidu.com)告诉本地域名服务器，所查询的主机的IP地址。
8、本地域名服务器最后把查询结果告诉主机。
2.TCP连接
浏览器与服务齐通过TCP三次握手来建立一个TCP/IP连接。由浏览器先向服务器尝试建立通信，然后服务器应答并接受客户端的请求，最后由客户端发出请求已被接受的报文。
3.发送http请求
浏览器根据URL内容生成http请求。
- 请求行:请求类型，要访问的资源、使用的http版本(例:GET http 1.0)
- 请求头:服务器要使用的附加信息
- 空行
- 主体
4.服务器处理请求并返回http响应报文
服务器将得到的html文件发送给浏览器。HTML、CSS、JS等文件
- 响应行:http协议版本号、状态码、状态消息(例:http 1.0 200 OK)
- 响应头:客户端要使用的附加信息
- 空行
- 主体
5.浏览器解析、渲染页面
浏览器是一个边解析边渲染的过程(请求外部资源时再向浏览器发出请求)。首先浏览器解析html文件(生成DOM树),然后解析css文件(生成CSSOM树)，根据DOM和CSSOM构建渲染树，最后 ，
。
6.连接结束
改变DOM的外观样式以及大小和位置。
- 页面首次渲染。
- 浏览器窗口大小发生改变。
- 元素尺寸或位置发生改变。
- 元素内容变化（文字数量或图片大小等）。
- 元素字体大小变化。
- 添加或者删除可见的DOM元素。
- 激活CSS伪类（例: :hover）。
- 设置style属性
页面中元素样式的改变并不影响它在文档流中的位置。相比重排，重绘就简单多了。(例:改变字体颜色)
reflow：浏览器要花时间去渲染，当它发现了某个部分发生了变化并且影响了布局，就需要倒回去重新渲染
repaint：如果只是改变了某个元素的背景颜色或文字颜色等，不影响元素周围或内部布局，就只会引起浏览器的repaint，重画其中一部分。
reflow比repaint更花费时间，也就更影响性能，所以在写代码时应尽量避免过多的reflow。
减少重排和重绘
- 不要一个个修改DOM的样式，应通过class修改。
- 为动画html元素添加position:absoult;那么修改它的css的文件不会重排。
- 尽量不要使用table布局。
