JavaScript知识系列（5）每天10个小知识点

最新推荐文章于 2024-08-03 17:05:14 发布

云边散步

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量268

点赞数 2

分类专栏： JavaScript面试题系列文章标签： javascript 开发语言 ecmascript 前端面试

本文链接：https://blog.csdn.net/weixin_52003205/article/details/132879855

版权

JavaScript面试题系列专栏收录该内容

12 篇文章 1 订阅

订阅专栏

系列文章目录

JavaScript知识系列（1）每天10个小知识点

JavaScript知识系列（2）每天10个小知识点

JavaScript知识系列（3）每天10个小知识点

JavaScript知识系列（4）每天10个小知识点

知识点

41.从输⼊ URL 到⻚⾯加载发⽣了什么？

从输入URL到页面加载，涉及多个步骤，以下是通常发生的主要过程：

DNS解析：
- 当用户在浏览器中输入URL并按下回车键时，浏览器首先需要将域名解析成IP地址，以确定要请求的服务器位置。这个过程称为DNS解析。
- 浏览器首先检查本地DNS缓存，如果找到了相应的IP地址，就不需要进行DNS查询。
- 如果本地缓存中没有对应的IP地址，浏览器会向本地操作系统发起DNS查询请求，如果操作系统也没有缓存对应的IP地址，它会将请求发送给ISP的DNS服务器，依次进行查询，直到找到对应的IP地址或查询失败。
建立TCP连接：
- 一旦浏览器获得了目标服务器的IP地址，它会尝试建立与服务器的TCP连接。
- 这个过程通常包括一个三次握手（TCP三次握手），确保浏览器和服务器之间的通信通道建立起来。
发起HTTP请求：
- 一旦TCP连接建立，浏览器会发送一个HTTP请求到目标服务器，请求包括了要获取的资源路径、请求方法（GET、POST等）以及其他头部信息。
服务器处理请求：
- 服务器接收到浏览器的请求后，会根据请求的内容进行处理，可能包括数据库查询、业务逻辑处理等。
- 服务器会生成HTTP响应，包括HTTP状态码、响应头和响应体，然后将响应发送回浏览器。
接收和渲染响应：
- 浏览器接收到服务器的响应后，首先会检查HTTP状态码，如果状态码表示请求成功（如200 OK），则浏览器会继续处理响应。
- 浏览器开始解析HTML响应，并构建DOM树。同时，它会下载CSS、JavaScript和其他资源。
- 浏览器将DOM树和样式信息结合起来，进行布局和渲染，最终将页面显示在用户的屏幕上。
资源加载：
- 除了HTML文档，浏览器还需要下载页面中引用的其他资源，如CSS文件、JavaScript文件、图像、字体等。
- 浏览器会并行下载这些资源，以提高页面加载的速度。
JavaScript执行：
- 如果页面包含JavaScript代码，浏览器会下载并执行这些代码。
- JavaScript代码可以修改DOM树、响应用户交互、发起异步请求等。
页面加载完成：
- 当所有资源都下载完成，JavaScript代码执行完毕，页面加载完成。
- 浏览器触发DOMContentLoaded事件，表示DOM树构建完成，但可能还有一些资源正在下载。
- 当所有资源都加载完成（包括图像等），浏览器触发load事件，表示页面完全加载完成。
用户交互：
- 一旦页面加载完成，用户可以与页面进行交互，点击链接、填写表单、触发事件等。

这是一个简化的页面加载过程的概述。在实际中，还有更多的细节和优化，如HTTP/2多路复用、资源缓存、预加载等，用以提高页面加载速度和用户体验。

42.TCP、UDP 和 HTTP 的区别

TCP（传输控制协议）、UDP（用户数据报协议）和HTTP（超文本传输协议）是网络通信中常见的协议，它们在不同层次上提供不同的功能和服务，以下是它们之间的主要区别：

1. 协议层次：

TCP和UDP是传输层协议，用于在网络上传输数据。
HTTP是应用层协议，用于定义客户端和服务器之间的通信规则。

2. 连接性：

TCP是面向连接的协议，它在通信双方建立连接后进行数据传输，确保数据的可靠性和顺序性。
UDP是无连接的协议，它不需要在通信之前建立连接，发送数据包时不会保证数据的可靠性或顺序性。
HTTP可以基于TCP或UDP工作，但通常使用TCP作为传输层协议，因此继承了TCP的可靠性和顺序性。

3. 数据传输方式：

