前端面试题详解整理115|rgba颜色转换 ，重排重绘，浏览器进程，vue2,vu3的区别，强缓存，协商缓存，http,https,tcp四次挥手，js单线程

金色的雨570
67 阅读17分钟

快手前端一二面

一面：
1、css像素
在 CSS 中，像素（pixel）是指屏幕上的一个物理点，是显示器上最小的显示单位。CSS 使用像素作为长度单位，用于定义元素的尺寸、间距、边框等属性。

CSS 中的像素通常分为两种：

  1. 物理像素（Physical Pixel）：也称为设备像素，是显示器上的实际点，通常由显示设备的硬件决定。

  2. 逻辑像素（Logical Pixel）：也称为 CSS 像素，是 CSS 中使用的抽象单位，与具体显示设备无关。在普通的桌面显示器上，1 个逻辑像素通常对应 1 个物理像素。但是在高分辨率屏幕（如 Retina 屏幕）上，1 个逻辑像素可能对应多个物理像素。

为了适应不同分辨率的显示设备，CSS 还引入了一些与像素相关的单位：

  1. 点阵密度（Dots Per Inch，DPI）：表示每英寸的像素数，常用单位是 dpi。例如，一个屏幕的 DPI 是 96，表示每英寸有 96 个像素。

  2. 像素比（Device Pixel Ratio，DPR）：表示一个逻辑像素对应的物理像素数。例如，Retina 屏幕的 DPR 通常为 2，表示一个逻辑像素对应 2 个物理像素。

总的来说，CSS 中的像素是一个抽象的单位，用于描述元素的大小和位置，具体的物理表现取决于显示设备的硬件特性和浏览器的渲染机制。

2、进程和线程的区别

进程（Process）和线程（Thread）是操作系统中用于执行程序的基本概念，它们之间有以下区别：

  1. 定义：

    • 进程：是程序的一次执行过程，是操作系统资源分配的基本单位，拥有独立的内存空间和系统资源。
    • 线程：是进程中的一个执行单元，是操作系统调度的基本单位，共享进程的内存空间和系统资源。

  2. 资源占用：

    • 进程：拥有独立的内存空间和系统资源，相互独立，各自拥有一份资源。
    • 线程：共享进程的内存空间和系统资源，线程间可以相互访问和修改共享的数据。

  3. 调度：

    • 进程：是系统分配资源的基本单位，进程间切换开销大。
    • 线程：是 CPU 调度的基本单位，线程切换开销小，上下文切换速度快。

  4. 创建和销毁：

    • 进程：创建和销毁开销较大，通常需要分配和释放独立的内存空间。
    • 线程：创建和销毁开销较小，通常复用进程的内存空间。

  5. 通信：

    • 进程：进程间通信（IPC）需要特殊的机制，如管道、消息队列、信号量、共享内存等。
    • 线程：线程间通信相对容易，直接通过共享内存进行交互。

总的来说，进程和线程都是执行程序的基本单位，但是在资源占用、调度、创建销毁、通信等方面有所不同。在实际开发中，合理利用进程和线程，可以充分发挥系统资源的效率和性能。 # 3、浏览器有哪些进程 
现代浏览器通常会采用多进程架构来提高性能和安全性，常见的浏览器进程包括：

  1. 浏览器进程（Browser Process）：

    • 这是浏览器的主进程，负责管理用户界面、地址栏、书签栏等部分，以及各个标签页的管理。
    • 包括网络操作、文件访问、插件管理等功能。

  2. 渲染进程（Renderer Process）：

    • 每个标签页通常对应一个渲染进程，负责解析和渲染 HTML、CSS、JavaScript，绘制页面内容。
    • 为了提高安全性，现代浏览器通常会采用沙盒机制，将渲染进程隔离开来，防止恶意代码对系统的影响。

  3. GPU 进程（GPU Process）：

    • 负责处理浏览器中的 GPU 相关任务，如 3D 绘图、视频播放等，以提高性能和节能。
    • 在某些浏览器中，GPU 进程可能会与浏览器进程合并，或者独立存在。

  4. 网络进程（Network Process）：

    • 负责处理网络请求和响应，以及管理网络资源的加载和缓存。
    • 在某些浏览器中，网络进程可能会与浏览器进程合并。

  5. 插件进程（Plugin Process）：

    • 负责运行浏览器中的插件，如 Flash Player、PDF 阅读器等。

在某些浏览器中，这些进程可能会合并或者拆分，具体架构会根据浏览器的实现方式和版本而有所不同。使用多进程架构能够提高浏览器的稳定性、安全性和性能，并且能够更好地利用多核 CPU 资源。

