也没什么好讲的,这里面的水有些深了,我只能写些浅薄的东西啦~
讲一下过程吧!
1、输入url(完整的url包括协议、域名、端口号、路径等)
2、浏览器查找当前的url是否存在缓存,并对比缓存是否过期(这里会涉及到服务器返回的状态码304,强制缓存cache-control、Expires,对比缓存last-Modified、Etag(资源实体标识,是哈希字符串)等)
3、DNS解析(域名解析):域名解析过程就是通过域名去查找与之对应的服务器IP的过程
(1)浏览器先检查本地hosts文件是否有这个url映射的IP,有就调用这个IP地址,完成域名解析
(2)如果没有找到,则去找本地DNS解析器缓存,查找到则返回
(3)再没找到,就去查找本地DNS服务器,找到返回
(4)如果还没找到,就向根域名服务器查找,没找到就转发给下级,层层查找,直达查找到IP
4、建立TCP连接(三次握手建立连接)
(1)第一次握手,建立连接,浏览器发生syn包给服务器,等待服务器确认;
(2)第二次握手,服务器收到syn包,确认浏览器syn包,并发送syn+ack包给浏览器;
(3)浏览器收到服务器syn+ack包,向服务器发送确认包,发送完毕,建立连接;
(4)完成三次握手,浏览器和服务器就可以开始传送数据啦~
5、浏览器向服务器发送http请求
http1.0请求方法:GET POST HEAD
http1.1新增请求方法:OPTIONS PUT DELETE TRACE CONNECT
6、服务器响应http请求(包含状态码、响应头、响应体)
(1)常见状态码:
200:请求数据成功,并返回
301:永久重定向,表示旧地址的资源被永久的移除(资源不可访问)
302:临时重定向,表示旧地址的资源还可以访问,临时跳转到新地址
304:资源未修改,可用缓存资源
400:客户端请求语法错误
401:请求需要身份认证
403:服务器收到请求,但拒绝提供服务
404:请求资源不存在
405:请求方法被服务器禁止
500:服务器错误
(2)响应体返回给浏览器的资源(html、css、js、图片等)
7、浏览器渲染页面
(1)解析html构建DOM和CSSOM树,构建DOM树期间,如果遇到JS,阻塞DOM树和CSSOM树的构建,优先加载js文件(js会阻塞页面加载,所以一般放到html底部进行加载),再加载DOM树和CSSOM树
(2)构建渲染树(render Tree)
(4)页面渲染过程的重绘(repaint)和重排(reflow),页面渲染完毕后,如若js操作了DOM,浏览器会对页面进行重绘和重排
重排(reflow),也叫Layout(回流):元素的内容、结构、位置或尺寸发生变化时,需要重新计算样式和渲染树,会触发重排
重绘(repaint):元素发生改变,如背景颜色、边框颜色、文字颜色等,会触发重绘
所以重排比重绘成本高
暂时写这些吧,有不对或缺失的欢迎补充~