导航流程:从输入URL到页面展示,这中间发生了什么?

news2024/10/6 0:36:48

“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络、操作系统、Web 等一系列的知识。所以我在面试应聘者时也必问这道题,但遗憾的是大多数人只能回答其中部分零散的知识点,并不能将这些知识点串联成线,无法系统而又全面地回答这个问题。

从图中可以看出,整个过程需要各个进程之间的配合,所以在开始正式流程之前,我们还是先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责。

浏览器进程主要负责用户交互、子进程管理和文件储存等功能。

网络进程是面向渲染进程和浏览器进程等提供网络下载功能。

渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的,会存在一些恶意代码利用浏览器漏洞对系统进行攻击,所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里,就是为了保证系统的安全。

回顾了浏览器的进程架构后,我们再结合上图来看下这个完整的流程,可以看出,整个流程包含了许多步骤,我把其中几个核心的节点用蓝色背景标记出来了。这个过程可以大致描述为如下。

首先,浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。

然后,在网络进程中发起真正的 URL 请求。

接着网络进程接收到了响应头数据,便解析响应头数据,并将数据转发给浏览器进程。

浏览器进程接收到网络进程的响应头数据之后,发送“提交导航 (CommitNavigation)”消息到渲染进程;

渲染进程接收到“提交导航”的消息之后,便开始准备接收 HTML 数据,接收数据的方式是直接和网络进程建立数据管道;最后渲染进程会向浏览器进程“确认提交”,这是告诉浏览器进程:“已经准备好接受和解析页面数据了”。

浏览器进程接收到渲染进程“提交文档”的消息之后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态。

这其中,用户发出 URL 请求到页面开始解析的这个过程,就叫做导航。

从输入 URL 到页面展示现在我们知道了浏览器几个主要进程的职责,还有在导航过程中需要经历的几个主要的阶段,下面我们就来详细分析下这些阶段,同时也就解答了开头所说的那道经典的面试题。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/744373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux学习之系统默认打开的文件描述符、重定向

系统默认打开的文件描述符 一个进程默认会打开标准输入、标准输出、错误输出三个文件描述符。可以在/proc/PID/fd里边可以看到打开文件的描述符,PID需要改成具体的pid,比如可以使用A终端输入vim proctest之后按下回车键。 打开一个vim编辑窗口。 再打…

产品经理考PMP?开什么玩笑

早上好,我是老原。 熟悉我的粉丝都知道,我平常喜欢逛知乎,这不就关注到了一个话题 ​ 关于这个问题,老原我的回答当然是,有用。 毕竟没有人会自信到,可以只做产品经理的产品设计、需求分析、画画原型等&a…

云计算行业岗位介绍

云计算、大数据、人工智能作为新一代信息技术产业,未来发展前景不可估量,就业“前途”一片光明。 随着阿里云、腾讯云、华为云为首的国内云厂商的快速发展,释放出来的岗位也越来越多,很多有着“大厂梦”的小伙伴可以通过考取大厂…

shell脚本--------shell变量、条件表达式、流程控制

第三阶段基础 时 间:2023年7月7日 参加人:全班人员 内 容: shell变量、条件表达式、流程控制 目录 一、shell变量 二、shell条件表达式与运算符 三、break和continue语句 演示:break语句 continue语句 四、实例拓展 …

error: undefined symbol: _ZN5boost6locale4util17get_system_localeB5cxx11Eb

一、背景 UOS_x86系统,使用cmake编译了一个c的动态库,然后java通过JNI调用该动态库。编译阶段没有任何报错,但是运行该动态库时报了如下图的错误: 二、分析 目测最后这一串ZN5boost6locale4util17get_system_localeB5cxx11Eb表示…

AtcoderABC309场

A - NineA - Nine 题目大意 判断两个数是否相邻且水平排列&#xff0c;即它们在同一行并且相邻。可以直接打印或者找规律 思路分析 可以直接打印或者找规律 时间复杂度 O&#xff08;1&#xff09; 代码 #include<bits/stdc.h> using namespace std; int main(){i…

学术英语UNIT1~UNIT4知识点总结

目录 UNIT 1 1.Deciding on topic --AMI 2.Writing a working title 3.Literacy Skills--Avoiding plagiarism 4.Literacy Skills--citation and referring skills 5.Literacy Skills--quoting 6.Literacy Skills--summarizing UNIT2 1.Academic Writing -searching…