TCP使用流式传输，数据被分成小块并按顺序传输。
UDP使用数据报传输，每个数据包是独立的，可能按任意顺序到达。
HTTP使用请求-响应模式，客户端发送请求，服务器返回响应，然后断开连接。

4. 数据可靠性：

TCP提供数据可靠性，确保数据的传输不会丢失或损坏，并按顺序到达。它使用确认和重传机制来实现可靠性。
UDP不提供数据可靠性，数据包可能丢失、重复或无序到达。
HTTP通过TCP提供数据可靠性，但某些应用可能在应用层面提供额外的重试和错误处理。

5. 开销：

TCP的连接建立和维护需要较多的开销，包括三次握手和拥塞控制等。
UDP的开销较低，不需要连接建立和拥塞控制，适用于实时性要求高的应用。
HTTP的开销取决于底层传输协议（通常是TCP），因此通常比UDP高一些，但它的开销主要来自应用层的请求和响应头部。

6. 适用场景：

TCP适用于需要数据可靠性和顺序性的应用，如文件传输、电子邮件和网页访问。
UDP适用于实时性要求高、数据包大小较小的应用，如语音通话、视频流和在线游戏。
HTTP适用于客户端和服务器之间的文本和多媒体数据传输，用于浏览网页、获取资源和与Web服务器交互。

综上所述，TCP、UDP和HTTP是不同的网络协议，各自具有不同的特点和适用场景。选择正确的协议取决于应用程序的需求，包括数据可靠性、实时性和开销等因素。

44.HTTP 和 HTTPS 的概念、作用、原理、特性、优点、缺点、区别、使用场景

HTTP（Hypertext Transfer Protocol）和HTTPS（HTTP Secure）都是用于在客户端和服务器之间传输数据的协议，但它们有一些重要的区别和特性。以下是关于HTTP和HTTPS的详细解释：

HTTP（Hypertext Transfer Protocol）

概念：

HTTP是一种应用层协议，用于在Web上传输超文本（Hypertext）文档，如HTML页面。

作用：

HTTP用于客户端和服务器之间的通信，允许浏览器请求Web页面、图像、视频等资源，并将服务器响应返回给浏览器。

原理：

HTTP是基于请求-响应模型的协议。客户端发送HTTP请求，服务器接收请求并发送HTTP响应。
请求和响应包括HTTP头部（包含元数据信息）和可选的消息体（包含实际数据）。
HTTP默认使用明文传输，数据在传输过程中不加密，可能被窃听或篡改。

特性：

明文传输：HTTP数据在传输过程中是明文的，容易被窃听和修改。
速度较快：由于没有加密和认证过程，HTTP通常比HTTPS更快。
不提供数据的完整性和安全性。

优点：

简单易用，低开销，适用于一些不需要安全性的场景。

缺点：

不提供数据的加密，容易被攻击者窃听和篡改。
不提供身份验证，无法确定服务器的真实性。
不适用于敏感数据的传输，如登录信息和支付信息。

HTTPS（HTTP Secure）

概念：

HTTPS是HTTP的安全版本，它通过使用加密和身份验证来保护数据传输的安全性。

作用：

HTTPS用于在客户端和服务器之间建立加密的、安全的通信连接，以保护数据的机密性和完整性。

原理：

HTTPS基于HTTP，但添加了SSL/TLS协议层，用于加密和身份验证。
客户端和服务器之间建立SSL/TLS握手连接，协商加密算法和密钥。
之后的HTTP通信在加密的SSL/TLS通道中进行，数据在传输过程中加密，防止窃听和篡改。

特性：

数据加密：HTTPS使用SSL/TLS协议加密通信，使数据在传输过程中不容易被窃听。
身份验证：HTTPS使用数字证书来验证服务器的身份，确保用户连接到合法的服务器。
使用443端口：HTTPS默认使用443端口，与HTTP的80端口不同。

优点：

数据安全：提供数据的机密性和完整性，防止数据被窃听和篡改。
身份验证：确保用户连接到合法的服务器，防止中间人攻击。
信任度高：HTTPS网站通常受到更多用户信任，有利于建立品牌声誉。

缺点：

开销较大：加密和身份验证过程会增加通信的开销，可能导致HTTPS网站速度较慢。
配置复杂：需要配置数字证书，并进行定期更新。

区别：

主要区别在于安全性。HTTPS提供了数据加密和身份验证，而HTTP不提供这些安全特性。
HTTPS通常使用443端口，而HTTP使用80端口。

使用场景：

HTTP适用于不需要数据安全性和身份验证的场景，如浏览一般网页。
HTTPS适用于需要保护敏感数据、登录信息、支付信息等的场景，如在线银行、电子商务网站和社交媒体。

