前端面试笔记（三）--（基础知识篇sz）

代廷耀

于 2024-09-04 22:15:55 发布

阅读量1.4k

点赞数 31

文章标签：前端面试笔记

本文链接：https://blog.csdn.net/m0_56983341/article/details/141891374

版权

前端面试笔记三

1.什么是DOM,什么是BOM?

DOM（Doument Object Model）文档对象模型，提供操作页面元素的方法和属性，是HTML和XML的API,其核心为document对象，他表示整个文档，包括文档的根元素、文本节点、注释、标签等。DOM把整个页面规划成有节点层级构成的文档。
BOM(Browsr Object Model)浏览器对象模型，是有javascript中用于表示和操作浏览器窗口及其相关组件的对象模型。BOM的核心为window,代表浏览器窗口，提供了很多方法和属性来控制浏览器的行为和属性。

2.浏览器的存储？

Cookie是一种在客户端存储数据的方式，可以通过设置cookie来存储一些信息，如用户的登录状态、用户喜好等。Cookie的最大缺点是每次请求都会携带在HTTP头中，增加了数据传输的开销，同时也存在安全性的问题。它的存储容量为4KB。
localStorage是HTML5引入的一种本地存储方式，它可以在客户端长期存储数据，存储容量较大（至少5MB）。localStorage是基于键值对的形式来存储数据，存储的数据会一直保留在客户端，直到手动清除或者通过代码删除。
sessionStorage也是HTML5引入的一种本地存储方式，它和localStorage的用法类似，但是存储的数据是在浏览器会话期间有效，关闭浏览器窗口或者标签页后将会被删除。

这三种本地存储方式的主要区别在于存储的生命周期和存储容量。Cookie可以通过设置过期时间来控制生命周期，localStorage的数据长期存储在客户端，而sessionStorage的数据只在浏览器会话期间有效。同时，localStorage和sessionStorage的存储容量要大于Cookie。根据实际需求，选取适合的本地存储方式。

3.http与https的默认端口，（其中区别在笔记（一）中有写）？

http默认端口号为80,https默认端口号为443

4.为什么TCP的挥手比在招手多一次？

答：（自己理解）多一次的原因在于确保数据传输的完整性和连接的可靠性；因为tcp连接的全双工性，所以多出一次的挥手是在第三次，服务端在数据传输完成后，发送报文给客户端，表示数据传输完成，可以断开连接；（对于TCP三次招手与四次挥手的解释在“面试笔记一”）
–TCP连接是全双工的，意味着数据可以在两个方向上同时传输。在TCP通信过程中，数据的发送和接收是独立的，即一端可以在发送数据的同时接收数据，或者只发送不接收，或者只接收不发送。**

5.什么是跨域？

跨域：当一个请求url的协议、域名、端口号三者有一个与当前url不同即为跨域。因为受到浏览器同源策略的限制，这种请求会被拒绝。同源策略是浏览器的一种安全机制。，他规定了一个源（协议+域名+端口号）的脚本只能访问该源下的资源。而不能访问其他资源。
解决方法：cors(主流)、JSONP
扩展：

JSONP（JSON with Padding）：一种非官方的跨域数据交互协议，通过动态创建script标签来实现跨域请求。
CORS（跨源资源共享）：一种基于HTTP头的机制，允许服务器标示哪些源可以访问其资源。这是目前主流的跨域解决方案。
代理服务器：通过在客户端和服务器之间设置一个代理服务器，将跨域请求转换为同域请求。
document.domain + iframe：通过设置两个页面的document.domain为同一个基础主域，来实现同域。但这种方法只适用于主域名相同但子域名不同的场景。
4.location.hash + iframe：通过iframe的location.hash值进行跨域通信，但这种方法只能传递字符串，且只能单向通信。
5.window.name + iframe：利用window.name属性的跨域持久性来实现跨域通信，但这种方法需要额外的代理页面。
6.postMessage：HTML5引入的一个API，允许跨文档通信，即不同源或同源的窗口之间可以互相发送消息。

6.输入url到资源返回页面的过程？

参考博客：https://blog.csdn.net/misakivv/article/details/139050941
答：过程共分为10个步骤：
1.解析URL；
2.浏览器封装HTTP请求报文；
3.DNS解析；
4.建立TCP连接（三次握手）；
5.浏览器发送HTTP请求；
6.服务器处理请求；
7.返回HTTP响应；
8.浏览器接受响应；
9.浏览器进行语法解析，渲染页面；
10.关闭TCP连接（四次挥手）；

详细过程：
1.当在浏览器中输入URL后，浏览器首先对拿到的URL进行识别。判断你输入的是一个合法的 URL 还是一个待搜索的关键词，并且根据你输入的内容进行自动补全、字符编码等操作，解析 URL 得到里面的参数，将域名和需要请求的资源分离开来，从而了解需要请求的是哪个服务器，请求的是服务器上什么资源等等。
2.对 URL 进行解析之后，浏览器确定了目标服务器和文件名，接下来就需要根据这些消息封装成一个 HTTP 请求报文发送出去。
3. 下方第八题
4. 通俗解释：客户端向服务器发送一个syn报文，请求建立连接；
服务端收到syn报文，并发送一个syn+ack报文，表示收到请求，请客户端确认；
客户端收到syn+ack报文，再次发送一个ack报文，完成连接建立
5.TCP 三次握手完成后，浏览器与目标服务器之间就建立了一个可靠的虚拟通道，于是浏览器就可以发送自己的 HTTP 请求了。
6.接受 TCP 报文后，会对连接进行处理，对HTTP协议进行解析（请求方法、域名、路径等），并且进行一些验证：