4、浏览器是怎么进行渲染的

浏览器渲染页面的过程可以简单地分为以下几个步骤：

  1. 解析HTML： 浏览器首先会解析HTML文档，构建DOM（文档对象模型）树。DOM树是由HTML中的各个元素所组成的树形结构，描述了页面的结构。

  2. 解析CSS： 浏览器接着会解析CSS样式文件，构建CSSOM（CSS对象模型）树。CSSOM树描述了各个元素的样式和布局信息。

  3. 合并DOM和CSSOM： 浏览器将DOM树和CSSOM树合并成一棵渲染树（Render Tree）。渲染树中只包括需要显示的元素和其样式信息，不包括不需要显示的元素（例如隐藏元素）。

  4. 布局计算： 浏览器根据渲染树计算每个元素在页面中的位置和大小，这个过程称为布局计算（Layout）。布局计算也称为重排（Reflow），因为它可能导致页面的重新布局。

  5. 绘制页面： 浏览器使用计算好的布局信息，将页面内容绘制到屏幕上。这个过程称为绘制（Paint），也称为重绘（Repaint）。

  6. 显示页面： 浏览器将绘制好的页面内容显示到用户的屏幕上。

这些步骤并不是严格按顺序执行的，而是在实际渲染过程中交错进行的。例如，解析HTML和CSS的过程可能是并行执行的，而布局计算和绘制页面的过程则可能交替进行。

5、重排和重绘，什么时候触发

重排（reflow）和重绘（repaint）是浏览器渲染页面时发生的两种不同的过程。

  1. 重排（reflow）： 当页面布局和几何属性发生改变时，浏览器需要重新计算元素的几何属性（例如位置、大小等），然后重新布局页面。这个过程称为重排。重排会影响整个页面的布局和渲染，因此是比较昂贵的操作。

  2. 重绘（repaint）： 当元素的样式发生改变，但不影响其布局属性时，浏览器只需要重新绘制元素的样式，而不需要重新计算元素的布局。这个过程称为重绘。重绘不会影响页面的布局，所以通常比重排要快速。

触发重排和重绘的情况包括：

  • 改变元素的位置、大小、边距、填充等几何属性。
  • 添加或删除DOM元素。
  • 改变元素的样式，例如颜色、背景、字体等。
  • 改变浏览器窗口大小。
  • 页面的初始渲染。

由于重排和重绘都会消耗大量的计算资源，因此应尽量避免不必要的操作，以提高页面的性能和响应速度。常见的优化方法包括使用CSS3的transform和opacity属性来实现动画效果，以及合并多次DOM操作和样式改变。

6、js是单线程还是多线程，为什么

JavaScript是单线程的，这意味着它一次只能执行一个任务。这种设计是由JavaScript最初用于浏览器中的脚本语言决定的。

JavaScript之所以是单线程的，主要有以下几个原因：

  1. 简单性： 单线程使得JavaScript的设计和实现更加简单。多线程编程需要考虑线程之间的同步、竞态条件等问题，而单线程避免了这些复杂性。

  2. 安全性： 在Web浏览器中，多个JavaScript代码片段同时运行可能会导致安全漏洞。例如，如果一个脚本可以访问另一个脚本中的变量或DOM元素，可能会导致安全问题。单线程模型可以避免这种情况。

  3. 浏览器设计： 浏览器是单线程的，它负责管理多个标签页和多个JavaScript代码片段之间的交互。单线程执行JavaScript代码有助于确保页面的响应性和流畅性。

尽管JavaScript是单线程的，但它仍然可以通过异步编程模型来处理并发任务，例如使用事件循环和回调函数。这种方式可以在单线程的情况下处理多个异步任务，从而实现非阻塞的I/O操作和响应式的用户界面。

 # 7、异步的方式 
异步编程是一种编程模式，用于处理需要等待某些操作完成后才能继续执行的情况。在JavaScript中，常见的异步编程方式包括回调函数、Promise、async/await等。

  1. 回调函数： 在异步操作完成后执行的函数作为回调传递给异步函数，当操作完成时，调用回调函数来处理结果。
asyncFunction(arg1, arg2, function(result) {
    // 处理异步操作的结果
});
  1. Promise： Promise是一种用于表示异步操作的对象，它可以处于三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。通过Promise对象的then方法来注册处理成功和失败情况的回调函数。
asyncFunction(arg1, arg2)
    .then(function(result) {
        // 处理异步操作的结果
    })
    .catch(function(error) {
        // 处理异步操作的错误
    });
  1. async/await： async函数是用来定义一个返回Promise对象的异步函数，其中await操作符可以暂停async函数的执行，等待一个Promise对象的解析结果，然后继续执行async函数。
