Interview preparation.md
Vue
1.1 响应式系统
Vue 3 使用 Proxy 代替 Vue 2 中的 Object.defineProperty 来实现响应式系统。Proxy 可以监听对象的所有操作，包括属性的添加和删除，从而解决了 Vue 2 的一些局限性。
Vue 2：使用 Vue.set 添加响应式属性
new Vue({
el: "#app",
data: {
obj: {},
},
created() {
// 使用 Vue.set 添加一个新属性
Vue.set(this.obj, "newProp", "initial value");
// 监听新添加的属性
this.$watch("obj.newProp", function (newVal, oldVal) {
console.log(`newProp changed from ${oldVal} to ${newVal}`);
});
},
methods: {
updateProp() {
// 更新新添加的属性
this.obj.newProp = "updated value";
},
},
});
1.2 Vue 3 对比 Vue 2 的编译优化
1. 静态提升
Vue 3 的模板编译器会将不变的部分（如 <button> 标签的内容）提升为静态节点，只在初次渲染时创建一次，后续渲染时直接处理，减少不必要的计算。
Vue 3：
const _hoisted_1 = /*#__PURE__*/ createVNode(
"button",
{ onClick: updateMessage },
"Update Message"
);
function render(_ctx, _cache) {
return (
openBlock(),
createBlock("div", null, [
createVNode("p", null, toDisplayString(_ctx.message), 1 /* TEXT */),
_hoisted_1,
])
);
}
Vue 2：
render: function(createElement) {
return createElement('div', [
createElement('p', this.message),
createElement('button', { on: { click: this.updateMessage } }, 'Update Message')
]);
}
2. 缓存事件处理函数
Vue 3 会缓存事件处理函数（如 updateMessage），避免每次渲染时都重新创建新的函数。
Vue 3：
const _hoisted_1 = /*#__PURE__*/ createVNode(
"button",
{
onClick:
_cache[1] ||
(_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
},
"Click Me"
);
function render(_ctx, _cache) {
return openBlock(), createBlock("div", null, [_hoisted_1]);
}
Vue 2：
render: function(createElement) {
return createElement('div', [
createElement('button', { on: { click: this.handleClick } }, 'Click Me')
]);
}
3. 优化指令
Vue 3 对 v-if、v-for 等常用指令进行了优化，使得运行时的性能更高：
- 减少不必要的节点创建和销毁（如
v-if使用createCommentVNode）。 - 高效的列表渲染（如
v-for使用renderList和openBlock、createBlock）。 - 优化属性绑定（如
v-bind使用对象展开操作和标志位）。
Vue 3 示例：
function render(_ctx, _cache) {
return (
openBlock(),
createBlock("div", null, [
_ctx.isVisible
? (openBlock(), createBlock("p", { key: 0 }, "Visible"))
: createCommentVNode("v-if", true),
(openBlock(true),
createBlock(
Fragment,
null,
renderList(_ctx.items, (item) => {
return (
openBlock(),
createBlock(
"li",
{
key: item.id,
title: item.title,
},
toDisplayString(item.name),
9 /* TEXT, PROPS */,
["title"]
)
);
}),
128 /* KEYED_FRAGMENT */
)),
])
);
}
- Fragments：Vue 3.0 支持组件返回多个根节点（Fragments），不再需要使用额外的包裹元素。
- Teleport：Teleport 允许将组件的 DOM 渲染到指定的 DOM 节点之外，提供了更灵活的布局方式。
es6
在 JavaScript 中，箭头函数与传统函数（使用 function 关键字定义的函数）有一些显著的区别，其中之一就是箭头函数没有自己的 arguments 对象。
示例代码
传统函数
传统函数可以访问 arguments 对象，该对象包含了传递给函数的所有参数。
function traditionalFunction() {
console.log(arguments);
}
traditionalFunction(1, 2, 3); // 输出: [Arguments] { '0': 1, '1': 2, '2': 3 }
箭头函数
箭头函数没有自己的 arguments 对象。如果在箭头函数中访问 arguments，它会从包含它的最近的非箭头函数中获取 arguments。
const arrowFunction = () => {
console.log(arguments);
};
arrowFunction(1, 2, 3); // ReferenceError: arguments is not defined
解决方案
如果需要在箭头函数中访问参数，可以使用剩余参数语法（rest parameters）来代替 arguments 对象。
const arrowFunctionWithRest = (...args) => {
console.log(args);
};
arrowFunctionWithRest(1, 2, 3); // 输出: [ 1, 2, 3 ]
手写promise
function myPromise(executer) {
let resolve, reject;
this.thenCallbacks = [];
this.catchCallback = null;
this.then = (callback) => {
this.thenCallbacks.push(callback);
return this;
};
this.catch = (callback) => {
this.catchCallback = callback;
return this;
};
resolve = (value) => {
setTimeout(() => {
this.thenCallbacks.forEach((callback) => {
value = callback(value);
});
}, 0);
};
reject = (reason) => {
setTimeout(() => {
if (this.catchCallback) {
this.catchCallback(reason);
}
}, 0);
};
try {
executer(resolve, reject);
} catch (error) {
reject(error);
}
}
new myPromise((resolve, reject) => {
setTimeout(() => {
resolve("Hello, promise!");
}, 1000);
})
.then((value) => {
console.log(value);
return value + " Then 1";
})
.then((value) => {
console.log(value);
})
.catch((error) => {
console.log(error);
});
柯里化
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function(...args2) {
return curried.apply(this, args.concat(args2));
}
}
};
}
SSR
SSR 的优点
- 更快的首屏加载速度：由于服务器预先生成了 HTML 内容，客户端可以立即显示页面，而不需要等待 JavaScript 加载和执行。
- 更好的 SEO：搜索引擎爬虫可以直接抓取到完整的 HTML 内容，从而更好地索引页面。
- 更好的社交媒体分享效果：当页面被分享时，社交媒体平台可以抓取到完整的 HTML 内容，从而生成更丰富的预览信息。
SSR 的缺点
- 服务器负载增加：服务器需要处理更多的渲染工作，可能会增加服务器的负载。
- 开发复杂度增加：SSR 需要处理更多的服务器端逻辑，开发和调试可能会更加复杂。
- 客户端和服务器端代码共享：需要确保客户端和服务器端的代码能够正确地共享和执行，可能会增加代码管理的复杂度。
Webpack
//常用webpack配置
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// filename: '[name].[contenthash].js', // 使用 contenthash 生成文件指纹
},
cache: {
type: 'filesystem', // 使用文件系统缓存
cacheDirectory: path.resolve(__dirname, '.webpack_cache'), // 缓存目录
buildDependencies: {
config: [__filename], // 当配置文件更改时使缓存失效
},
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'images/[name].[contenthash][ext]', // 为静态资源生成文件指纹
},
},
],
},
resolve: {
alias: {
vue$: 'vue/dist/vue.esm.js',
},
extensions: ['*', '.js', '.vue', '.json'],
},
devServer: {
contentBase: path.join(__dirname, 'public'),
compress: true,
port: 8080,
},
plugins: [
new VueLoaderPlugin(),
new webpack.PrefetchPlugin({
context: path.resolve(__dirname, 'src'),
request: './components/HeavyComponent.js',
}),
//PrefetchPlugin是Webpack提供的一个插件。用于预加载资源。预加载资源可以在浏览器空闲时提前加载将来可能会用到的资源，从而提高应用的性能和用户体验。
// 使用 PrefetchPlugin
// PrefetchPlugin 插件会在生成的 HTML 文件中插入 <link rel=“prefetch“> 标签，以便浏览器在空闲时预加载资源。
],
};
## <font color=#ff0000 >Vite</font>
//常用vite配置
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
root: process.cwd(), // 项目根目录
base: '/', // 公共基础路径
mode: 'development', // 模式
plugins: [
vue(), // 使用 Vue 插件
webpackLoaderPlugin({
include: '**/*.scss',
loaderOptions: {
loader: 'sass-loader',
options: {
// sass-loader 选项
},
},
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'), // 路径别名
},
extensions: ['.js', '.vue', '.json'], // 自动解析的扩展名
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";`, // 全局引入 SCSS 变量
},
},
},
json: {
namedExports: true, // 支持命名导出
stringify: false, // 禁用 JSON 字符串化
},
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
server: {
port: 3000, // 开发服务器端口
open: true, // 自动打开浏览器
hmr: true, // 确保 HMR 已启用
proxy: {
'/api': {
target: 'http://localhost:4000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
build: {
outDir: 'dist', // 输出目录
sourcemap: true, // 生成 sourcemap
rollupOptions: {
input: {
main: path.resolve(__dirname, 'index.html'),
},
treeshake: false, // 禁用 Tree Shaking
},
},
optimizeDeps: {
include: ['vue', 'vue-router'], // 强制预构建的依赖
},
define: {
'process.env.NODE_ENV': JSON.stringify('development'), // 定义全局常量
},
});
代码分割
// 代码分割
// - `app` 入口点包含应用程序的代码。
// - `splitChunks` 配置选项用于控制代码分割的行为。
// - `chunks: 'all'`：对所有类型的代码进行分割，包括同步和异步代码。
// - `minSize` 和 `maxSize`：控制模块的最小和最大大小。
// - `minChunks`：控制模块的最小引用次数。
// - `maxAsyncRequests` 和 `maxInitialRequests`：控制最大并行请求数。
// - `automaticNameDelimiter`：控制生成文件名的分隔符。
// - `name`：控制是否自动生成名称。
// - `cacheGroups`：定义缓存组，用于控制哪些模块应该被提取到单独的文件中。
// - `vendors` 缓存组：将 node_modules 目录中的模块提取到 `vendors` 文件中。
// - `default` 缓存组：将引用次数大于等于 2 的模块提取到默认文件中，并复用已经存在的块。
const path = require("path");
module.exports = {
entry: {
app: "./src/app.js",
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
optimization: {
splitChunks: {
chunks: "all", // 对所有类型的代码进行分割
minSize: 30000, // 模块的最小大小
maxSize: 0, // 模块的最大大小，0 表示不限制
minChunks: 1, // 模块的最小引用次数
maxAsyncRequests: 5, // 按需加载时的最大并行请求数
maxInitialRequests: 3, // 入口点的最大并行请求数
automaticNameDelimiter: "~", // 文件名分隔符
name: true, // 自动生成名称
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10, // 优先级
name: "vendors", // 提取到的文件名
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true, // 复用已经存在的块
},
},
},
},
};
React
useRef 是 React 中的一个 Hook，用于创建一个可变的引用对象。这个引用对象在组件的整个生命周期内保持不变。useRef 常用于以下几种情况：
- 访问 DOM 元素：可以通过
useRef获取和操作 DOM 元素。 - 存储可变值：可以存储任何可变值，而不会触发组件重新渲染。
总结
useState：状态变化会触发组件重新渲染。useRef：ref对象的.current属性变化不会触发组件重新渲染。- 使用
useRef可以存储和访问可变值，而不会影响组件的渲染性能。这在需要频繁更新但不需要重新渲染的情况下非常有用。
网络协议
HTTP 建立过程包括以下几个主要步骤：
- DNS 解析：将域名解析为 IP 地址。
- 建立 TCP 连接：通过三次握手建立客户端和服务器之间的 TCP 连接。
- 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求。
- 服务器处理请求并返回响应：服务器处理请求并返回 HTTP 响应。
- 浏览器渲染页面：浏览器解析响应并渲染页面。
- 关闭连接：在 HTTP/1.1 中，使用持久连接，可以在一个连接上发送多个请求/响应对。
CDN 的作用总结
- 加速内容传输：通过将内容分发到多个地理位置的服务器上，CDN 可以显著减少内容传输的延迟，提高用户访问速度。
- 减轻服务器负载：CDN 边缘服务器缓存内容，减少了对原始服务器的请求次数，从而减轻了原始服务器的负载。
- 提高可用性和可靠性：CDN 提供了冗余和负载均衡，确保即使某些服务器出现故障，内容仍然可以从其他服务器获取。
- 优化带宽使用：通过缓存和压缩技术，CDN 可以优化带宽使用，降低传输成本。
浏览器缓存
浏览器缓存是指浏览器将请求的资源（如 HTML、CSS、JavaScript、图片等）存储在本地，以便在后续请求中直接使用缓存的资源，从而减少网络请求，提高页面加载速度。浏览器缓存机制是前端性能优化的重要手段之一。下面详细解释浏览器缓存的工作原理、缓存策略和常见的缓存控制方法。
浏览器缓存策略主要分为两类：强缓存和协商缓存。
1. 强缓存（Strong Caching）
强缓存是指浏览器在缓存有效期内直接使用缓存的资源，而不向服务器发送请求。强缓存通过 Cache-Control 和 Expires 头部字段控制。
- Cache-Control：是 HTTP/1.1 中定义的头部字段，用于指定缓存策略。常见的指令包括：
max-age=<seconds>：指定资源的最大缓存时间（以秒为单位）。no-cache：强制浏览器在使用缓存前向服务器验证资源的有效性。no-store：禁止缓存，浏览器每次请求都必须从服务器获取资源。- public：资源可以被任何缓存（如浏览器、CDN）缓存。
private：资源只能被浏览器缓存，不能被共享缓存（如 CDN）缓存。
- Expires：是 HTTP/1.0 中定义的头部字段，用于指定资源的过期时间（绝对时间）。如果
Cache-Control和Expires同时存在，Cache-Control优先级更高。
2. 协商缓存（Conditional Caching）
协商缓存是指浏览器在缓存过期后向服务器发送请求，验证资源的有效性。如果资源未修改，服务器返回 304 状态码，浏览器继续使用缓存的资源。协商缓存通过 ETag 和 Last-Modified 头部字段控制。
- ETag：是资源的唯一标识符（通常是哈希值）。浏览器在请求资源时会发送
If-None-Match头部字段，服务器根据ETag判断资源是否修改。 - Last-Modified：是资源的最后修改时间。浏览器在请求资源时会发送
If-Modified-Since头部字段，服务器根据Last-Modified判断资源是否修改。
缓存策略示例
以下是一些常见的缓存策略示例：
1. 静态资源缓存
对于不经常变化的静态资源（如图片、CSS、JavaScript 文件），可以设置较长的缓存时间：
Cache-Control: max-age=31536000, public
2. 动态资源缓存
对于经常变化的动态资源，可以使用协商缓存：
Cache-Control: no-cache
ETag: "5d8c72a5edda8"
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.setRequestHeader("X-Custom-Header", "CustomHeaderValue");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
import $ from "jquery";
$.ajax({
url: "https://example.com/api/data",
method: "GET",
headers: {
"X-Custom-Header": "CustomHeaderValue",
},
success: function (data) {
console.log(data);
},
error: function (error) {
console.error("Error:", error);
},
});
fetch("https://example.com/api/data", {
method: "GET",
headers: {
"X-Custom-Header": "CustomHeaderValue",
},
});
axios.get("https://example.com/api/data", {
headers: {
"X-Custom-Header": "CustomHeaderValue",
},
});
图片懒加载
是一种优化技术，通过延迟加载图片资源，可以减少初始加载时间，提高页面加载速度和用户体验。可以使用 HTML5 的 loading 属性或 JavaScript 和 Intersection Observer API 来实现图片懒加载。懒加载的基本原理是延迟加载资源，直到资源进入视口或接近视口时才开始加载。通过合理使用懒加载，可以显著优化 Web 应用的性能和用户体验。
<img
src="path/to/image.jpg"
alt="Description"
loading="lazy"
/>
<script>
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".placeholder");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = document.createElement("img");
img.src = entry.target.getAttribute("data-src");
img.alt = "Lazy loaded image";
entry.target.appendChild(img);
observer.unobserve(entry.target);
}
});
});
lazyImages.forEach((image) => {
observer.observe(image);
});
});
</script>
前端网络安全性
1. 跨站脚本攻击（XSS）
解释
跨站脚本攻击（XSS，Cross-Site Scripting）是指攻击者在网页中注入恶意脚本，当用户访问该网页时，恶意脚本会在用户的浏览器中执行，从而窃取用户信息或执行其他恶意操作。
防范措施
- 输入验证：对用户输入进行严格的验证和过滤，防止恶意脚本注入。
- 输出编码：对输出到网页的内容进行编码，防止恶意脚本执行。可以使用库如 DOMPurify 来清理用户输入。
<script> document.getElementById('commentForm').addEventListener('submit', function(event) { event.preventDefault(); const comment = document.getElementById('comment').value; const sanitizedComment = DOMPurify.sanitize(comment); const commentDiv = document.createElement('div'); commentDiv.innerHTML = sanitizedComment; document.getElementById('comments').appendChild(commentDiv); }); </script> - 使用 CSP（内容安全策略）：通过设置 Content Security Policy 头部，限制网页中可以执行的脚本来源。
-
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
-
CSP 头部通过 `Content-Security-Policy` 头部字段来设置，格式如下：
```http
Content-Security-Policy: <directive> <source-list>; <directive> <source-list>; ...
-
directive：指令，用于指定要限制的资源类型。
-
source-list：来源列表，用于指定允许加载资源的来源。
-
default-src：默认资源来源，适用于所有未单独指定来源的资源类型。
-
script-src：脚本来源，限制可以执行的 JavaScript 代码的来源。
-
style-src：样式来源，限制可以应用的 CSS 样式的来源。
-
img-src：图片来源，限制可以加载的图片的来源。
-
font-src：字体来源，限制可以加载的字体的来源。
-
connect-src：连接来源，限制可以发起的网络请求的来源（如 AJAX、WebSocket）。
-
media-src：媒体来源，限制可以加载的音频和视频的来源。
-
object-src：对象来源，限制可以加载的插件内容（如 Flash、Java Applet）。
-
frame-src：框架来源，限制可以嵌入的框架和 iframe 的来源。
-
base-uri：限制
<base>标签的来源。 -
form-action：限制可以提交表单的 URL。
-
‘self’：表示同源，即与当前页面相同的来源。
-
‘none’：表示不允许加载任何资源。
-
‘unsafe-inline’：允许内联资源（如内联的
<script>和<style>），不推荐使用。 -
‘unsafe-eval’：允许使用
eval()和类似的方法，不推荐使用。 -
URL：指定具体的 URL 或域名。
-
data:：允许
data:协议的资源。 -
https:：允许 HTTPS 协议的资源。
2. 跨站请求伪造（CSRF）
解释
跨站请求伪造（CSRF，Cross-Site Request Forgery）是指攻击者诱导用户在已登录的情况下执行未授权的操作。攻击者通常会构造恶意请求，并通过用户的浏览器发送到受信任的网站。
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Malicious Site</title>
</head>
<body>
<h1>Welcome to the Malicious Site</h1>
<img
src="http://localhost:3000/change-email?email=attacker@example.com"
style="display:none;"
/>
</body>
</html>
防范措施
- 使用 CSRF 令牌：在每个表单或请求中包含一个唯一的 CSRF 令牌，服务器验证令牌的有效性。
- 验证 Referer 头部：检查请求的 Referer 头部，确保请求来源于受信任的页面。
- 使用 SameSite Cookie 属性：设置 Cookie 的 SameSite 属性，限制跨站请求携带 Cookie。
示例：设置 SameSite Cookie 属性
Set-Cookie: sessionid=abc123; SameSite=Strict
SameSite 属性有三个可选值：
- Strict：严格模式，完全禁止跨站请求携带 Cookie。只有在同一站点的请求中，Cookie 才会被发送。
- Lax：宽松模式，允许部分跨站请求携带 Cookie，但限制条件较严格。通常用于导航请求（如链接点击）和顶级导航（如表单提交）。
- None：不限制跨站请求，允许所有跨站请求携带 Cookie。需要同时设置
Secure属性，确保 Cookie 仅通过 HTTPS 传输。
const express = require("express");
const cookieParser = require("cookie-parser");
const app = express();
app.use(cookieParser());
app.get("/", (req, res) => {
res.cookie("sessionid", "abc123", { sameSite: "Strict" });
res.send("<h1>SameSite Cookie Example</h1>");
});
app.listen(3000, () => {
console.log("Server is running on http://localhost:3000");
});
3. 点击劫持（Clickjacking）
解释
点击劫持（Clickjacking）是指攻击者通过在透明的 iframe 中嵌入受害者网站，并诱导用户点击，从而执行未授权的操作。
防范措施
- 使用 X-Frame-Options 头部：通过设置 X-Frame-Options 头部，防止网页被嵌入到 iframe 中。
- 使用 CSP：通过设置 Content Security Policy 头部，限制网页可以嵌入的框架来源。
示例：设置 X-Frame-Options 头部
X-Frame-Options: DENY
X-Frame-Options 头部有三个可选值：
- DENY：完全禁止页面在任何框架中加载。
- SAMEORIGIN：允许页面在相同来源的框架中加载。
- ALLOW-FROM uri：允许页面在指定的来源的框架中加载（注意：此选项在现代浏览器中已被弃用，建议使用 CSP 代替）。
4. 不安全的依赖
解释
使用不安全的第三方库或依赖可能导致安全漏洞，攻击者可以利用这些漏洞进行攻击。
防范措施
- 定期更新依赖：保持依赖库的最新版本，修复已知的安全漏洞。
- 使用安全扫描工具：使用工具如 npm audit、Snyk 等扫描依赖库的安全性。
5. 数据泄露
解释
数据泄露是指敏感数据（如用户信息、密码等）被未授权访问或泄露。
防范措施
- 加密敏感数据：在传输和存储敏感数据时使用加密技术，如 HTTPS、AES 等。
- 最小权限原则：限制用户和应用程序的权限，确保只有必要的权限才能访问敏感数据。
- 使用安全存储：在客户端使用安全的存储机制，如 Web Storage、IndexedDB 等。
6. 安全的身份验证和授权
解释
确保用户身份验证和授权机制的安全性，防止未授权访问和操作。
防范措施
- 使用强密码策略：要求用户设置强密码，并定期更换密码。
- 多因素认证（MFA）：使用多因素认证提高身份验证的安全性。
- 使用 OAuth 2.0 和 OpenID Connect：使用标准的身份验证和授权协议，确保安全性。
7. 安全的 API 调用
解释
确保前端与后端 API 调用的安全性，防止数据泄露和未授权访问。
防范措施
- 使用 HTTPS：确保所有 API 调用使用 HTTPS 加密传输。
- 验证 API 请求：在服务器端验证所有 API 请求的合法性。
- 使用 API 密钥和令牌：使用 API 密钥和令牌进行身份验证和授权。