浏览器输入url后回车展开过程

当你在浏览器中输入一个URL并敲下回车后,浏览器会执行一系列步骤来访问并展示网页。下面是浏览器访问网页的一般流程:

  1. DNS解析 :浏览器首先会提取URL中的主机名,然后向DNS服务器发送请求将主机名解析为对应的IP地址**。这个IP地址用于建立与服务器的连接。**

  2. 建立TCP连接使用获得的IP地址,**浏览器会通过TCP协议与服务器建立连接。**这个过程包括三次握手,确保客户端和服务器之间的连接可靠。

  3. 发送HTTP请求一旦建立了TCP连接,浏览器会发送一个HTTP请求给服务器。 该请求包含了需要访问的资源的类型(如HTML、CSS、JavaScript等)以及其他的请求头信息。

  4. 服务器处理请求服务器接收到请求后 ,会根据请求的内容和路径,找到对应的资源文件 。服务器可能会执行一些处理逻辑,如动态生成内容

  5. 接收响应服务器处理完请求后 ,会生成一个HTTP响应 ,其中包含了请求的资源以及其他的响应头信息。服务器将这个响应发送回浏览器。

  6. 下载资源浏览器接收到服务器发送的响应后,会开始下载响应中的资源文件如HTML、CSS、JavaScript、图片等。

  7. 解析文档 :**一旦资源文件被下载完毕,浏览器会对HTML文件进行解析,构建DOM树。**同时,还会解析CSS文件构建CSSOM树。

  8. 渲染页面浏览器根据DOM树和CSSOM树构建渲染树,并进行布局和绘制,最终将页面内容显示在屏幕上。

  9. 执行JavaScript如果HTML中包含了JavaScript代码,浏览器会执行这些代码,对页面进行交互和动态效果的实现。

相关推荐
Nan_Shu_61425 分钟前
Web前端面试题(2)
前端
知识分享小能手31 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光2 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5202 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~2 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js