总之，HTTP和HTTPS都有各自的用途，选择使用哪种协议取决于应用程序的安全性需求和性能要求。HTTPS通常是保护用户隐私和数据安全的首选协议，特别是对于敏感数据的传输。

46.防抖和节流的概念、作用、原理、特性、优点、缺点、区别、使用场景

防抖（Debouncing）和节流（Throttling）是用于控制函数调用频率的两种前端优化技术，它们在不同场景下有不同的应用和效果。

防抖 (Debouncing)：

概念：

防抖是指在事件被触发后，等待一定时间间隔（例如等待用户停止输入）再执行函数，如果在等待期间事件再次触发，则重新计时。
防抖主要用于处理频繁触发的事件，确保在一定时间内只执行一次函数。

作用：

防抖用于减少函数执行的频率，以节省资源和提高性能。
常用于输入框搜索、窗口大小调整等需要等待用户停止操作的场景。

原理：

当事件触发时，启动一个定时器。
如果在定时器的等待时间内再次触发事件，则重置定时器。
只有当定时器时间间隔内没有再次触发事件时，才执行函数。

特性：

防抖会延迟函数的执行，直到事件停止触发。
可以有效防止频繁触发的事件导致的不必要的函数执行。

优点：

控制函数执行频率，减少不必要的计算和资源浪费。
在一些交互场景中提供更好的用户体验，如搜索提示。

缺点：

可能导致事件响应的延迟，不适用于需要立即响应的场景。

节流 (Throttling)：

概念：

节流是指在一定时间间隔内，只允许函数执行一次，无论事件触发多频繁。
节流主要用于限制函数的执行频率，确保在一定时间间隔内只执行一次函数。

作用：

节流用于控制函数的执行频率，防止函数在短时间内多次触发。

原理：

当事件触发时，如果已经有函数在执行，则不执行新的函数。
如果函数没有在执行，则执行函数，并启动一个定时器。
在定时器时间间隔内不允许再次触发函数。

特性：

节流可以确保函数在一定时间间隔内执行，而不会被频繁触发的事件打断。

优点：

控制函数的执行频率，减少不必要的计算和资源浪费。
在一些滚动、拖拽等连续触发事件的场景中提供更好的用户体验。

缺点：

如果设置的时间间隔过长，可能会导致用户在一段时间内无法触发函数，不适用于需要快速响应的场景。

区别：

防抖是等待事件停止触发后执行函数，节流是在一定时间间隔内执行一次函数。
防抖的实现通常会取消之前的定时器，重新启动定时器；而节流的实现会设置一个标志位来判断是否允许执行函数。
防抖适用于需要等待用户停止操作后执行的场景，而节流适用于需要限制函数执行频率的场景。

使用场景：

防抖常用于输入框搜索、窗口大小调整、按钮点击防重复等场景。
节流常用于滚动事件、拖拽事件、鼠标移动事件等需要限制事件触发频率的场景。

总之，防抖和节流是常见的前端性能优化技术，用于控制函数执行的频率，提高用户体验和减少资源浪费。选择哪种技术取决于具体的需求和场景。

47.JavaScript中不同设计模式的概念、作用、原理、特性、优点、缺点、区别、使用场景

JavaScript中有许多设计模式，每种模式都有其独特的概念、作用、原理、特性、优点、缺点、区别和适用场景。以下是常见的几种设计模式的介绍：

