前端面试题详解整理43|评价指标,身份鉴权 与 网络攻击 ,区间合并token无痛刷新,cookie、session ,文件下载，防抖节流，https加密。

金色的雨570
93 阅读16分钟

字节前端三面

1. 做过哪些项目，评价指标是怎么样的

前端性能评价指标是衡量前端应用性能的关键指标，以下是一些常见的前端性能评价指标：

  1. 页面加载时间（Page Load Time）： 页面加载时间是指用户从发出页面请求到页面完全加载并可交互所需的时间。通常用页面加载完成时刻减去页面请求开始时刻来计算。

  2. 首次内容渲染时间（First Contentful Paint，FCP）： 首次内容渲染时间是指页面中首次出现任何文本、图片、非白色背景或者 SVG 等内容的时间。FCP 可以衡量用户对页面内容的第一次视觉反馈时间。

  3. 首次有效渲染时间（First Meaningful Paint，FMP）： 首次有效渲染时间是指页面内容的主要部分首次渲染完成并可见的时间。FMP 可以衡量用户对页面内容的第一次有意义的视觉反馈时间。

  4. 交互就绪时间（Time to Interactive，TTI）： 交互就绪时间是指页面变得完全可交互的时间，即所有 JavaScript 执行完成、事件监听器绑定完成，并且用户可以在页面上进行交互操作的时间。

  5. 资源加载时间（Resource Load Time）： 资源加载时间是指页面中各个资源（如图片、样式表、脚本等）加载完成所需的时间。可以分别衡量每种资源的加载时间，也可以综合计算所有资源加载完成的时间。

  6. DOMContentLoaded 时间： DOMContentLoaded 时间是指 HTML 文档中的 DOM 结构完全加载并解析完成时的时间。通常用来衡量页面的初始渲染时间。

  7. 白屏时间（白屏到首屏渲染时间）： 白屏时间是指用户打开页面到页面开始有内容渲染出来的时间，即白屏时间到首屏渲染时间之间的时间差。

  8. 页面大小（Page Size）： 页面大小指页面所包含的所有资源的大小，包括 HTML、CSS、JavaScript 文件以及图片、视频等媒体资源的大小。

以上指标可以帮助开发者全面评估前端应用的性能表现，并针对性地进行优化和改进。在实际工作中，可以根据具体的业务场景和用户需求选择合适的指标进行评估和监控。

3. 如果你的项目顺利完成的话，它将应用在什么地方
4. 看的最近一篇关于前端的博客是什么内容

5. 身份鉴权 与 网络攻击

身份鉴权和网络攻击是网络安全领域中的两个重要主题，它们通常紧密相关。

  1. 身份鉴权（Authentication）： 身份鉴权是指确认用户或者系统的身份的过程。在网络应用中，身份鉴权是确保只有合法用户能够访问受保护资源的一种机制。常见的身份鉴权方式包括：

    • 基于用户名和密码的认证： 用户提供用户名和密码进行认证，服务器验证用户提供的凭据是否匹配已存储的凭据。
    • 令牌（Token）认证： 用户在身份验证成功后，服务器颁发一个令牌给客户端，客户端在后续请求中使用该令牌进行身份验证。
    • 双因素认证（2FA）： 用户需要提供两种或多种不同类型的身份凭据进行认证，例如密码和手机短信验证码。

  2. 网络攻击（Cyber Attacks）： 网络攻击是指对计算机系统、网络或者网络设备的非法入侵、破坏、窃取信息等行为。常见的网络攻击包括：

    • SQL 注入（SQL Injection）： 攻击者利用应用程序对 SQL 查询的处理不当，通过注入恶意 SQL 代码来执行未经授权的数据库操作。
    • 跨站脚本（XSS）攻击： 攻击者在网页中注入恶意脚本，使得用户在浏览器上执行恶意代码，从而窃取用户信息或者执行恶意操作。
    • 跨站请求伪造（CSRF）攻击： 攻击者利用用户的身份信息伪造请求，以用户的名义执行未经授权的操作，如发起转账、更改密码等。
    • 拒绝服务（DDoS）攻击： 攻击者通过向目标服务器发送大量的请求，占用服务器资源，导致服务不可用。

