1. DNS域名解析
浏览器DNS缓存 ->操作系统DNS缓存 ->hosts缓存 ->域名服务器
2. 三次握手建立TCP连接
客户端:ACK=0,SYN=1
服务器:ACK=1,SYN=1
客户端:ACK=1
3. 向服务器发起Http请求
- 查询字符串,get请求在URL中,post在http消息主体中
- get请求可被浏览器缓存,post不会
- get请求可以被保存在浏览器的历史记录中,post不可
- get请求可被收藏,post不可
- get请求有长度限制,post无
GET请求时,浏览器会将header和data一起发送,服务器响应200(正常处理)
POST请求,浏览器先发送header,服务器回100(继续);再发送data,服务器回应200
4. 服务器端响应
状态码 | 含义 |
---|---|
1xx | 收到请求,继续处理 |
2xx | 请求已被接受 |
3xx | 重定向,完成请求必须进一步操作 |
4xx | 客户端出错 |
5xx | 服务器端出错 |
常见 | 含义 |
---|---|
200 | 请求已完成,所请求的资源返回客户端 |
301 | 重定向,请求的网页已被永久移动到新位置,会跳转到新位置 |
302 | 重定向,请求的网页暂时移动,会跳转到新位置 |
304 | 上次请求后,网页未修改过,服务器返回响应时,不会返回网页内容。节省带宽和开销 |
400 | 错误请求,服务器不理解请求的语法 |
401 | 要求身份验证 |
403 | 服务器拒绝请求 |
404 | 找不到网页 |
500 | 服务器内部错误 |
503 | 服务器不可用 |
504 | 网关超时 |
505 | http协议版本不支持 |
5. 浏览器解析Html
- 构建DOM树
- 构建CSSOM树
6. 浏览器进行页面渲染
当通过js修改DOM和CSS,会导致重新布局(layout)或渲染(repaint)
重新布局(layout)也称回流(reflow):元素的内容,结构,位置,尺寸变化,重新计算样式和渲染树
重绘(repaint)元素发生的改变只是影响了样式,如颜色,边框,这时只需重新绘制元素即可