async function myFunction() {
    try {
        const result = await asyncFunction(arg1, arg2);
        // 处理异步操作的结果
    } catch (error) {
        // 处理异步操作的错误
    }
}

这些异步编程方式都可以帮助我们更好地处理JavaScript中的异步操作，提高代码的可读性和可维护性。

8、TCP四次挥手
TCP四次挥手是指在TCP连接关闭时，客户端和服务器端各发送两个报文来关闭连接的过程。

  1. 第一次挥手： 客户端向服务器发送一个FIN报文，表示客户端已经没有数据要发送了，但仍然可以接收数据。

  2. 第二次挥手： 服务器收到客户端发送的FIN报文后，向客户端发送一个ACK报文，表示已经收到了客户端发送的FIN报文。

  3. 第三次挥手： 服务器向客户端发送一个FIN报文，表示服务器已经没有数据要发送了，但仍然可以接收数据。

  4. 第四次挥手： 客户端收到服务器发送的FIN报文后，向服务器发送一个ACK报文，表示已经收到了服务器发送的FIN报文。

完成四次挥手后，TCP连接就彻底关闭了。  # 9、https几次握手
HTTPS协议的建立需要经过两次握手和一次握手，总共三次握手的过程。

  1. 第一次握手： 客户端向服务器发送一个连接请求报文，其中包含一个随机数作为客户端的密钥生成器，请求使用SSL协议进行通信。

  2. 第二次握手： 服务器收到客户端的连接请求后，向客户端发送一个确认报文，其中包含一个随机数作为服务器的密钥生成器，确认同意使用SSL协议进行通信。

  3. 第三次握手： 客户端收到服务器的确认报文后，再次向服务器发送一个确认报文，确认同意使用SSL协议进行通信。

完成三次握手后，SSL/TLS连接就建立起来了，双方可以开始安全地进行数据传输。

 # 10、常见的非对称加密和对称加密算法 
常见的非对称加密算法包括RSA（Rivest-Shamir-Adleman）、DSA（Digital Signature Algorithm）、ECC（Elliptic Curve Cryptography）等，而常见的对称加密算法包括AES（Advanced Encryption Standard）、DES（Data Encryption Standard）、3DES（Triple Data Encryption Algorithm）等。

  1. RSA（Rivest-Shamir-Adleman）： 是一种基于大素数的加密算法，广泛应用于数字签名和密钥交换等场景。RSA算法是一种非对称加密算法，即它使用一对密钥（公钥和私钥），其中公钥用于加密，私钥用于解密。RSA算法的安全性基于大整数分解问题，即在已知其公钥的情况下，要从中恢复出其私钥是一种困难的计算问题。

  2. DSA（Digital Signature Algorithm）： 是一种数字签名算法，用于验证消息的完整性和来源。DSA算法使用的是基于离散对数问题的数学原理。

  3. ECC（Elliptic Curve Cryptography）： 是一种基于椭圆曲线的加密算法，与RSA相比，它能够提供相同的安全性但使用更短的密钥长度，因此在资源受限的环境（如移动设备、物联网设备）中更加适用。

  4. AES（Advanced Encryption Standard）： 是一种对称加密算法，曾被美国政府用作加密机密文件的标准。AES算法使用相同的密钥来进行加密和解密，密钥长度可以是128位、192位或256位，其中128位密钥长度的AES算法是最常见的。

  5. DES（Data Encryption Standard）： 是一种对称加密算法，由IBM研发，被美国政府采用作为加密标准。但DES算法的密钥长度较短，仅为56位，已被认为不安全，因此现在已经不推荐使用。

  6. 3DES（Triple Data Encryption Algorithm）： 是DES算法的改进版本，通过多次应用DES算法来增加密钥长度，提高安全性。它使用三个不同的密钥对数据进行加密，提供了更高的安全性。

非对称加密算法相对于对称加密算法来说，安全性更高但计算成本也更高，因此通常用于密钥协商和数字签名等场景；而对称加密算法在加解密速度方面更高效，适用于大量数据的加密传输。

11、http版本发展

