当前位置：首页 > news >正文

Interview preparation.md

news 2025/3/14 18:15:04

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, // 生成 sourcemaprollupOptions: {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 应用的性能和用户体验。

<imgsrc="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 来清理用户输入。

使用 DOMPurity 库来清理用户输入，防止 XSS 攻击。

<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><imgsrc="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");
});