字节前端一面
一面（70min）
1.浏览器缓存
浏览器缓存是浏览器用来临时存储网页资源的一种机制，包括 HTML、CSS、JavaScript 文件、图像等。通过缓存这些资源，浏览器可以在后续访问同一网页时直接从本地缓存中加载资源，而不必重新下载，从而提高页面加载速度和用户体验。
浏览器缓存通常分为两种类型：强缓存和协商缓存。
-
强缓存（Cache-Control 和 Expires）：
- Cache-Control：是HTTP标头中的一个指令，用于指定浏览器缓存资源的行为。常见的指令包括：
- public：表示响应可以被任何中间缓存（如CDN）缓存。
- private：表示响应只能被浏览器缓存，不允许CDN等中间缓存缓存。
- max-age：指定资源被缓存的最长时间，单位为秒。
- Expires：是HTTP标头中的一个字段，表示资源过期的时间，是一个绝对时间点。
- Cache-Control：是HTTP标头中的一个指令，用于指定浏览器缓存资源的行为。常见的指令包括：
-
协商缓存（Last-Modified 和 ETag）：
- Last-Modified：是HTTP标头中的一个字段，表示资源的最后修改时间。浏览器在后续请求资源时会将该时间发送给服务器，服务器通过比较资源的修改时间来判断资源是否需要更新。
- ETag：是HTTP标头中的一个字段，表示资源的唯一标识符（通常是资源的哈希值）。浏览器在后续请求资源时会将该标识符发送给服务器，服务器通过比较标识符来判断资源是否需要更新。
浏览器缓存可以通过以下方式来优化网站性能：
- 设置适当的缓存控制策略，利用强缓存和协商缓存机制，减少不必要的网络请求。
- 使用版本号或文件哈希值来重命名静态资源文件，以确保资源内容发生变化时，浏览器能够识别到新的版本并更新缓存。
- 使用CDN来分发静态资源，从而利用其全球分布的节点缓存，加速资源加载。
- 使用Service Worker技术实现更高级的缓存策略，如离线缓存、预取等，提高网页的离线体验和性能。
2.cdn相关
CDN（Content Delivery Network，内容分发网络）是一组分布在全球各地的服务器网络，旨在加速网络内容传递并提高网站的性能和可用性。CDN 的主要作用是将网站的静态资源（如图片、CSS、JavaScript 文件等）缓存到多个位于不同地理位置的服务器上，使用户可以从距离较近的服务器获取内容，从而减少加载时间和提高访问速度。
CDN的优点包括：
-
加速网站加载速度：CDN 可以将网站的静态资源缓存到临近用户的节点服务器上，使用户可以从距离更近的服务器获取资源，从而减少加载时间，提高页面加载速度。
-
提高网站性能和可用性：通过分发网站内容到多个节点服务器，CDN 可以减轻源服务器的负载压力，提高网站的稳定性和可靠性。
-
减少网络拥塞：CDN 可以通过负载均衡和智能路由技术，有效降低网络拥塞，提高网络带宽利用率，减少网络延迟。
-
增强安全性：一些CDN提供商提供安全防护服务，包括DDoS攻击防护、SSL加密传输等，从而增强网站的安全性。
-
节省成本：通过使用CDN，网站可以减少自建服务器的数量和成本，降低网络流量费用，提高资源利用率，从而节省运营成本。
使用CDN可以显著提高网站的性能和用户体验，特别是对于全球范围内的网站或应用程序来说，CDN是一项非常重要的基础设施。常见的CDN提供商包括Akamai、Cloudflare、Amazon CloudFront等。
3.webpack一般怎么优化
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。要对Webpack进行优化，可以采取以下一般性的策略：
-
代码拆分（Code Splitting）: 将应用程序拆分为更小的、更具体的模块，以便按需加载。这样可以减小初始加载时间，提高页面性能。
-
懒加载（Lazy Loading）: 将不同页面或组件的代码分割成独立的块，并在需要时动态加载。这有助于减少初始加载时间，并且在用户导航时只加载所需的代码。
-
Tree Shaking: 使用 Tree Shaking 来消除未使用的代码，减少打包后的文件大小。这可以通过在Webpack配置中启用 UglifyJSPlugin 或 TerserPlugin 来实现。
-
代码压缩（Minification）: 在生产环境中对代码进行压缩，减小文件大小，加快加载速度。Webpack内置了压缩插件，例如 UglifyJSPlugin 和 TerserPlugin。
-
使用 CDN: 对于常用的第三方库，可以考虑使用 CDN 加载，而不是将它们打包到应用程序中。这样可以利用缓存，并减少应用程序的体积。
-
使用缓存（Caching）: 配置文件名哈希以便在文件内容发生更改时生成新的文件名，从而利用浏览器缓存。可以使用 webpack-md5-hash 或 contenthash 来实现。
-
减少依赖: 审查并删除不必要的依赖项，减少项目的依赖数量，从而减小打包后的文件大小。
-
使用动态导入: 使用 import() 或 require.ensure() 动态导入模块，以便根据需要异步加载模块。
-
使用生产模式配置: 在构建生产版本时，使用 Webpack 的生产模式配置。这将启用额外的优化，如去除调试信息、启用代码压缩等。
-
优化图片: 对于图片资源，可以使用 image-webpack-loader 或者 url-loader 来优化图片，以减少文件大小并提高加载速度。
-
减少使用正则表达式: 尽量减少在Webpack配置中使用复杂的正则表达式，因为它们会增加构建时间。
-
使用缓存组: 在配置 SplitChunksPlugin 时使用缓存组，以确保相同的依赖模块只被提取一次。
-
监视模式（Watch Mode）: 在开发环境中使用Webpack的监视模式，以便在文件发生变化时自动重新构建。
通过以上优化策略，可以显著提高Webpack构建的性能和效率，同时改善应用程序的加载速度和用户体验。
34.Vue响应式原理，模板编译原理，双向绑定原理
Vue 的响应式原理是通过 Object.defineProperty() 方法实现的。当 Vue 实例创建时，会遍历 data 对象的属性，对每个属性使用 Object.defineProperty() 方法添加 getter 和 setter，这样当数据发生变化时，会触发相应的 getter 和 setter，从而实现响应式更新。当数据发生变化时，setter 会通知依赖更新，然后更新视图。
Vue 的模板编译原理是将模板字符串编译成渲染函数。编译过程主要包括以下几个步骤：
- 解析模板字符串，生成 AST（抽象语法树）。
- 遍历 AST，为模板中的动态绑定创建对应的渲染函数。
- 将生成的渲染函数字符串转换为函数体，并包装成可执行的渲染函数。
Vue 的双向绑定原理是通过 v-model 指令实现的。v-model 指令实际上是语法糖，它在不同的表单元素上的实现方式略有不同，但本质上都是通过监听输入事件和更新数据的方式实现的双向绑定。对于输入框，v-model 监听 input 事件，并将输入的值赋给 data 中的属性；对于复选框和单选框，v-model 监听 change 事件，并根据选中状态更新数据；对于 select 元素，v-model 监听 change 事件，并根据选中的值更新数据。 Vue 模板编译原理是将模板字符串编译成渲染函数的过程。这个过程可以分为三个主要阶段：
-
解析阶段（Parsing）：
- 将模板字符串解析成抽象语法树（AST）。
- AST 是一种树形结构，用来表示代码的抽象语法结构，它将模板中的各种元素和指令解析成对应的节点对象。
-
优化阶段（Optimization）：
- 对 AST 进行静态节点标记（Static Analysis），即标记出不需要动态更新的节点。
- 对 AST 进行静态树的优化，如静态子树提升（Static Subtree Hoisting），将静态子树提升到 render 函数外部。
-
代码生成阶段（Codegen）：
- 根据优化后的 AST 生成渲染函数。
- 渲染函数是一个字符串形式的 JavaScript 函数，它接收一个渲染上下文作为参数，返回虚拟 DOM 树。
- 在生成渲染函数的过程中，会将模板中的动态数据和指令转换成对应的 JavaScript 代码，以实现动态的数据绑定和 DOM 操作。
这个过程中，Vue 使用了一些优化策略来提高模板编译的性能和渲染的效率，例如静态节点优化、事件处理函数的缓存等。最终生成的渲染函数会被 Vue 实例调用，用于动态地生成虚拟 DOM，并最终渲染到真实的 DOM 上。 双向绑定是一种数据绑定机制，可以使得视图（UI）和模型（数据）之间的同步更加简单和高效。在 Vue 中，双向绑定的实现原理主要涉及两个方面：数据劫持和事件监听。
-
数据劫持（Data Binding）：
- Vue 使用了一个名为
Object.defineProperty()的方法来实现数据劫持。 - 当 Vue 实例初始化时，会遍历 data 对象的属性，并使用
Object.defineProperty()方法将每个属性转化为 getter 和 setter。 - 在 getter 中，当访问数据属性时，会收集依赖（即将观察者对象添加到依赖列表中），并返回对应的属性值。
- 在 setter 中，当修改数据属性时，会触发更新通知，通知相关的依赖更新视图。
- Vue 使用了一个名为
-
事件监听（Event Handling）：
- Vue 使用了 DOM 事件监听机制来实现视图到模型的同步。
- 在模板中，通过 v-model 指令绑定表单元素，如 input、textarea 等，Vue 会在底层使用事件监听器来监听这些元素的输入事件。
- 当用户在表单元素中输入内容时，触发输入事件，Vue 会捕获这些事件并更新对应的数据模型。
- 这样，就实现了从视图到模型的双向数据绑定。
综合起来，数据劫持和事件监听结合在一起，构成了 Vue 中双向绑定的基本原理。当数据发生变化时，视图会自动更新；当用户在视图中输入内容时，数据模型也会相应地更新，从而实现了数据和视图之间的同步更新。
5.手写promise
下面是一个简单的手写 Promise 的实现：
class MyPromise {
constructor(executor) {
this.status = 'pending';
this.value = undefined;
this.reason = undefined;
this.onResolvedCallbacks = [];
this.onRejectedCallbacks = [];
const resolve = (value) => {
if (this.status === 'pending') {
this.status = 'fulfilled';
this.value = value;
this.onResolvedCallbacks.forEach(fn => fn());
}
};
const reject = (reason) => {
if (this.status === 'pending') {
this.status = 'rejected';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn => fn());
}
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
let promise2 = new MyPromise((resolve, reject) => {
if (this.status === 'fulfilled') {
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
}, 0);
}
if (this.status === 'rejected') {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
}, 0);
}
if (this.status === 'pending') {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFulfilled(this.value);
resolvePromise(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
}, 0);
});
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
}, 0);
});
}
});
return promise2;
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise'));
}
let called = false;
if (x instanceof MyPromise) {
if (x.status === 'pending') {
x.then(y => {
resolvePromise(promise2, y, resolve, reject);
}, reason => {
reject(reason);
});
} else {
x.then(resolve, reject);
}
} else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
try {
let then = x.then;
if (typeof then === 'function') {
then.call(x, y => {
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
}, reason => {
if (called) return;
called = true;
reject(reason);
});
} else {
resolve(x);
}
} catch (err) {
if (called) return;
called = true;
reject(err);
}
} else {
resolve(x);
}
}
这段代码实现了一个基本的 Promise 类，包含了 pending, fulfilled, rejected 状态的处理，以及 then 方法链式调用，同时处理了异步情况下的状态变化。
6.事件循环输出题
7.原型链输出代码题
8.手写myFlat
下面是一个手写的myFlat函数，它可以将多层嵌套的数组扁平化成一维数组：
function myFlat(arr) {
const result = [];
function flatten(arr) {
for (let item of arr) {
if (Array.isArray(item)) {
flatten(item);
} else {
result.push(item);
}
}
}
flatten(arr);
return result;
}
// 示例用法
const nestedArray = [1, [2, [3, 4]], 5, [6]];
const flattenedArray = myFlat(nestedArray);
console.log(flattenedArray); // 输出 [1, 2, 3, 4, 5, 6]
这个函数递归地遍历数组中的每个元素，如果遇到数组，则继续递归调用flatten函数；如果遇到非数组元素，则将其添加到结果数组中。
9.算法：返回cpu处理任务的顺序（不能使用内置的优先队列）
在没有内置的优先队列的情况下，可以使用其他数据结构和算法来实现CPU处理任务的顺序。一种常见的方法是使用数组来模拟优先队列，并结合适当的排序算法来实现任务的调度。
以下是一种可能的实现方法：
-
创建一个包含所有任务的数组，每个任务包括任务名称和优先级等信息。
-
使用一个排序算法对任务数组进行排序，根据任务的优先级进行排序，优先级高的任务排在前面。
-
遍历排序后的任务数组，依次执行任务。
这种方法的时间复杂度取决于所选用的排序算法，常见的排序算法如快速排序、归并排序或堆排序等都可以用来对任务数组进行排序。排序完成后，按顺序执行任务即可得到CPU处理任务的顺序。
需要注意的是，这种方法虽然能够实现任务的调度，但性能可能受到排序算法的影响，特别是在任务数量较大时。因此，在实际应用中需要根据具体情况选择合适的算法和数据结构来实现任务调度。
作者：每日一摆
链接：www.nowcoder.com/feed/main/d…
来源：牛客网
