2025前端面试题及答案-2（详细）

HTTP 和 HTTPS 的区别

1. 安全性

   • HTTP：明文传输，数据在客户端和服务器之间直接发送，容易被窃听、篡改和伪造。

   • HTTPS：在 HTTP 基础上加入 SSL/TLS 协议，通过加密（对称加密 + 非对称加密）确保传输安全，同时能校验证书保证通信双方真实身份。

2. 端口

   • HTTP 默认使用 80 端口。

   • HTTPS 默认使用 443 端口。

3. 性能

   • HTTPS 在建立连接时需要 握手过程（TLS 握手），多了一次加密验证，性能开销比 HTTP 略大。

   • 但现在随着硬件优化与 HTTP/2 普及，性能差距已经很小。

4. SEO 及浏览器支持

   • 搜索引擎（如 Google、百度）更倾向收录 HTTPS 网站，排名更靠前。

   • 现代浏览器会对 HTTP 网站标红“不安全”，用户体验更差。

5. 证书需求

   • HTTP：无需证书。

   • HTTPS：必须申请 SSL/TLS 数字证书（可以是免费/付费 CA 机构颁发），用于验证网站身份。

CORS

CORS 是什么？

CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种 浏览器机制，用来解决前端在 跨域请求资源时的安全限制问题。
它是由服务器通过设置 响应头 告诉浏览器“哪些域名可以访问我的资源”。

---

为什么需要 CORS？

• 浏览器有 同源策略：协议、域名、端口号必须相同，否则前端 AJAX/fetch 请求会被拦截。

• CORS 就是官方标准的跨域解决方案，取代了 JSONP 等非标准方式。

---

CORS 的工作原理

1. 简单请求（如 GET/POST，且满足一定条件）：

   • 浏览器直接发起请求。

   • 服务器在响应头加上 Access-Control-Allow-Origin: http://xxx.com，浏览器验证通过后把数据交给前端。

2. 复杂请求（比如自定义 header、Content-Type 不是默认值）：

   • 浏览器会先发送 预检请求（OPTIONS），询问服务器是否允许跨域。

   • 服务器返回允许的域名、方法、头信息等。

   • 如果允许，再真正发起请求。

---

常见 CORS 响应头

• Access-Control-Allow-Origin: 允许的域名（可写 * 表示任意）。

• Access-Control-Allow-Methods: 允许的请求方法（GET, POST, PUT, DELETE 等）。

• Access-Control-Allow-Headers: 允许的自定义请求头。

• Access-Control-Allow-Credentials: 是否允许携带 Cookie。

---

CORS 优缺点

✅ 优点：标准、安全，支持各种 HTTP 方法。
❌ 缺点：需要后端配置支持，不能完全由前端解决。

面试简洁答法

“CORS 是浏览器基于同源策略的一种跨域解决方案，主要通过服务端设置 Access-Control-Allow-* 系列响应头来控制哪些域能访问资源。如果是复杂请求，浏览器会先发 OPTIONS 预检请求，得到确认后再真正发起。前端不能单独解决，必须配合后端配置。”

常用的前端构建工具有哪些？

1.Webpack

• 功能最全面，支持模块打包、代码分割、Tree Shaking。
• 生态丰富，常用于大型项目。

2.Vite

• 基于 ES Module 和 Rollup，开发环境启动快，热更新效率高。
• 适合 Vue3、React 新项目。

3.Rollup

• 适合打包库（npm 包），输出体积小，支持 Tree Shaking。

4.Parcel

• 开箱即用，零配置，适合小型项目或快速原型。

5.Gulp

• 任务流工具，常用于定制化构建（比如批量处理 CSS/JS/图片）。

Webpack

1. Webpack 是什么？解决了什么问题？

Webpack 是一个前端模块打包工具。它的核心功能是把各种前端资源（JS、CSS、图片、字体、甚至 Vue/React 组件等）都当作模块来处理，最终打包成浏览器能运行的文件。

解决的问题：

1. 模块化开发：原生 JS 没有模块系统，Webpack 支持 CommonJS、ES Module 等。

2. 资源依赖管理：CSS、图片等非 JS 资源也能像模块一样被引入。

3. 兼容性问题：通过 Babel、PostCSS 等 loader 转换成低版本浏览器可执行代码。

4. 性能优化：压缩、Tree Shaking、代码分割（Code Splitting）、缓存优化等。

2. Loader 和 Plugin 的区别？

• Loader：文件加载器，负责把各种非 JS 资源（如 CSS、图片、TypeScript）转换成 Webpack 能识别的模块。
  👉 本质是一个函数，接收源文件 → 输出处理后的结果。
  例子：css-loader、babel-loader

• Plugin：扩展 Webpack 功能，在打包的生命周期里执行更复杂的任务。
  👉 本质是一个类，利用 Webpack 提供的钩子机制，参与整个打包流程。
  例子：HtmlWebpackPlugin、MiniCssExtractPlugin。

一句话记忆：
Loader 像「翻译官」，把文件翻译成 JS；Plugin 像「工人」，负责打包优化和流程控制。

3. Webpack 构建流程（核心原理）？

Webpack 的构建过程大致分为以下 5 步：

1. 初始化参数：读取配置文件（webpack.config.js）和命令行参数，合并得到最终配置。