FreeRTOS(任务的创建和删除)

1. 什么是任务&#xff1f; 任务可以理解为进程/线程&#xff0c;创建一个任务&#xff0c;就会在内存开辟一个空间。 比如&#xff1a; 玩游戏、陪女朋友&#xff0c;都可以视为任务 Windows 系统中的 MarkText 、谷歌浏览器、记事本&#xff0c;都是任务。 任务通常都含有…

考虑储能的电价收益模型研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

D. Pairs of Segments

Problem - D - Codeforces 思路&#xff1a;其实它求的就是不相交区间的最大数量&#xff0c;但是它的区间是两个区间合并得到&#xff0c;所以我们可以直接将所有能合并的区间直接合并&#xff0c;然后做一遍不相交区间的最大数量&#xff0c;这样存在一种问题就是一个区间会不…

【力扣算法04】之合并 K 个升序链表- python

文章目录 问题描述示例1示例2示例3提示思路分析 代码分析完整代码额外讲解 完结 问题描述 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例1 输入&#xff1a;lists [[1,4,5],[1,3,4],[2,6]…

简要介绍 | 融合深度学习与符号逻辑:神经符号结合的探索

注1&#xff1a;本文系“简要介绍”系列之一&#xff0c;仅从概念上对神经符号结合进行非常简要的介绍&#xff0c;不适合用于深入和详细的了解。 融合深度学习与符号逻辑&#xff1a;神经符号结合的探索 Neuro-Symbolic AI 本文将探讨神经符号结合的概念、原理、研究现状、挑战…

推荐分布式系统案例课

你将获得 一线大厂分布式系统设计方法论&#xff1b; 分布式核心技术详解&#xff1b; 系统架构师面试技巧&#xff1b; 百万年薪架构师成长路径。 演示地址&#xff1a;www.runruncode.com/houduankaifa/19452.html 课程介绍 是否具备分布式系统的架构和设计能力&#xff0c;是…

typescript helloword

创建文件夹 创建ch01文件夹 新建tsconfig.json {"compilerOptions": {"strict": true,"target": "ES5"} }“tsconfig.json”是TypeScript编译器默认使⽤的配置⽂件。此例中的配置⽂件启⽤了所有的严格类型检查编译选项&#xff0c;…

经过半年的努力,终于成为了谷歌开发者专家(GDE)

大家好&#xff0c;我是拭心。 几天前&#xff0c;我终于收到了一封心心念念的邮件&#xff1a; 邮件的意思是&#xff1a;我正式成为了一名 GDE&#xff01; 这封邮件来之不易&#xff0c;背后是半年多的准备、三次公开分享和两轮英文面试&#xff0c;我想有必要做一个总结&…

VMware vSphere 7 Update 3n 下载

VMware vSphere 7 Update 3n 下载 vCenter Server & ESXi, DellEMC, HPE, Cisco, LENOVO, FUJITSU, NEC, Inspur, Hitachi Custom Image 请访问原文链接&#xff1a;https://sysin.org/blog/vmware-vsphere-7-u3/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留…

存储函数和存储过程的简单应用

创建存储函数 使用select调用 创建存储过程avg_sai 去调用他

stm32 ->HAL库重定向printf,实现串口打印

步骤 在CubeMX中初始化uart引脚 MX_USART1_UART_Init();包含printf函数的头文件stdio.h 重定义printf函数 int fputc(int ch, FILE *f) {HAL_UART_Transmit(&huart1, (uint8_t *)&ch, 1, 0xffff); return ch; }勾选Use MicroLIB 编译烧录 实现代码 /* Private i…

redis实现相关分布式锁

为什么需要分布式锁 我们知道&#xff0c;当多个线程并发操作某个对象时&#xff0c;可以通过synchronized来保证同一时刻只能有一个线程获取到对象锁进而处理synchronized关键字修饰的代码块或方法。既然已经有了synchronized锁&#xff0c;为什么这里又要引入分布式锁呢&…

vue打包、网站运行速度优化

最近在做公司的官网&#xff0c;遇到的首要问题就是初次进入网站时&#xff0c;加载很慢&#xff0c;首页的视频和字体甚至需要30秒才能完全展示出来&#xff0c;用户体验可以说时很差了。接下来说几个优化的点。 一、减小图片的体积 如果项目中的图片过于多&#xff0c;并且体…