百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

从浏览器地址栏输入url到显示页面的步骤

myzbx 2025-02-03 14:12 16 浏览

当您在浏览器地址栏输入 URL 并按下回车键时,浏览器将启动一个过程。

网络版本

1.DNS 解析:浏览器会检查 URL 中的域名并将其发送到 DNS 服务器以获取与该域名相对应的 IP 地址。

2.建立 TCP 连接:一旦 DNS 解析完成,浏览器将与该 IP 地址建立 TCP 连接。

3.发送 HTTP 请求:一旦 TCP 连接建立,浏览器将向服务器发送 HTTP 请求。请求消息中包含请求方法 (如 GET 或 POST)、URL 和任何请求头。

4.接收响应并处理:一旦服务器收到请求,它将发送 HTTP 响应。响应消息包含状态码、响应头和响应体。浏览器将接收响应并处理它。

5.渲染页面:一旦浏览器收到响应并解析它,它将使用 HTML、CSS 和 JavaScript 等语言解析页面并渲染出来。浏览器将下载和执行页面上所有的资源,如图片、样式表和脚本,以呈现出完整的页面。

6.关闭连接:最后,一旦浏览器完成渲染页面,它将关闭与服务器的连接。

这些步骤的顺序和细节可能会因浏览器和服务器的具体情况而有所不同。

基础版本

1.浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;

2.服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);

3.浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);

4.载入解析到的资源文件,渲染页面,完成。

详细简版

1.从浏览器接收url到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系)

2.开启网络线程到发出一个完整的HTTP请求(这一部分涉及到dns查询,TCP/IP请求,五层因特网协议栈等知识)

3.l从服务器接收到请求到对应后台接收到请求(这一部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)

4.后台和前台的HTTP交互(这一部分包括HTTP头部、响应码、报文结构、cookie等知识,可以提下静态资源的cookie优化,以及编码解码,如gzip压缩等)

5.单独拎出来的缓存问题,HTTP的缓存(这部分包括http缓存头部,ETagcatch-control等)

6.浏览器接收到HTTP数据包后的解析流程(解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树,然后layoutpainting渲染、复合图层的合成、GPU绘制、外链资源的处理、loadedDOMContentLoaded等)

7.CSS的可视化格式模型(元素的渲染规则,如包含块,控制框,BFCIFC等概念)

8.JS引擎解析过程(JS的解释阶段,预处理阶段,执行阶段生成执行上下文,VO,作用域链、回收机制等等)

9.其它(可以拓展不同的知识模块,如跨域,web安全,hybrid模式等等内容)

相关推荐

MORROR ART:毫无音质可言,真的只是好看而已...

今天早上我在微博上发了一条短视频,内容是某款网红音箱正在放声歌唱——这玩意就是此前曾经在网上挺火的所谓“悬浮歌词音箱”。这款产品是我同事收到的礼品,但她嫌在家里放着没用,所以拿到公司里做我们的拍摄道具...

「JS优化篇」你的 if - else 代码肯定没我写的好

作者:小生方勤转发链接:https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA前言最近部门在对以往的代码做一些优化,我在代码中看到一连串的if(){}el...

细聊微内核架构在前端的应用「干货」

作者:semlinker转发链接:https://mp.weixin.qq.com/s/ywc98dS4TVB4t3L2tIyk8g一、微内核架构简介1.1微内核的概念微内核架构(Microke...

ThreeJS 入门教程(一) 是选择桌面的固守还是云原生?

导读:最近我购置了一台新的电脑,硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制,都使得在未来3-5年内,这个电脑会被淘汰。但是,基于云APP的使用,老的电脑是足够了,而且,我们也...

推荐三款正则可视化工具「JS篇」(正则在线调试)

作者:代码先森转发链接:https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw前言最近老王对可视化非常着迷。例如,算法可视化、正则可视化、Vue数据劫持可...

Javascript 多线程编程的前世今生

作者:jolamjiang腾讯技术工程转发链接:https://mp.weixin.qq.com/s/87C9GAFb0Y_i5iPbIL5Hzg为什么要多线程编程大家看到文章的标题《Javasc...

Pug 3.0.0正式发布,不再支持 Node.js 6/8

作者:李俊辰前端之巅转发链接:https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ前言近日,Pug3.0.0正式发布,Pug原名Jade,是由...

36个工作中常用的JavaScript函数片段「值得收藏」

作者:Eno_Yao转发链接:https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我前进的...

深入JavaScript教你内存泄漏如何防范

作者:大道至简转发链接:https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA前言一般情况下,忽视内存管理不会对传统的网页产生显著的后果。这是因为,用户刷新...

由浅入深,66条JavaScript面试知识点(七)

作者:JakeZhang转发链接:https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深,66条JavaScript面试知识点(一)由浅入深,66...

用STM32做了个电子秤,成本仅两位数,精度高!解析一下原理

俗话说得好!人在胖,秤在看!所以,我想DIY一个精度高的体重秤!并希望它不只能称体重:还能像这样称克重(可设置KG,G,最低可称100克)……这样一来,做甜品的时候,还能拿来应应急。保姆级教程,记录在...

前端开发需要了解常用7种JavaScript设计模式

作者|Deven译者|王强策划|小智转发链接:https://mp.weixin.qq.com/s/Lw4D7bfUSw_kPoJMD6W8gg前言JavaScript中的设计模式指的是...

毛姆的一个手法|王培军(毛姆作品简介)

鲁本斯画《海伦娜·芙尔曼肖像》钱锺书在《宋诗选注》文同小传中说:“具体的把当前风物比拟为某种画法或某某大画家的名作”,是“从文同正式起头”。如钱先生所举的:“峰峦李成似,涧谷范宽能”,“独坐水轩人不到...

欣赏 | 朝戈:我渴望找到直达心灵的永恒

朋友,通过艺术让我们共同感知世界的永恒与不朽。——朝戈橙色的人物117X71cm布面油画2003包与陈185cm×103cm2007年白色80cm×40cm2009年光布面油画-Light-Oilo...

Web页面如此耗电!到了某种程度,会是大损失

现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说,电池寿命都很重要。在这篇文章里,我们将讨论影响电池寿命的因素,以及作为一个web开发者,我们如何让网页耗电更少,以便用户有更多时间来关注我们的...