2019.7.12

146 阅读4分钟

从输入一个网址到浏览器显示页面经历的过程

日常生活中,我们经常使用各种浏览器访问各大网站,但是对于这几秒的跳转,你又了解多少呢?

1.输入网址

网址,我们又称作URL,即统一资源定位符,通俗地说,它是用来指出某一项信息的所在位置及存取方式。

2.缓存解析

当我们输入网址之后,浏览器首先会从自己的缓存中去寻找,如果有的话就显示页面,如果没有,就会进行下一步-域名解析

  1. 域名解析 由DNS服务器进行域名解析,转换成相应的ip地址,之后由浏览器发出http请求,发送请求头。

4.三次握手 TCP进行三次握手,与服务器建立连接获取服务,服务器发送响应头和响应体。

5.页面渲染 浏览器获取服务器发送的响应头和响应体,进行渲染。

浏览器的渲染机制

浏览器的渲染树是由HTML的DOM树和CSS的CSS树组合而成,了解浏览器的渲染机制,有助于我们在写外部样式时选择合适的位置让浏览器以最快的速度将文件加载完毕。

HTML树

我们都知道HTML是由标签组成的,这些标签由上往下,由内往外构成了html的dom树,如图所示:

CSS树

在我们写好一个HTML文件时,我们需要设计它的样式,让她能达到我们预期的设计结果,我们规定每个标签的样式,也因此生成了CSS渲染树。

渲染树 当HTML树和CSS树都具备之后,便会构建出渲染树。

DOM 树与 CSSOM 树合并后形成渲染树。

渲染树只包含渲染网页所需的节点。

布局计算每个对象的精确位置和大小。

最后一步是绘制,使用最终渲染树将像素渲染到屏幕上。

简单总结HTTP协议

HTTP 超文本传输协议,是一种建立在TCP上的无状态连接,整个基本的工作流程是客户端发送一个HTTP请求,说明客户端想要访问的资源和请求的动作,服务端收到请求之后,服务端开始处理请求,并根据请求做出相应的动作访问服务器资源,最后通过发送HTTP响应把结果返回给客户端。

http请求

HTTP请求由状态行、请求头、请求正文三部分组成:

状态行:包括请求方式Method、资源路径URL、协议版本Version;

请求头:包括一些访问的域名、用户代理、Cookie等信息;

请求正文:就是HTTP请求的数据。

http响应

HTTP响应由三部分组成:状态行、响应头、响应正文;

状态行:包括协议版本Version、状态码Status Code、回应短语;

响应头:包括搭建服务器的软件,发送响应的时间,回应数据的格式等信息;

响应正文:就是响应的具体数据。

常见状态码的含义

    200---OK/请求已经正常处理完毕

    301---/请求永久重定向

    302---/请求临时重定向

    304---/请求被重定向到客户端本地缓存

    400---/客户端请求存在语法错误

    401---/客户端请求没有经过授权

    403---/客户端的请求被服务器拒绝,一般为客户端没有访问权限

    404---/客户端请求的URL在服务端不存在

    500---/服务端永久错误

    503---/服务端发生临时错误

三次握手和四次挥手

tcp的三次握手是客户机与服务器建立连接的机制

首先由客户端向服务器端发起请求(syn包)并等待服务器响应。

服务器接收到客户机发送的请求之后,向客户机发送确认包。

在客户机收到服务器发送的确认包之后,再向服务器发送一个确认的确认,完成三次握手(三次握手之间没有数据传输)。

在经过三次握手之后,客户机与服务器建立连接,开始传输数据。

TCP的四次挥手是客户机服务器断开连接的机制

首先客户机向服务器发送报文,表达我要断开连接(第一次挥手)。

服务器在收到客户机发送的断开报文后,向客户机发送确认报文(第二次挥手)。

同时,服务器向客户机发送断开请求(第三次挥手)。

客户机收到服务器发送的断开请求,连接断开(第四次挥手)。