字节校招一面, 开5系狂飙

前言

9月中小厂面的顺风顺水，但百度、蔚来等大厂都吃了挂面。节前来了个小惊喜，好未来一面就给了offer，舒服7天，踩着家里的5系狂飙，村花该上车了....

狂飙的除了宝马，还有A股。各位都是挣着钱了吧，8号，也收到了字节校招的一面。面试官应该股票赚的飞起，晚上哪喝酒按摩都联系好了吧，想必面试会开心放点水，想想就开心。

这要是能面上字节，5系就换E300, 一起加油，面经与大家分享下。

面试题截图

一、https 建立连接的过程

在回答这个问题前，我们把https体系的知识复习一下

何为https

HTTPS是HTTP的安全升级版，通过SSL/TLS加密确保数据在客户端和服务器之间的传输更加安全，防止中间人攻击、数据篡改和窃听，同时还能验证服务器的真实性。

中间人攻击

中间人攻击是指攻击者在通信双方不知情的情况下拦截或篡改他们的通信内容，伪装成合法的一方，窃取敏感信息。

爱情故事

从前有一个男孩叫小明，和一个女孩叫小美。他们相爱了，但因为双方家庭的反对，无法公开传递书信。然而，他们依然决定通过一种秘密且安全的方式来交流，这种方式就像是HTTPS加密通信的原理。

小明每天都想写信给小美，告诉她他的思念和生活中的点滴，但他知道，如果通过普通的方式送信，信件很容易被人偷看或篡改。于是，小美对小明说：“你可以用我给你的特殊锁（公钥）把信封锁好，这样只有我能用自己的钥匙（私钥）打开信封。”

小明按照她的要求，先请求她的公钥。小美将这把公钥公开给小明。这个锁（公钥）虽然是公开的，但只有小美手中的钥匙（私钥）能解开它。每当小明写完信后，就用小美的锁（公钥）把信封锁好，然后交给信使。无论信件经过多少人之手，信使和其他人都无法打开信封，因为只有小美有解锁的钥匙。

当小美收到信时，她用自己的私钥打开信封，读到小明对她的心意。这就像HTTPS中的非对称加密：小明用公钥加密了信息，而小美用私钥解密。

然而，小美不仅希望信件能安全送达，还要确保信件一定来自小明，而不是别人伪造的。为了解决这个问题，小明每次写完信后，还会用自己的私钥在信上加上一个特殊的“加密签名”。这个签名根据信件内容和小明的私钥生成，只有他自己能创建这样的签名。

当小美收到信件后，她会使用小明的公钥来验证这个签名。如果签名验证通过，就证明这封信一定是小明写的，因为只有小明的私钥能生成这个特定的签名，别人无法伪造。

这样，即使有人试图冒充小明写信给小美，也无法成功，因为只有小明的公钥能验证这个独特的签名。小美通过这种方式，确保信件内容没有被篡改，并且确实来自小明。

但是，小明和小美也发现每次使用非对称加密锁信和解锁，虽然安全但非常耗时。于是他们决定换一种方法：在一开始时，小美通过非对称加密，安全地把一个对称加密的密钥（秘密钥匙）传递给小明。接下来，他们用这个对称加密密钥来快速加密和解密信件。虽然对称加密使用同一个密钥，但由于它是在初始时通过非对称加密传递的，依旧保持了极高的安全性。

通过这种结合非对称加密和对称加密的方式，小明和小美的信件交流既快速又安全，就像HTTPS中的加密流程。非对称加密用于密钥交换，保证安全，而对称加密则提高了通信效率。他们的爱情通过“锁”和“钥匙”安全传递，既不被窥探，也不会被伪造。即使信使经过许多双眼睛，他们的情书依然保持私密和真实。

对称加密和非对称加密

对称加密是一种加密方式，发送方和接收方使用同一个密钥对数据进行加密和解密，速度快但需安全传递密钥。