2. 编译：从入口文件出发，递归解析依赖，调用对应的 Loader 进行文件转换。

3. 依赖收集：把模块之间的依赖关系组成一个依赖图（Dependency Graph）。

4. 打包生成：把所有模块打包到一个或多个 bundle.js，并输出到目标目录。

5. 优化处理：在生成前执行 Plugin（如压缩、提取 CSS、资源分离）。

4. Tree Shaking 是什么？

Tree Shaking 是 Webpack 在打包时自动移除无用代码的优化手段。

实现原理：

• 必须使用 ES Module（因为 ES Module 是静态分析的）。
• Webpack 会分析 import/export，只打包真正被使用的部分。
• 配合 TerserPlugin（压缩工具）把未使用的代码删除。

5. Code Splitting（代码分割）是什么？为什么要用？

Code Splitting 是 Webpack 提供的一种性能优化手段，把代码拆分成多个 bundle，按需加载。

好处：

1. 减少首屏体积（比如首页只加载核心代码，其他页面按需加载）。

2. 提高缓存利用率（公共库如 React、Vue 单独打包，不用每次都重新下载）。

实现方式：

1. 多入口打包

2. 动态 import（推荐）

3. SplitChunksPlugin（Webpack 内置）：拆分第三方库和公共代码。

6. Webpack 常见性能优化手段？

构建速度优化：

1. 开启 cache-loader / babel-loader 的缓存。
2. 使用 thread-loader 多进程打包。
3. exclude / include 精准匹配 Loader 作用范围。
4. 合理使用 resolve.alias 和 resolve.extensions。

打包体积优化：

1. 使用 Tree Shaking。
2. 开启 splitChunks，提取公共代码。
3. 按需加载（动态 import）。
4. 压缩 JS（TerserPlugin）、CSS（css-minimizer-webpack-plugin）。
5. 图片压缩（image-webpack-loader / 使用 WebP）。

7. Webpack 和 Vite 的区别？

Webpack：

• 传统构建工具，构建时打包所有资源。

• 首次启动慢，但生态成熟，插件丰富。

• 适合大型项目、复杂构建需求。

Vite：

• 利用浏览器原生 ES Module + esbuild（Go 编写）做依赖预构建。

• 开发启动快，修改即时生效（HMR 几乎无延迟）。

• 适合中小型项目或快速开发场景。

总结： Webpack 更「稳重」，Vite 更「轻快」。

8. 你在项目中是怎么用 Webpack 的？

1. 使用 babel-loader 支持 ES6+ 语法，兼容低版本浏览器。
2. 使用 css-loader + MiniCssExtractPlugin 分离 CSS。
3. 图片和字体用 asset/resource 处理。
4. 通过 splitChunks 提取第三方库，减少首屏加载。
5. 开发环境用 webpack-dev-server + HMR，生产环境开启 TerserPlugin 压缩。
6. 配合 CI/CD，打包产物自动发布到 CDN。

9.Webpack 常见 Loader

（1）编译类 Loader

👉 处理 JS/TS 语法，让新特性能兼容旧浏览器。

• babel-loader：把 ES6+ 转成 ES5。
• ts-loader：编译 TypeScript 到 JavaScript。

（2）样式相关 Loader

👉 处理 CSS、预处理器（Less/Sass）、样式注入。

• style-loader：把 CSS 以 <style> 标签插入页面。
• css-loader：解析 @import、url()，让 CSS 能被打包。
• less-loader：编译 Less → CSS。
• sass-loader：编译 Sass/SCSS → CSS。
• postcss-loader：配合 Autoprefixer，自动加浏览器前缀。

（3）文件/资源类 Loader

👉 处理图片、字体、媒体资源等。

• file-loader：把文件拷贝到输出目录，并返回路径。
• url-loader：小文件转 base64，大文件走 file-loader。
• asset/resource（Webpack5 内置）：替代 file-loader。
• asset/inline（Webpack5 内置）：替代 url-loader。

（4）模板类 Loader

👉 处理模板语法或框架代码。

• vue-loader：处理 .vue 单文件组件。
• @ngtools/webpack：处理 Angular 模板。
• handlebars-loader：处理 Handlebars 模板。

（5）工具类 Loader

👉 优化、注入或特殊功能。

• eslint-loader：代码检查（Webpack 8 已改用 eslint-webpack-plugin）。
• tslint-loader：TypeScript 语法检查（已被 ESLint 替代）。
• html-loader：处理 HTML 文件中的 <img src="..."> 等依赖。
• raw-loader：把文件内容以字符串形式导入。
• yaml-loader：加载 YAML 文件。

移动端开发

1. 移动端开发时需要注意哪些性能优化？

• 减少 HTTP 请求：通过合并资源和使用雪碧图减少请求数量。
• 使用懒加载：对图片和其他资源使用懒加载，优化首次加载时间。
• 优化图片：使用适当的格式和尺寸，减小文件大小。

2. 如何处理移动端的适配问题？

• 媒体查询：使用 CSS 媒体查询根据不同设备的屏幕尺寸调整样式。
• 视口设置：使用 <meta name="viewport"> 设置合适的视口，以确保页面在移动设备上正确缩放。
• 灵活布局：使用 Flexbox 或 CSS Grid 创建响应式布局。