浏览器中输入 url 到 页面渲染:
1. 解析url,拿到域名
2. DNS 解析,域名解析。DNS 就是 域名和IP对应的数据库,域名和IP之间是一一对应的关系,域名解析有专门的域名解析服务器。整个过程是自动完成的。
DNS 解析会经过以下几个步骤:
1)查询浏览器缓存
2) 如果在浏览器中没有找到缓存,会查询系统缓存,这一步当中,是查询 host 文件,这个文件是保存了以前访问网址的域名和IP 数据,就相当于本地的IP 数据库,如果找到了,就直接获取目标主机的IP 地址;如果没有找到,就会进入第三步
3) 查询路由缓存。路由器有自己的 DNS 缓存,可能有相关的内容,如果还是没有,就进入下一步
4) 递归查询, 从根域名服务器到顶级域名服务器,再到极限域名服务器依次搜索对应目标域名的IP
通过以上查找,就能找到对应域名的 IP
3. TCP 三次握手
第一次握手:客户端向服务器发送请求,等待服务器的确认
第二次握手:服务器收到请求并确认,回复一个指令
第三次握手:客户端收到服务器的指令之后,并返回一个指令。
4. 请求和传输数据
比如通过 get 请求访问一个网址,通过抓包可以看到,请求网址,请求方法,远程地址以及状态码,http 版本等,也包括请求头,响应头等内容。
响应头中有个 setCookie 的信息,这就说明浏览器当中没有关于这个网址的 cookie 信息,当我们下一次访问同样的网站的时候,就可以看到在请求头中包含了这个 cookie信息。
cookie 可以用来保存一些有用的信息,cookie 如果是首次访问,会提示服务器建立用户缓存信息,如果不是,可以利用 cookie 对应键值找到相应缓存。缓存中放着用户名,密码和一些用户设置等,通过这种 get 请求和响应,可以将目标服务器上的目标文件传输到浏览器进行渲染。
5. 浏览器渲染页面
客户端拿到服务器传输过来的文件后,找到 html 和 ml,me 文件,通过 ml 和 me 文件,浏览器就知道要用页面渲染引擎来处理 html 文件,
1) 浏览器解析html 源码,创建一个 dom 树。
在 dom 树中,每一个 html 标签都是一个节点,每一个文本,也会有一个对应的文本节点。
2) 浏览器解析 css 代码,计算出最终的样式数据,形成 css 结构树。 (其中 dom 树 和 css 结构树是并行构建)
首先会忽略非法的 css 代码,之后按照浏览器默认设置,用户设置,外联样式,内联样式,html 中的style 样式顺序进行渲染
3) 利用 dom 树 和 css 结构树 构建 一个渲染树
渲染树和 dom 有点像,但是也有区别,dom 树完全和 html 标签一一对应,而渲染树会忽略掉不需要渲染的元素,比如,hide,display:none 的元素,而且一大段的文本在渲染树中都是一个独立的节点。渲染树中的每一个节点都存储有对应的css 属性
4)浏览器根据渲染树直接把页面绘制到屏幕上。