20240308-2-校招前端面试常见问题-网络及浏览器

校招前端面试常见问题【4】——网络及浏览器

在这里插入图片描述

1、网络相关

Q:请简述一下 HTTP 协议,以及 HTTP1.0/1.1/2.0/3.0 的区别?

HTTP 协议:超文本传输协议,使用 TCP/IP 协议传输数据。是一个应用层的协议。

HTTP1.0:HTTP 1.0 规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个 TCP 连接,服务器完成请求处理后立即断开 TCP 连接,服务器不跟踪每个客户也不记录过去的请求。因此 HTTP 1.0 存在很大的性能缺陷——当访问一个包含有许多资源文件的网页时,每次请求和响应都需要建立一个单独的连接,每次连接只是传输一个文档和图像,请求之间完全分离。即使图像文件都很小,但是客户端和服务器端每次建立和关闭连接却是一个相对比较费时的过程,会严重影响到性能。

HTTP 1.1:支持长连接的 HTTP 协议,在一个 TCP 连接上可以传送多个 HTTP 请求和响应。一个包含有许多图像的网页文件的多个请求和应答可以在一个连接中传输,但每个单独的网页文件的请求和应答仍然需要使用各自的连接。

HTTP2.0:支持多路复用的 HTTP 协议。 HTTP 2.0 允许同时通过单一的 HTTP 2.0 连接发起多重的请求-响应消息。所有通信都在一个连接上完成,这个连接可以承载任意数量的双向数据流。由于 TCP 有慢启动的特点,如果 HTTP 连接很多,就会十分低效。HTTP/2 通过让所有数据流共用同一个连接,可以更有效地使用 TCP 连接。

HTTP3.0:也就是 QUIC (quick udp internet connection)协议,是由 google 提出的使用 udp 进行多路并发传输的协议。通过使用 UDP 协议,省去了 TCP 握手和慢启动的时间,拥有极低的建立连接延时。

Q:请简述一下 HTTPS 协议?

HTTPS 在传输数据之前需要客户端与服务器之间进行一次握手,在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL 协议不仅仅是一套加密传输的协议,TLS/SSL 中使用了非对称加密,对称加密以及 HASH 算法。

握手过程的简单描述如下:
1、客户端将自己支持的加密规则发送给服务器。

2、网站从中选出加密算法和 HASH 算法,将证书发回给浏览器。证书里面包含了网站地址,加密公钥,以及证书的颁发机构等信息。

3、获得证书之后客户端要做以下工作:
a) 验证证书(颁发证书的机构是否合法,证书中包含的网站地址是否与正在访问的地址一致等)。
b) 如果通过验证,浏览器会生成一串随机数的密码,并用证书中提供的公钥加密
c) 计算握手信息的 HASH,然后将握手信息也一并加密,最后将所有信息发送给网站。

4、网站接收浏览器发来的数据之后要做以下的操作:
a) 使用自己的私钥将信息解密取出密码,使用密码解密握手消息,判断 HASH 是否一致。
b) 计算握手的 HASH,并使用密码加密握手消息,发送给浏览器。

5、浏览器解密并计算握手消息的 HASH,如果与服务端发来的 HASH 一致,此时握手过程结束,之后所有的通信数据将由之前浏览器生成的随机密码进行加密。

Q:请简述一下 HTTP 协议中的缓存策略?

HTTP 的缓存策略有两种:强缓存和协商缓存。

强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的,用来表示资源的缓存时间。强缓存中,普通刷新会忽略它,但不会清除它,需要强制刷新。

例如:
cache-control: max-age=691200 (HTTP 1.1)
expires: Fri, 14 Apr 2017 10:47:02 GMT (HTTP 1.0)

协商缓存主要涉及到两个 header 字段:E-Tag 和 Last-Modified。每次读取数据时客户单都会跟服务器通信,并且会增加缓存标识。在第一次请求服务器时,服务器会返回资源,并且返回一个资源的缓存标识,一起存到浏览器的缓存数据库。当第二次请求资源时,浏览器会首先将缓存标识发送给服务器,服务器拿到标识后判断标识是否匹配,如果不匹配,表示资源有更新,服务器会将新数据和新的缓存标识一起返回到浏览器;如果缓存标识匹配,表示资源没有更新,并且返回 304,浏览器就读取本地缓存服务器中的数据。

例如:
E-Tag: 123456abcd
Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。

2、浏览器相关

Q:请列举一下你知道的浏览器内核的种类?

Trident:IE6、IE7、IE8、IE9、IE10、360 浏览器和猎豹浏览器。
Gecko:firefox 浏览器。
Blink:opera 浏览器。
Webkit:sarfari 和 chrome 浏览器。

Q:浏览器内核中的有哪些线程?

内核主要分成五部分:

GUI 渲染线程:负责渲染浏览器界面,解析 HTML,CSS,构建渲染树,布局和绘制等。当界面需要重绘或回流时,该线程就会执行。注意,GUI 渲染线程与 JS 引擎线程是互斥的,