HTTP（Hypertext Transfer Protocol）是一种用于传输超文本数据（如 HTML）的应用层协议，它是 Web 中最基础的协议之一。HTTP 协议经历了多个版本的发展，其中比较重要的版本有 HTTP/1.0、HTTP/1.1、HTTP/2 和 HTTP/3。

  1. HTTP/0.9： 是最早的版本，于1991年问世，只支持GET请求，并且响应内容只能是HTML文本。

  2. HTTP/1.0： 于1996年发布，引入了更多的方法（如POST、HEAD、PUT、DELETE等）、状态码、请求头、响应头等。但每个请求/响应建立一次TCP连接，效率低下。

  3. HTTP/1.1： 于1997年发布，是当前 Web 中最广泛使用的版本。引入了持久连接（Keep-Alive）、管道化（Pipeline）、分块传输编码（Chunked Transfer Encoding）、Host头字段等特性，大大提高了性能和效率。

  4. HTTP/2： 于2015年发布，是对 HTTP/1.1 的重大改进。引入了多路复用（Multiplexing）、头部压缩、服务器推送等特性，从而进一步提高了性能和效率。HTTP/2 通过二进制协议替代了 HTTP/1.x 中的文本协议，减少了网络传输的开销，同时允许在同一个连接上发送多个请求和响应，避免了建立多个连接的开销。

  5. HTTP/3： 是当前最新的 HTTP 协议版本，于2018年发布。HTTP/3 基于 QUIC（Quick UDP Internet Connections）协议，使用 UDP 协议而不是 TCP 协议来传输数据，通过多路复用、头部压缩等技术提高了性能。HTTP/3 的主要特点是减少了连接的建立和关闭所需的往返时间，并且在恶劣网络环境下具有更好的表现。

HTTP 协议的不断发展，使得 Web 应用能够更快、更高效地进行数据传输，提升了用户的使用体验。

12、强缓存

强缓存是浏览器通过设置响应头中的缓存控制字段，告诉浏览器可以直接从本地缓存中获取资源而不需要发送请求到服务器。这样可以有效减少网络请求，加快页面加载速度，提升用户体验。

在 HTTP 协议中，常用的强缓存控制字段有两个：Expires 和 Cache-Control。

  1. Expires： 它是一个日期，表示资源的过期时间。当浏览器请求资源时，会将资源的过期时间与当前时间进行比较，如果当前时间小于过期时间，则直接从缓存中获取资源；否则，向服务器发送请求。但存在一些问题，例如本地时间和服务器时间不一致，因此不再常用。

  2. Cache-Control： 它是一个指令集，用于控制缓存的行为。常见的指令有：

    • max-age=<seconds>：表示资源在本地缓存中的最大存活时间，单位为秒。
    • no-cache：表示强制向服务器发送请求，服务器会验证资源是否更新，如果未更新，则返回 304 状态码。
    • no-store：表示不缓存任何内容，每次都要向服务器发送请求。
    • public：表示响应可以被任何中间节点（如 CDN）缓存。
    • private：表示响应只能在客户端缓存，中间节点不能缓存。

使用 Cache-Control 比 Expires 更为灵活，因此在现代 Web 开发中更常用。

强缓存优点是可以减少请求延迟和网络流量，提升网页加载速度；缺点是当资源有更新时，客户端不会得到最新的资源，可能会导致浏览器展示过期内容。因此需要配合合适的缓存策略来确保资源的有效性和一致性。

13、vue2和vue3的区别

Vue.js 是一个流行的 JavaScript 框架，Vue 3 是其最新版本，与 Vue 2 相比有一些重大的变化和改进：

  1. 性能优化： Vue 3 的虚拟 DOM 实现更高效，性能更好，包括编译时优化、渲染器等。

  2. Composition API： Vue 3 引入了 Composition API，提供了一种新的组织组件代码的方式，更灵活和可组合。

  3. Typescript 支持： Vue 3 更好地支持 TypeScript，包括更强大的类型推断和验证。

  4. 更小的体积： Vue 3 的代码体积更小，加载速度更快。

  5. 新的生命周期钩子： Vue 3 引入了一些新的生命周期钩子，包括 beforeUnmount、onDeactivated 等。

  6. Teleport 组件： Vue 3 新增了 Teleport 组件，用于更容易地在 DOM 中的其他位置渲染组件。

  7. Fragments： Vue 3 支持 Fragments，允许组件返回多个根节点。

  8. 响应式系统的改进： Vue 3 中的响应式系统进行了一些改进，包括更好的响应式 API 和更快的响应式更新。

  9. 全局 API 的修改： Vue 3 中一些全局 API 的名称和用法有所修改，例如 $on 和 $off 替换为 emits 和 on。

总的来说，Vue 3 在性能、开发体验和功能上都有很大的提升，但也需要注意它可能需要一些学习成本，特别是在使用 Composition API 方面。

avatar
文章
阅读
粉丝