单例模式 (Singleton Pattern)
- 概念：确保一个类只有一个实例，并提供全局访问点。
- 作用：控制类的实例化过程，确保一个类只有一个对象，节省资源。
- 原理：通过闭包封装变量，在需要时创建并返回唯一的实例。
- 特性：唯一实例、全局访问点。
- 优点：节省资源、避免重复创建对象。
- 缺点：不适用于多个实例的情况。
- 区别：与普通对象创建方式不同，确保唯一性。
- 使用场景：全局配置、日志记录器、数据库连接等。
观察者模式 (Observer Pattern)
- 概念：定义对象间一对多的依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知并更新。
- 作用：实现对象间的松耦合，使对象之间的关系更灵活。
- 原理：主题（被观察者）维护一个观察者列表，当主题状态改变时，通知观察者。
- 特性：一对多的关系、发布-订阅机制。
- 优点：松耦合、分离关注点。
- 缺点：可能导致性能问题，观察者过多时。
- 区别：与直接调用对象方法不同，解耦了观察者和主题。
- 使用场景：事件处理、UI组件更新、数据同步等。
工厂模式 (Factory Pattern)
- 概念：定义一个创建对象的接口，但让子类决定实例化哪个类。
- 作用：将对象的创建与使用分离，提供灵活的对象创建机制。
- 原理：定义一个工厂类，根据输入参数创建不同的对象。
- 特性：封装了对象的创建过程、多态。
- 优点：降低耦合、提高代码的可维护性。
- 缺点：增加了类的数量，可能导致复杂性增加。
- 区别：与直接调用构造函数不同，提供了更灵活的对象创建方式。
- 使用场景：创建数据库连接、UI组件、抽象类的派生类等。
策略模式 (Strategy Pattern)
- 概念：定义一系列算法，将它们封装起来，并使它们可以互相替换，使得算法的变化独立于使用算法的客户。
- 作用：封装可变部分，分离变化和不变部分，支持扩展和维护。
- 原理：定义一组策略类，每个策略类封装一种算法，然后在上下文类中使用策略对象。
- 特性：多态、分离算法和实现。
- 优点：增加可扩展性、降低耦合度、复用性高。
- 缺点：增加了类的数量。
- 区别：与直接在代码中写算法逻辑不同，将算法封装为独立的类。
- 使用场景：排序算法、计算价格、验证规则等。

这只是一小部分常见的设计模式，JavaScript中还有许多其他设计模式，如装饰器模式、适配器模式、代理模式等，每种模式都有其独特的应用场景和优缺点。选择适合特定问题的设计模式可以提高代码的可维护性和扩展性。

48.JS微任务和宏任务的概念、作用、原理、特性、优点、缺点、区别、使用场景

在 JavaScript 中，微任务（Microtask）和宏任务（Macrotask）是用于管理异步代码执行顺序的概念。它们有不同的特性和用途。

微任务（Microtask）：

概念：

微任务是一个异步任务，它的优先级比宏任务高。微任务通常在当前任务（宏任务）执行完毕之后立即执行。

作用：

用于执行需要尽快完成的任务，例如 Promise 的回调函数、MutationObserver 的回调等。

原理：

微任务队列是一个FIFO（先进先出）队列，它的任务会在当前宏任务执行完毕之后立即执行。

特性：

高优先级：微任务在宏任务之前执行，确保及时响应。
无阻塞：微任务的执行不会阻塞主线程，有助于保持界面流畅。
递归：微任务可以递归触发新的微任务，直到微任务队列为空。

优点：

响应速度快，用于执行需要尽快完成的任务。

缺点：

过多的微任务可能导致主线程长时间被占用，影响其他任务的执行。

宏任务（Macrotask）：

概念：

宏任务是一个异步任务，它的优先级比微任务低。宏任务通常在事件循环的不同阶段执行。

作用：

用于执行较长时间的、不需要立即完成的任务，如定时器回调、I/O 操作、用户交互事件等。

原理：

宏任务队列是一个FIFO队列，它的任务会在事件循环的不同阶段执行，如消息队列、定时器队列等。

特性：

低优先级：宏任务的执行通常延迟较长时间，不适合执行需要快速响应的任务。
阻塞：宏任务的执行可能会阻塞主线程，影响用户体验。

优点：

适用于执行需要较长时间的任务，不会影响界面流畅性。

缺点：

响应速度相对较慢，不适合执行需要快速响应的任务。

区别：

执行时机：微任务在当前宏任务执行完毕后立即执行，宏任务在事件循环的不同阶段执行。
优先级：微任务的优先级高于宏任务，微任务先执行完毕后才会执行宏任务。
使用场景：微任务适用于需要尽快完成的任务，宏任务适用于不需要立即完成的任务。

使用场景：

微任务：Promise 的回调函数、MutationObserver 的回调、process.nextTick 等。
宏任务：定时器回调（setTimeout、setInterval）、I/O 操作、用户交互事件（点击、输入等）。

综上所述，微任务和宏任务在 JavaScript 异步编程中扮演不同的角色，可以根据任务的特性和优先级来选择合适的任务队列。微任务适用于需要快速响应的任务，而宏任务适用于较长时间的任务。在实际应用中，需要根据需求合理选择使用它们，以确保程序的性能和响应速度。

49.闭包的概念、作用、原理、特性、优点、缺点、区别、使用场景

闭包（Closure）是JavaScript中一个重要的概念，它在函数式编程中扮演着重要的角色。以下是有关闭包的详细解释：

概念：

