输入网址到页面出现这个过程发生了什么?(TCP三次握手及浏览器解析)

1.输入网址按下回车到看到网页的过程

1.域名解析(看一下浏览器要和哪个服务器的哪个接口建立连接)
2.发起TCP三次握手
3.浏览器发起http请求
4.服务器响应http请求,返回html文件
5.浏览器解析html文件,并请求html中的资源
6.服务器端返回资源,浏览器对页面进行渲染呈现给客户*

2.TCP三次握手

一:浏览器向服务器端发送一个SYN码(同步序列码),数据项设为j,等待服务器确认
二:服务器接收到了SYN包之后,会将syn包的数据项修改为j+1形成一个确认包(ack包),但是服务器又想知道浏览器有
没有收到它发送的ack包,就会再同时发送一个SYN包让浏览器确认
三:浏览器收到了服务器发来的两个包之后,会将SYN包变成一个确认包(ack包)发给服务器端,服务器端收到后就能建立tcp连接了。

3.浏览器加载和渲染html的顺序

浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的但是遇到js脚本或者是外部css样式的时候,下载过程会启用新的连接进行下载,这个过程是同步的,意味着会停止之后元素的下载,阻塞文档的解析,当js文件解析完之后才会恢复文档解析。css样式表下载完之后会和之前的样式表一起解析,渲染之前的所有元素。

:两种外部资源是阻塞脚本执行,从而阻塞渲染的。
js会阻塞文档的解析,因为浏览器需要一个稳定的DOM树结构,js代码可能会直接改变DOM树结构
js可能会使用到元素的样式,外部css样式不解析的话可能js文件会出错

解决阻塞:开发者可以将脚本标识为defer,以使其不阻塞文档解析,并在文档解析结束后执行。Html5增加了标记脚本为异步的选项,以使脚本的解析执行使用另一个线程。

现代浏览器的优化(预解析):执行脚本的时候开启一个新线程解析剩下的文档

猜你喜欢

转载自blog.csdn.net/SHAWN2016/article/details/81748682
今日推荐