在实际应用中，为了保护系统安全，需要采取一系列的安全措施，包括加密通信、使用安全的身份鉴权机制、进行安全审计等。同时，也需要及时更新系统和应用程序，修补已知的安全漏洞，以减少遭受网络攻击的风险。

7. 你做过的最有成就感的事情
8. 你学习的最好的课程是什么
9. 最差的课程是什么
10. 说说你了解的前端的前沿技术有哪些

作者：洒脱的六边形战士加麻加辣
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

前端秋招 字节飞书一面

一面 9.22
1、自我介绍

2、token无痛刷新

Token 无痛刷新（Silent Token Renewal）是一种用于刷新用户令牌（Token）的技术，旨在提供无需用户干预的令牌刷新机制，从而延长用户的会话有效期，同时保持用户的登录状态。

通常情况下，用户令牌具有一定的有效期，过期后用户需要重新进行身份验证（通常是重新登录）才能获取新的令牌。但是，在某些情况下，我们希望能够在用户令牌即将过期时，通过后台自动获取新的令牌，而无需用户的干预，以确保用户的登录状态不会中断。

实现 Token 无痛刷新的一般步骤如下：

  1. 监测 Token 有效期： 在客户端应用中，通过监测用户令牌的有效期，当令牌即将过期时，触发刷新机制。

  2. 发起 Token 刷新请求： 在令牌即将过期时，客户端应用向后台发起一个 Token 刷新请求。这个请求通常会包含用户的身份信息以及用于认证和授权的凭据。

  3. 后台验证和刷新 Token： 后台接收到 Token 刷新请求后，进行用户身份验证，并根据验证结果为用户颁发新的令牌。这个过程可能需要与认证服务器进行通信，以验证用户身份并获取新的令牌。

  4. 返回新的 Token： 后台将新的令牌返回给客户端应用。客户端应用收到新的令牌后，更新本地存储的令牌，并在后续的请求中使用新的令牌进行身份验证和授权。

  5. 继续用户会话： 客户端应用使用新的令牌继续用户的会话，用户无需重新登录或者进行其他操作，即可保持登录状态。

通过 Token 无痛刷新机制，可以实现用户登录状态的无缝延长，提升用户体验，同时保证系统的安全性。需要注意的是，在实现 Token 无痛刷新时，需要注意安全性，确保令牌刷新请求和新的令牌都是安全可靠的，防止被恶意攻击者利用。

3、前端登录的方式有那些：token、cookie、session

前端登录的方式主要有以下几种：

  1. Token 认证（Token-based Authentication）：

    • 在用户登录成功后，服务器生成一个包含用户信息的 Token，并将 Token 返回给客户端。
    • 客户端将 Token 存储在本地，通常是在浏览器的本地存储（localStorage 或 sessionStorage）中。
    • 在后续的请求中，客户端通过在请求头中携带 Token 来进行身份验证。
    • 服务器通过解析 Token 并验证其有效性来确认用户的身份。

  2. Cookie 认证（Cookie-based Authentication）：

    • 在用户登录成功后，服务器生成一个包含用户信息的加密 Cookie，并将 Cookie 返回给客户端。
    • 客户端将 Cookie 存储在浏览器的 Cookie 中。
    • 在后续的请求中，客户端的浏览器会自动将相应的 Cookie 包含在请求头中发送给服务器。
    • 服务器通过解析 Cookie 并验证其有效性来确认用户的身份。

  3. Session 认证（Session-based Authentication）：

    • 在用户登录成功后，服务器创建一个与用户相关联的会话（Session），并将会话ID返回给客户端。
    • 客户端将会话ID存储在本地，通常是在 Cookie 中。
    • 在后续的请求中，客户端的浏览器会自动将会话ID包含在请求头中发送给服务器。
    • 服务器根据会话ID来查找与用户关联的会话信息，并验证用户的身份。

这些登录方式各有优缺点，Token 认证相对来说更为灵活，因为它可以在不同的客户端（如 Web、移动端、桌面端）之间共享，而且不受同源策略的限制。Cookie 和 Session 认证则是传统的方式，它们需要依赖浏览器的 Cookie 机制来存储会话信息，因此在跨域请求时可能存在一些限制。选择合适的登录方式取决于具体的业务需求和安全考虑。