非对称加密是一种加密方式，使用一对密钥（公钥和私钥）进行数据加密和解密，公钥用于加密，私钥用于解密，确保安全通信。

https建立连接的过程

1. 客户端请求：

客户端（如浏览器）向服务器发送HTTPS请求，通常通过输入URL或点击链接开始。

1. 服务器响应：

服务器接收到请求后，会将其自己的数字证书发送给客户端，数字证书中包含服务器的公钥和其他信息（如证书颁发机构的信息）。

1. 证书验证：

客户端检查服务器的数字证书是否有效，包括验证证书的签名、是否过期，以及是否由可信的证书颁发机构（CA）签发。

1. 生成会话密钥：

如果证书有效，客户端使用服务器的公钥加密一个随机生成的会话密钥（对称密钥），并将其发送给服务器。

1. 服务器解密：

服务器使用其私钥解密客户端发送的会话密钥，从而获得对称密钥。

1. 加密通信：

之后，客户端和服务器都使用这个会话密钥进行对称加密的通信，确保传输的数据安全且保密。

1. 结束连接：

在会话结束时，客户端和服务器可以选择关闭连接并丢弃会话密钥，以确保安全。

二、页面渲染到浏览器的过程

经典的从输入url到页面显示的整个过程

1. 用户输入和DNS解析**

• 用户输入URL：用户在浏览器中输入URL并按下回车。

• DNS查询：浏览器向DNS服务器发送请求，以获取该域名对应的IP地址。

DNS概念

DNS（域名系统）是将人类易读的域名转换为机器可读的IP地址的系统，类似于互联网的“电话簿”，帮助用户找到网站服务器。是一个分布式域名数据库。

DNS 查询流程

首先，浏览器检查本地缓存是否有域名对应的IP地址；如果没有，操作系统会向配置的DNS服务器发起请求。DNS服务器通过递归查询从根服务器开始，依次查询TLD服务器和权威DNS服务器，最终返回IP地址。查询结果会被缓存，以加快下次解析速度。

• DNS缓存：如果之前访问过该网站，浏览器会直接使用缓存的IP地址，减少请求时间。

2. 建立TCP连接**

• 三次握手：浏览器与服务器之间建立TCP连接，通常使用HTTP或HTTPS协议。

• TLS握手（如果使用HTTPS）：在HTTPS中，浏览器与服务器之间还会进行TLS握手，确保通信的安全性。 TLS的全称是 Transport Layer Security（传输层安全协议）。

3. 发送HTTP请求**

• 请求发送：浏览器向服务器发送HTTP请求，请求相应的HTML页面及其资源（CSS、JS、图片等）。

• HTTP/2多路复用：如果服务器支持HTTP/2，浏览器可以在同一TCP连接上同时发送多个请求，减少延迟。

4. 服务器响应**

• 响应数据：服务器处理请求并返回响应，包含HTML文档及所需的资源URL。

• 内容分发网络（CDN） ：如果使用CDN，静态资源（如图片、JS、CSS）可能由CDN节点直接提供，减少延迟。

何为CDN?

CDN（内容分发网络）是通过全球分布的服务器节点，帮助用户更快地访问网站资源，减少延迟、提高加载速度的网络系统。

静态资源适合用CDN发布是因为CDN能将资源分发到全球各地的节点服务器，用户可以从离自己最近的节点获取资源，减少延迟并提升加载速度。

举个电商网站的例子：当用户在访问一个全球电商网站时，页面上有许多图片（如商品图片）、CSS文件、JavaScript脚本等静态资源。如果这些资源全部从原始服务器加载，用户距离服务器越远，加载速度越慢。而通过CDN，商品图片和其他静态资源可以从距离用户最近的CDN节点加载，即使在不同国家或地区访问，页面也能快速渲染，从而改善用户体验、提升购买转化率。

CDN系统会自动选择最优的节点来提供数据，确保资源从最近的节点传输给用户，减少延迟。