JS 引擎线程:解析和执行 javascript。

事件触发线程:归属于浏览器而不是 JS 引擎,用来控制事件循环。

定时器触发线程:setInterval 与 setTimeout 所在线程。浏览器定时计数器并不是由 JavaScript 引擎计数的,因此通过单独线程来计时并触发定时(计时完毕后,添加到事件队列中,等待 JS 引擎空闲后执行)。

异步 http 请求线程:在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求,将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件队列中,再由 JavaScript 引擎执行。

Q:请简述一下浏览器的渲染流程?

接收到文档后,渲染引擎会对 HTML 文档进行解析生成 DOM 树、对 CSS 文件进行解析生成布局树;同时执行页面中的 JavaScript 代码;最终根据 DOM 树和布局树,计算样式生成渲染树,渲染树中,只会包含即将显示在页面中的元素及其样式信息(如 head 元素、display 为 hidden 的元素就不会包含在渲染树中);根据渲染树需要进行布局来计算每个元素在页面上的位置;

接下来渲染引擎开始进行绘制(paint),这一步分为若干阶段:
1、根据渲染树绘制每层的各个元素。
2、栅格化绘制出的图像(将渲染树中的节点转换成屏幕上的实际像素)
3、显示在屏幕上。
每一层的绘制是由浏览器来完成的;最后的合成是由 GPU 来完成;而栅格化过程取决于浏览器的设置,chrome 默认开启 GPU 栅格化,否则由 CPU 进行。

Q:浏览器从输入请求到呈现页面有哪几步?

1、URL 解析
2、DNS 查询
3、TCP 连接
4、处理请求
5、接受响应
6、渲染页面

Q:localstorage、sessionstorage 的区别,以及使用场景是什么?

localStorage:生命周期是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据,否则数据永远不会消失(只会存储 string)。

sessionStorage:生命周期是在仅在当前会话下有效。sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的。

使用方法:

window.localStorage
window.sessionStorage

API:

setItem(key, value) // 保存数据,以键值对的方式储存信息。
getItem(key) // 获取数据,将键值传入,即可获取到对应的 value 值。
removeItem(key) // 删除单个数据,根据键值移除对应的信息。
clear() // 删除所有的数据
key(index) // 获取某个索引的 key

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

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

相关文章

特性螺旋面的刀具设计记录

最近和成型类刀具杠上了,这不最近有小伙伴提供了两个比较特殊的螺旋面工件,通常称作阴、阳转子。具体形状如下: 阴转子 阴转子端面齿形没看出有什么特殊的,但是在轴剖面齿形是内凹的,这个是比较特殊的形式。 阳转子…

FFmpeg--音频解码流程:aac解码pcm

文章目录 音频解码流程API分析:伪代码code: 音频解码流程 aac—音频解码器–pcm数据 API avcodec_find_decoder:根据指定的AVCodecID查找注册的解码器 av_parser_init:初始化AVCodecParserContext avcodec_alloc_context3:为AV…

信息系统项目管理师003:信息化(1信息化发展—1.1信息与信息化—1.1.3 信息化)

文章目录 1.1.3 信息化1.信息化内涵2.信息化体系3.信息化趋势 要点总结 1.1.3 信息化 信息化是一个过程,与工业化、现代化一样,是一个动态变化的过程。信息化是指培养、发展以计算机为主的智能化工具为代表的新生产力,并使之造福于社会的历史…

目标检测:Anchor-free算法模型

下面几篇论文在目标领域内被广泛认为是具有里程碑意义的,它们引入了一些基本概念和方法,对后续的研究产生了深远的影响: 1. DenseBox 虽然不完全是今天所讨论的anchor-free检测方法,但DenseBox是较早采用端到端方式进行目…

Qt自定义控件

自定义控件 目的:将多个控件或者窗口作为一个整体被多次复用。 操作方式 1.首先进行自定义的ui设计,以及对应的.h和.cpp文件 2.到要使用的UI界面上,从控件库中拖拽一个Widget控件 3.右键点击"提升为" 4.填写自定义实现的类名&…

Qt连接所有同类部件到同一个槽函数