验证是否配置虚拟主机
验证虚拟主机是否接受此方法
验证该用户可以使用该方法（根据 IP 地址、身份信息等）
7,8.服务器在接收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包含状态码，响应头，响应报文三个部分。
9.下方第七题
10.通俗解释：客户端发送fin报文给服务端，表示请求断开连接；
服务端收到fin报文后，回复一个ack报文，表示收到请求；
在数据传输完毕后，服务端发送fin报文，表示可以断开连接；
客户端收到fin报文后，发送ack报文，完成断开连接；

7.返回资源在浏览其中如何渲染？

在这里插入图片描述
页面渲染的过程：
先构建DOM;在构建CSSOM,在构建渲染树；之后布局（）；最后绘制；
如果在构建DOM的时候遇到了Js,就请求下载js，如果js没有额外设置的情况下（

答：页面渲染过程主要分为解析、构建、构建渲染树、布局（回流或重排）、绘制（重绘）、合成过程。浏览器接收到html文档后，首先会进行解析过程，包括html解析和css解析；html解析为DOM,表示文档层次结构，css构造成为CSSOM，包含所有样式信息；接着，浏览器结合DOM和CSSOM生成渲染树，渲染树包含需显示节点及其样式信息；随后，浏览器进行布局（有时也叫重排或回流），计算渲染树中每个节点的确地位置和大小；然后进行绘制（重绘）过程，将渲染树中的每个节点在转换成为屏幕上的像素，并可能生成多图层；最后，合成器将图层合成为一个或多个页面帧，并发送到GPU(图形处理器)进行渲染，最终呈现在屏幕上；

8.DNS解析

参考博客：DNS域名解析

DNS定义：DNS是域名系统。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。

DNS解析过程图：

域名体系结构图：
在这里插入图片描述
对DNS解析的解释：
1.首先查找浏览器缓存中，是否存在域名对应的IP地址；
2.没有查找时，查找本地DNS服务器缓存中时是否存在；
3.没有查找时，发送请求到根域服务器，查询到域名在哪个顶级域名服务器；
4.发送请求到顶级域名服务器，查询到域名在哪个权限域名域名服务器；
5.请求权限域名服务器，返回对应的IP地址；
6.无论在哪一步骤找到IP地址：该域名-IP映射记录都会在返回路径上的每一个DNS服务器以及最终用户的设备上被缓存。（）这包括浏览器、操作系统、路由器以及ISP的DNS服务器）确保未来对该域名的查询能够更快地得到响应。
实例：
假设你要查询www.baidu.com的IP地址:

（1）首先会查找浏览器的缓存，看看是否能找到www.baidu.com对应的IP地址，找到就直接返回，否则进行下一步。
（2）将请求发往给本地DNS服务器，如果查找到也直接返回，否则继续进行下一步。
（3）本地DNS服务器向根域名服务器发送请求，根域名服务器返回负责.com的顶级域名服务器的IP地址的列表。
（4）本地DNS服务器再向其中一个负责.com的顶级域名服务器发送一个请求，返回负责.baidu的权威域名服务器的IP地址列表。
（5）本地DNS服务器再向其中一个权威域名服务器发送一个请求，返回www.baidu.com所对应的IP地址。

9.重绘和重排

参考文档：什么是重排？如何减少重排？

重排：重新计算网页布局的过程
重绘：根据新的布局重新绘制网页的过程；
区别：重排会导致元素的尺寸、位置、内容等属性的变化，需要重新计算布局信息；重绘实在原始的位置和尺寸不变的情况下，重新绘制元素的样式；重排和重绘都会对网页性能产生影响，重排的影响更大，减少重排或重绘，可以提高网页性能
导致重排或重绘的原因：
重排和重绘虽然都会导致浏览器对网页进行重新渲染，但它们的原因和影响是不同的。
重排通常是由于以下原因导致的：
添加、删除或更改DOM元素。
修改元素的尺寸、位置、边距、填充、边框等样式属性。
修改页面的字体大小、样式等。
用户交互事件，如窗口大小改变、滚动等。
而重绘则通常是由于以下原因导致的：
修改元素的背景色、边框颜色等样式属性。
添加或删除元素的伪类，如:hover等。
操作canvas、SVG等图形元素。

减少重排绘重绘的方法：

避免频繁的DOM操作：DOM操作会导致重排和重绘，因此我们需要尽可能减少DOM操作的次数。例如，可以一次性添加多个元素，而不是一个一个地添加；可以使用documentFragment来批量操作DOM等。
使用CSS3动画：CSS3动画可以使用GPU加速，减少重排和重绘的次数。而使用JavaScript实现的动画则会导致频繁的重排和重绘。
避免使用table布局：table布局比较复杂，会导致频繁的重排和重绘。可以使用flex布局或grid布局代替。
使用CSS Sprite：CSS Sprite可以减少图片的请求次数，从而减少重排和重绘的次数。
避免频繁的重复样式：尽可能使用类或者继承样式，减少重复的样式代码，避免频繁的样式更改，减少重排和重绘的次数。
使用position:absolute或fixed定位：使用position:absolute或fixed定位可以脱离文档流，减少重排的次数。
将样式表放在头部：将样式表放在头部可以避免样式表的延迟加载，减少重排和重绘的次数。