0.DNS(domain name system)解析(网址到IP地址的转换)
打开浏览器,输入一个域名。发出一个DNS请求到本地DNS服务器(本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动)。
本地DNS服务器会首先查询它的缓存记录,如果缓存中有此条记录,就可以直接返回结果。如果没有,本地DNS服务器还要向DNS根服务器进行查询。
根DNS服务器没有的话,会告诉本地DNS服务器一个域服务器的地址。
本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,告诉本地DNS服务器,你的域名的解析服务器的地址。
最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。
1.浏览器查看缓存,如果有缓存且新鲜,转到转码步骤。如果无缓存,发起新请求,如果有缓存但已失效,请求服务端验证。
2.浏览器解析协议,主机,端口,path, 组装一个http请求报文
https协议是对http用ssl协议(secure socket layer)加密,因为http报文是明文,有泄露的风险
3.获取主机ip地址,向目标ip地址,端口建立TCP连接,过程如下:
①客户端发送seq=x (标志位SYN=1, ACK=0)
②服务端发送ack=x+1 seq=y (标志位SYN=1,ACK=1)
③客户端发送ack=y+1
4.TCP连接后发送HTTP请求(请求行put,post等,请求头,请求正文(如JSON数据等))
5.服务器接受请求并解析,转发到处理程序
6.检查http请求头是否包含缓存验证信息
7.处理程序读取完整请求,准备HTTP响应
8.服务器将响应报文(状态码,响应报头,响应报文(HTML,CSS,JS,图片等))通过TCP连接返回给浏览器
状态码:
1xx:请求已接收,继续处理
2xx:成功--请求已被接受,理解
3xx:重定向--要完成请求必须进行进一步操作
4xx:客户器端错误
5xx:服务器端错误
200:请求成功 204:请求执行成功,但是没有数据,浏览器不用刷新页面.也不用导向新的页面
301:被请求的资源已永久移动到新位置(永久重定向)资源已经不存在 302:请求的资源现在临时从不同的 URI 响应请求(暂时重定向),资源仍然存在
304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容并没有改变,则服务器应当返回这个状态码
400:语义有误或者请求参数错误 401:请求需要用户授权 403:禁止访问 404:找不到
500:服务器出错
9.浏览器接收响应,根据情况选择关闭连接或者保留重用,关闭TCP流程:
①浏览器发送FIN,seq=x,停止发送数据
②服务端发送ack=x+1
③服务端发送FIN, seq=y, 停止发送数据
④浏览器发送ack=y+1
10.浏览器检查响应码状态
11.如果资源可缓存,进行缓存
12.对响应进行解码
13根据资源类型决定如何处理(如果为html,解析html结构,加载JS, CSS)
14.显示页面
页面解析过程:
解析HTML,构建DOM树(这里遇到外链,此时会发起请求)
解析CSS,生成CSS规则树
合并DOM树和CSS规则,生成render树
布局render树(Layout/reflow),负责各元素尺寸、位置的计算
绘制render树(paint),绘制页面像素信息
浏览器会将各层的信息发送给GPU,GPU将各层合成(composite),显示在屏幕上
在上述渲染过程中,前3点可能要多次执行,比如js脚本去操作dom、更改css样式时,浏览器又要重新构建DOM、CSSOM树,重新render,重新layout、paint;
Layout在Paint之前,因此每次Layout重新布局(reflow 回流)后都要重新出发Paint渲染,这时又要去消耗GPU;
Paint不一定会触发Layout,比如改个颜色改个背景;(repaint 重绘)
reflow(回流): 根据Render Tree布局(几何属性),意味着元素的内容、结构、位置或尺寸发生了变化,需要重新计算样式和渲染树;
repaint(重绘): 意味着元素发生的改变只影响了节点的一些样式(背景色,边框颜色,文字颜色等),只需要应用新样式绘制这个元素就可以了;reflow回流必定引起repaint重绘,重绘可以单独触发
为什么一再强调将css放在头部,将js文件放在尾部
构建Render树需要DOM和CSSOM,所以HTML和CSS都会阻塞渲染。所以需要让CSS尽早加载JS会阻塞浏览器的解析,需等待脚本下载完成并执行后才会继续解析HTML。
async 异步加载,加载完立即执行
defer 异步加载,但是得等到所有元素加载完成之后再执行