5. 浏览器处理响应 • 解析HTML：浏览器接收到HTML响应后开始解析，构建DOM树。

• 请求资源：在解析HTML时，浏览器发现CSS和JS文件等资源，立即发起新的HTTP请求。

• 资源优先级：通常，浏览器会优先请求CSS文件，因为CSS会影响页面渲染。

6. 构建渲染树 • 构建CSSOM：浏览器解析CSS文件，构建CSSOM（CSS对象模型）。

• 合并DOM与CSSOM：浏览器将DOM树和CSSOM树合并，生成渲染树（Render Tree），用于计算布局。

7. 布局和绘制

• 布局计算：浏览器计算每个节点在页面上的确切位置和大小，形成布局。

• 绘制：根据布局信息，浏览器将渲染树绘制到屏幕上。

8. 优化过程

• DNS预解析 的优点是可以提前进行DNS解析，加快后续对该域名资源的请求速度，减少页面加载延迟。

• 懒加载（Lazy Loading） ：图片等非关键资源可以在用户滚动到可视区域时再加载，提升页面初始加载速度。

• HTTP缓存：使用浏览器缓存策略（如ETag、Last-Modified）来缓存资源，减少重复请求。

• 减少HTTP请求：通过合并CSS和JS文件，使用图像精灵等方法减少HTTP请求数量。

js和css在渲染到页面的途中会有什么影响

在网页加载和渲染过程中，JavaScript (JS) 和 CSS 的处理方式会对页面的渲染性能和用户体验产生显著影响。以下是一些关键点：

1. CSS 的阻塞行为

• 样式表解析阻塞渲染：浏览器在解析 HTML 时，遇到 <link rel="stylesheet"> 标签时会暂停 HTML 解析，直到 CSS 文件下载并解析完成。这是因为浏览器需要知道所有样式信息才能正确渲染页面。
• 渲染树构建：浏览器需要构建两个树：DOM 树（文档对象模型）和 CSSOM 树（CSS 对象模型）。CSSOM 树包含了所有样式规则。只有当这两个树都构建完成后，浏览器才能开始构建渲染树并绘制页面。

2. JavaScript 的阻塞行为

• 脚本执行阻塞解析：默认情况下，浏览器在解析 HTML 时遇到 <script> 标签会暂停 HTML 解析，直到脚本下载并执行完成。这是因为 JavaScript 可能会修改 DOM 或 CSSOM，因此浏览器必须等待脚本执行完毕才能继续解析 HTML。

• 异步和 defer 属性：

  • async：适用于外部脚本文件，表示脚本可以异步下载，但一旦下载完成会立即执行，不会等待其他脚本或 HTML 解析。
  • defer：适用于外部脚本文件，表示脚本会在 HTML 解析完成后、DOMContentLoaded 事件触发前执行。多个带有 defer 属性的脚本会按照它们在 HTML 中出现的顺序执行。

3. 资源加载优先级

• 关键资源优先加载：浏览器会根据资源的类型和重要性分配不同的优先级。例如，CSS 被认为是关键资源，因为没有 CSS 页面无法正确渲染。JavaScript 也可以通过 async 和 defer 属性来调整其加载优先级。
• 预加载和预读取：使用 <link rel="preload"> 和 <link rel="prefetch"> 可以提前加载关键资源，提高页面加载速度。

4. 重排和重绘

• 重排（Reflow） ：当 DOM 结构发生变化时，浏览器需要重新计算元素的几何属性（如位置和大小），这称为重排。重排是一个昂贵的操作，因为它会影响整个页面或部分页面的布局。
• 重绘（Repaint） ：当元素的视觉样式发生变化但不影响布局时（如颜色变化），浏览器需要重新绘制元素，这称为重绘。重绘比重排代价低，但频繁的重绘也会导致性能问题。

5. 最佳实践