void MainWindow::AutoConnectSignals() {// 查找所有 QSpinBoxconst auto spinBoxes findChildren<QSpinBox*>();for (auto *spinBox : spinBoxes){connect(spinBox, static_cast<void(QSpinBox::*)(int)>(&QSpinBox::valueChanged), this, &ParameterW…

Mysql的Cardinality值

什么是Cardinality值&#xff1f; Cardinality值是Mysql做索引优化时一个非常关键的值&#xff0c;优化器会根据这个值来判断是否使用这个索引&#xff0c;它表示索引中唯一值的数目估计值&#xff0c;该值应该尽可能接近1&#xff0c;如果非常小&#xff0c;则用户需要考虑是否…

如何使用 CSS 防止换行

简介 开发人员通常喜欢在网页上对文本进行换行。换行会以某种方式限制文本&#xff0c;防止设计问题。文本换行还可以防止水平滚动。但有时候&#xff0c;您希望文本块保持在同一行&#xff0c;不考虑长度。您可以使用 CSS 的 white-space 属性来防止特定元素的换行和文本换行…

7. 交叉开发环境设置

嵌入式交叉编译工具 ​ 交叉编译工具是为了使在上位机中编译的文件能够在不同平台的目标机中执行&#xff0c;搭建交叉编译环境是嵌入式开发的第一步&#xff0c;也是关键的一步。不同的体系结构、不同的操作系统&#xff0c;甚至是不同版本的内核&#xff0c;都会用到不同的交…

win11中微软商店如何使用微信支付?microsoft store支付教程

Microsoft Store是由微软公司提供的一个数字分发平台&#xff0c;用于购买和下载Windows操作系统及其相关应用、游戏、音乐、电影、电视节目和其他数字内容。该平台最初是作为Windows 8的一部分引入的&#xff0c;后来也适用于Windows 10和其他Microsoft平台。 以下是Microsof…

ESP32系列四:搭建http的webserver的服务器

最近在使用ESP32搭建web服务器测试&#xff0c;发现esp32搭建这类开发环境还是比较方便的。具体的http协议这里就不再赘述&#xff0c;我们主要说一下如何使用ESP32提供的API来搭建我们的http web。 一、web服务器搭建过程 1、配置web服务器 在ESP-IDF中&#xff0c;Web服务…

JavaWeb笔记 --- 一JDBC

一、JDBC JDBC就是Java操作关系型数据库的一种API DriverManager 注册驱动可以不写 Class.forName("com.mysql.jdbc.Driver"); Connection Statement ResultSet PrepareStatement 密码输入一个SQL脚本&#xff0c;直接登录 预编译开启在url中 数据库连接池

HTML5+CSS3+JS小实例:暗紫色Tabbar

实例:暗紫色Tabbar 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scal…

【梳理】k8s使用Operator搭建Flink集群

文章目录 架构图安装cert-manager依赖helm 安装operator运行集群实例k8s上的两种模式&#xff1a;Native和Standalone两种CRDemo1&#xff1a;Application 单任务Demo2&#xff1a;Session 多任务创建ingress 总结 架构图 参考&#xff1a;部署验证demo 安装cert-manager依赖 …

SSL证书是什么

SSL 证书就是遵守 SSL协议&#xff0c;由受信任的数字证书颁发机构CA&#xff0c;在验证服务器身份后颁发&#xff0c;具有服务器身份验证和数据传输加密功能。 Secure socket layer(SSL)安全协议是由Netscape Communication公司设计开发。 该安全协议主要用来提供对用户和服…

CSS中 ,有哪些方式可以隐藏页面元素

文章目录 CSS中 &#xff0c;有哪些方式可以隐藏页面元素实现方式display&#xff1a;nonevisibility:hiddenopacity:0设置height 、width属性为0position:absoluteclip-path小结 CSS中 &#xff0c;有哪些方式可以隐藏页面元素 实现方式 通过 css 实现隐藏元素方法有如下 : …

Testing Library - 简介

testing-library 软件包系列以用户为中心的方式帮助您测试 UI 组件。 你的测试越接近你的软件使用方式&#xff0c;它们能给你提供的信心就越多。 核心库 DOM Testing Library&#xff0c;是一个轻量级的解决方案&#xff0c;用于通过查询和与DOM节点&#xff08;无论是使用JSD…

【面试准备日常】从头复习mysql--20240308

1.mysql数据类型 a.数值类型 分类类型大小有符号(SIGNED)范围无符号(UNSIGNED)范围描述数值类型TINYINT1 byte(-128&#xff0c;127)(0&#xff0c;255)小整数值SMALLINT2 bytes(-32768&#xff0c;32767)(0&#xff0c;65535)大整数值MEDIUMINT3 bytes(-8388608&#xff0c;…

[蓝桥杯]接龙数列(C语言)

目录 题目链接 题目理解 解题思路 完整代码 重难点解答 *dp数组的具体用法 *对于dp[b]dp[a]1>dp[b]?dp[a]1:dp[b]的解释 题目链接 [蓝桥杯 2023 省 B] 接龙数列 - 洛谷 题目理解 这道题让我们求任给的一串数字&#xff0c;若想让其变成接龙数列最少需要删除的数字…

【程序员经常使用的算法】讲解

程序员经常使用的算法 程序员经常使用的一些算法包括&#xff1a; 1. 排序算法&#xff08;Sorting Algorithms&#xff09;: 冒泡排序&#xff08;Bubble Sort&#xff09;选择排序&#xff08;Selection Sort&#xff09;插入排序&#xff08;Insertion Sort&#xff09;归…