闭包是指一个函数（称为内部函数）包含对其外部函数（称为外部函数）作用域中变量的引用。当内部函数在外部函数的作用域外被调用时，它仍然能够访问外部函数的变量。

作用：

闭包用于创建词法作用域，提供一种方式来访问外部函数中的变量，即使外部函数已经执行完毕。
主要作用是实现数据封装、模块化、私有变量等。

原理：

在JavaScript中，每个函数都是一个闭包，它会捕获其定义时的作用域链。当内部函数引用外部函数的变量时，这些变量将被保留在内存中，即使外部函数已经执行完毕。
这是因为JavaScript的作用域链是由一系列嵌套的作用域对象组成的，每个闭包都会引用其父级作用域的变量。

特性：

闭包允许访问外部函数的局部变量，即使外部函数已经执行完毕。
闭包的生命周期可以比外部函数长，因此它可以维护外部函数中的状态。
闭包可以被传递、返回和存储，用于创建高阶函数和实现函数式编程。

优点：

数据封装：允许创建私有变量，隐藏实现细节。
模块化：支持模块化开发，避免全局污染。
保存状态：可用于保存函数的执行状态，实现记忆化等。

缺点：

内存占用：由于闭包保留外部函数的变量，可能导致内存泄漏或增加内存消耗。
性能开销：闭包的创建和维护会增加一定的性能开销，尤其在循环中。

区别：

闭包和普通函数的主要区别在于它们是否引用了外部函数的变量。
闭包是一种特殊的函数，它具有捕获外部作用域的能力，而普通函数通常不会捕获外部作用域。

使用场景：

封装数据：创建私有变量，提供公共接口。
模块化：将功能封装为模块，避免全局命名冲突。
高阶函数：将函数作为参数传递或返回函数。
记忆化：缓存函数的计算结果以提高性能。
事件处理程序：保存事件处理函数所需的状态信息。

总之，闭包是JavaScript中强大的功能，它可以用于实现许多高级编程技术，但也需要小心使用以避免潜在的内存泄漏问题。

50.defineProperty 和 proxy的概念、作用、原理、特性、优点、缺点、区别、使用场景

Object.defineProperty 和 Proxy 是 JavaScript 中用于对象属性访问和修改的两种重要机制，它们有不同的概念、作用、原理、特性、优点、缺点、区别和使用场景。

Object.defineProperty

概念：

Object.defineProperty 是一个用于在对象上定义属性的方法，可以用于添加新属性或修改现有属性的特性。

作用：

用于对对象属性进行精细的控制，包括设置属性的值、获取属性的值、设置属性的可枚举性、可配置性和可写性等特性。

原理：

Object.defineProperty 使用一个属性描述符对象来定义属性，该对象包括value、writable、enumerable、configurable等属性，用于控制属性的行为。

特性：

支持老版本的 JavaScript。
主要用于对象属性的数据访问控制。

优点：

精细控制属性行为。
兼容性好。

缺点：

需要逐个属性进行设置，不够灵活。
不适用于代理对象。

区别：

Object.defineProperty 主要用于修改或定义对象属性的特性，但不适用于代理对象。
不支持监听整个对象的变化。

使用场景：

对象属性的精细控制，如定义计算属性、隐藏属性等。

Proxy

概念：

Proxy 是 ECMAScript 6 引入的对象代理机制，允许你创建一个代理对象，用于控制对目标对象的访问。

作用：

用于创建代理对象，允许拦截对目标对象的操作，包括读取、写入、删除、遍历等。

原理：

Proxy 创建一个代理对象，该代理对象通过拦截器函数（handler）来捕获对目标对象的操作，可以在拦截器函数中自定义行为。

特性：

支持最新版本的 ECMAScript，更强大且灵活。
可以监听整个对象的变化。
可以拦截多种操作。

优点：

灵活且强大的拦截能力，适用于代理对象。
可以监听整个对象的变化。

缺点：

兼容性较差，需要新版本的 JavaScript。
学习成本相对较高。

区别：

Proxy 更加强大和灵活，支持代理对象和监听整个对象。
Object.defineProperty 主要用于对象属性的精细控制。

使用场景：

代理对象，如拦截对象属性的访问和修改。
数据劫持，用于实现响应式框架（如Vue）。
监听对象变化，如实现数据变化的通知机制。

总结来说，Object.defineProperty 主要用于对象属性的特性控制，而 Proxy 更加灵活，适用于代理对象、监听对象变化、自定义拦截等场景。在新项目中，推荐使用 Proxy，但在需要兼容老版本 JavaScript 的项目中，可能需要使用 Object.defineProperty。