4、文件下载

文件下载通常是通过将文件链接提供给用户，使用户可以点击链接来下载文件。在 Web 开发中，实现文件下载可以通过以下几种方式：

  1. 超链接下载： 最简单的方式是使用 <a> 标签的 download 属性来指定文件的下载地址。例如：

    <a href="/path/to/file.pdf" download="filename.pdf">Download PDF</a>

    这将在用户点击链接时下载 file.pdf 文件，并命名为 filename.pdf。

  2. 通过后端处理： 可以通过后端代码来处理文件下载请求。当用户点击下载链接时，前端发送请求到后端，后端根据请求返回相应的文件内容，并设置合适的 HTTP 头来提示浏览器下载。例如，在 Node.js 中可以这样实现：

    const express = require('express');
const app = express();

app.get('/download', (req, res) => {
  const filePath = '/path/to/file.pdf';
  res.download(filePath); // 发送文件作为下载响应
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

  3. 使用 Blob 对象： 可以通过 JavaScript 生成 Blob 对象，然后创建 URL，最后将 URL 赋给超链接的 href 属性，从而实现文件下载。例如：

    const fileData = '...'; // 文件内容
const blob = new Blob([fileData], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = 'filename.pdf';
link.click();

这些方法中，超链接下载是最简单和常见的方式，但是它无法控制文件名，而且需要用户手动点击链接来下载。通过后端处理或者 Blob 对象生成的方式可以更灵活地控制文件下载的行为，并且可以在后端进行权限控制和安全验证。

5、防抖节流、可以用到的场景

防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，它们可以应用在以下场景中：

  1. 防抖（Debounce）：

    • 输入框搜索： 当用户输入搜索关键词时，可以使用防抖来延迟触发搜索请求，避免用户连续输入触发多次请求，减少服务器压力。
    • 窗口大小改变： 当用户调整窗口大小时，可以使用防抖来延迟触发窗口大小改变事件的处理，减少不必要的重复渲染。
    • 按钮点击事件： 当用户点击按钮触发某些操作时，可以使用防抖来避免用户频繁点击造成的重复操作。

  2. 节流（Throttle）：

    • 滚动事件： 当用户滚动页面时，可以使用节流来控制滚动事件的触发频率，减少滚动事件的处理次数，提升页面性能。
    • 鼠标移动事件： 当用户在页面上移动鼠标时，可以使用节流来减少鼠标移动事件的触发频率，避免过多的事件处理操作。
    • 定时器执行： 当需要周期性地执行某个任务时，可以使用节流来控制任务的执行频率，确保任务在一定时间间隔内执行一次。

在实际应用中，防抖和节流可以有效地减少不必要的事件触发和处理次数，提升页面性能和用户体验。需要根据具体的业务场景和需求选择合适的方式，并根据实际情况调整防抖和节流的时间间隔。

6、https加密

HTTPS（HyperText Transfer Protocol Secure）是一种基于传输层安全协议（TLS/SSL）的安全通信协议，用于在网络上安全地传输数据。HTTPS协议通过对传输的数据进行加密和身份认证，从而保证通信的安全性和隐私性。

HTTPS加密主要通过以下两个步骤实现：

  1. 加密通信数据： HTTPS使用对称加密和非对称加密相结合的方式对通信数据进行加密，确保数据在传输过程中不被窃听或篡改。具体流程如下：

    • 当客户端与服务器建立连接时，服务器会发送包含其公钥的数字证书给客户端。
    • 客户端使用服务器的公钥来加密生成一个对称密钥，并发送给服务器。
    • 服务器使用自己的私钥来解密客户端发送的对称密钥。
    • 双方使用这个对称密钥来加密和解密通信数据，保证通信的机密性。

  2. 身份认证： HTTPS通过数字证书来对服务器的身份进行认证，确保客户端与服务器之间的通信是安全可信的。具体流程如下：

    • 服务器在与客户端建立连接时，会发送包含自己公钥以及相关信息的数字证书。
    • 客户端使用预置在浏览器中的信任根证书库中的根证书来验证服务器发送的数字证书的合法性。
    • 如果验证通过，客户端信任服务器，并继续与服务器建立安全连接；否则，连接会被终止。

通过加密通信数据和身份认证，HTTPS协议可以有效地保护网络通信的安全性和隐私性，防止敏感信息被窃取、篡改或伪造。因此，在对用户隐私敏感的Web应用中，使用HTTPS协议是非常重要的。

7、账号密码登录加密之后，怎么识别id

在账号密码登录时，通常用户会提供账号（如用户名、邮箱、手机号等）和密码，服务器端需要对密码进行加密存储，而不是明文存储。但是，为了识别用户身份，在进行认证时，仍然需要使用账号来查找用户对应的加密密码。

一般来说，数据库中会保存用户的账号信息以及加密后的密码。在用户登录时，服务器端会接收到用户提供的账号和密码，然后根据账号在数据库中查找对应的用户记录，并获取该用户的加密密码。随后，服务器端会对用户提供的密码进行加密处理，并与数据库中获取到的加密密码进行比对，以确认用户的身份是否合法。

具体步骤如下：

  1. 用户提供账号和密码。
  2. 服务器端根据账号在数据库中查找对应的用户记录。
  3. 获取数据库中保存的该用户的加密密码。
  4. 对用户提供的密码进行加密处理，使用相同的加密算法和参数。
  5. 将加密后的用户提供密码与数据库中获取的加密密码进行比对。
  6. 如果两者匹配，认证通过，允许用户登录；否则，认证失败，拒绝用户登录。

这样，即使在数据库中存储的是加密后的密码，服务器仍然可以根据用户提供的账号来识别用户，并进行身份认证。

8、实现一个函数：间隔多少次执行一次函数
你可以实现一个函数，让其接受两个参数：要执行的函数以及执行的间隔次数。每次调用该函数时，它都会返回一个新的函数，该新函数将在指定的间隔次数后执行原始函数。

以下是一个示例实现：

function throttle(func, interval) {
  let count = 0;

  return function(...args) {
    count++;
    if (count >= interval) {
      func.apply(this, args);
      count = 0; // 重置计数器
    }
  };
}

// 示例使用
function logMessage(message) {
  console.log(message);
}

// 每隔3次执行一次 logMessage
const throttledLog = throttle(logMessage, 3);

throttledLog('Message 1'); // 不执行
throttledLog('Message 2'); // 不执行
throttledLog('Message 3'); // 执行
throttledLog('Message 4'); // 不执行
throttledLog('Message 5'); // 不执行
throttledLog('Message 6'); // 执行

在这个示例中，throttle 函数接受两个参数：要执行的函数 func 和执行的间隔次数 interval。每次调用返回的函数 throttledLog 将会在指定的间隔次数后执行 logMessage 函数。

9、区间合并算法题

区间合并是一种常见的算法问题，通常是给定一组区间，要求合并重叠的区间，并返回合并后的区间列表。下面是一个示例的区间合并算法实现：

def merge_intervals(intervals):
    # 如果区间列表为空，则返回空列表
    if not intervals:
        return []

    # 按区间的起始位置进行排序
    intervals.sort(key=lambda x: x[0])

    merged = [intervals[0]]

    # 遍历区间列表，与已合并的最后一个区间进行比较合并
    for interval in intervals[1:]:
        if interval[0] <= merged[-1][1]:  # 如果当前区间与已合并的最后一个区间有重叠
            merged[-1] = (merged[-1][0], max(merged[-1][1], interval[1]))  # 合并区间
        else:
            merged.append(interval)  # 如果没有重叠，则直接添加到合并列表中

    return merged

# 示例使用
intervals = [(1, 3), (2, 6), (8, 10), (15, 18)]
merged_intervals = merge_intervals(intervals)
print(merged_intervals)  # 输出 [(1, 6), (8, 10), (15, 18)]

在这个示例中，merge_intervals 函数接受一个区间列表 intervals，并按照区间的起始位置进行排序。然后遍历排序后的区间列表，与已合并的最后一个区间进行比较，如果有重叠则合并，否则直接添加到合并列表中。最后返回合并后的区间列表。

作者：放学路上
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

avatar
文章
阅读
粉丝