• 优化 CSS 交付：将关键 CSS 内联到 HTML 中，减少外部样式表的数量，使用媒体查询来延迟非关键样式表的加载。
• 优化 JavaScript 加载：使用 async 和 defer 属性来控制脚本的加载和执行时机，避免阻塞 HTML 解析。
• 减少重排和重绘：尽量减少对 DOM 的频繁操作，使用 CSS 动画和变换来代替 JavaScript 动画，避免使用 table 布局等高成本的布局方式。

通过以上方法，可以显著提升网页的加载速度和渲染性能，从而改善用户体验。

js为什么放在底部，css放在head

将JS放在底部可以避免阻塞页面渲染，加快页面显示速度；将CSS放在 <head> 可以确保页面在加载时正确应用样式。

讲一下作用域

请看腾讯三面 打针哥登顶

key的作用

在 Vue 中，key 用于标识虚拟 DOM 中每个节点的唯一性，帮助 Vue 的（双端） diff 算法高效对比新旧节点。当虚拟 DOM 更新时，key 让 Vue 能快速识别哪些节点被复用、添加或删除，避免不必要的重新渲染。特别是在列表渲染时，key 提供了更准确的对比依据，优化性能，确保元素状态（如输入框内容、动画等）保持一致。

nextTick的作用， 怎么实现的

介绍和作用

vue.nextTick 用于在下一次 DOM 更新后执行回调函数，确保在 DOM 完成渲染和更新后操作数据或执行逻辑。

举例

• 在修改数据后，确保在 DOM 更新完成后执行某些操作（如滚动到特定元素、调整布局、或聚焦输入框）。
• 在列表或表单渲染后，操作新插入的 DOM 元素或组件。
• 在动态切换组件、幻灯片或元素动画时，确保在渲染和动画完成后再触发回调。
• 在数据变更导致异步更新时，确保某些操作与这些更新同步。

原理

建议看看 juejin.cn/post/708786…

从升序数组中找到与目标值最接近的数

首先，确认使用二分 思想。

function binarySearchClosest(arr, target) {
    let low = 0;
    let high = arr.length - 1;

    while (low <= high) {
        let mid = Math.floor((low + high) / 2);

        if (arr[mid] === target) {
            return arr[mid];
        } else if (arr[mid] < target) {
            low = mid + 1;
        } else {
            high = mid - 1;
        }
    }

    // 找到最接近的数字
    // 需要处理边界情况
    if (low >= arr.length) {
        return arr[high];
    }
    if (high < 0) {
        return arr[low];
    }
    // 绝对值
    if (Math.abs(arr[low] - target) < Math.abs(arr[high] - target)) {
        return arr[low];
    } else {
        return arr[high];
    }
}

// 例子
const arr = [1, 2, 3, 4, 5];
const target = 3.7;
console.log(binarySearchClosest(arr, target));  // 输出 4

const target2 = -1;
console.log(binarySearchClosest(arr, target2));  // 输出 1

const target3 = 6;
console.log(binarySearchClosest(arr, target3));  // 输出 5

版本号的排序

leetcode 165 题目

一道经典的字符串处理和数组操作问题

function compareVersion(version1, version2) {
    const v1Parts = version1.split('.').map(Number);
    const v2Parts = version2.split('.').map(Number);

    // 使两个数组长度相同
    const maxLength = Math.max(v1Parts.length, v2Parts.length);
    while (v1Parts.length < maxLength) v1Parts.push(0);
    while (v2Parts.length < maxLength) v2Parts.push(0);

    // 逐个比较修订号
    for (let i = 0; i < maxLength; i++) {
        if (v1Parts[i] > v2Parts[i]) {
            return 1;
        } else if (v1Parts[i] < v2Parts[i]) {
            return -1;
        }
    }

    return 0;
}

总结

果然股票狂涨，面试官想做铲屎官，题目挺好过的， 期待5系换E300!!!

 

更多前端面试题可分享