前端面试场景题

目录

1.项目第一次加载太慢优化 / vue 首屏加载过慢如何优化

2.说说了解的es6-es10的东西有哪些

ES6（ES2015）之后，JavaScript 新增了许多实用的数组和对象方法，下面为你详细介绍：

3.常见前端安全性问题

XSS：攻击者通过注入恶意脚本，在用户浏览器中执行，窃取 Cookie、会话令牌等敏感信息

跨站请求伪造（CSRF）

跨域资源共享（CORS）与安全

前端如何处理密码安全？需要

如何避免 URL 中的敏感信息泄露？   

其他常见安全问题

总结：前端安全核心原则

4.vite和webpack在热更新上有啥区别 

5.在项目中，webpack使用过哪些常见的plugin（插件）和loader（加载器）

 Loader（加载器）

Plugin（插件）

常用loader

常用plugin

---

1.项目第一次加载太慢优化 / vue 首屏加载过慢如何优化

        首屏加载慢的常见原因，比如有打包后的文件过大、资源加载顺序不合理，素材资源一次性加载过多等等。

• 首先从代码层面优化，路由懒加载，分模块加载文件，合理使用路由懒加载可使首屏 JS 体积减少 40%-60%，然后对于工具库，尽量采用按需引入的方式。然后合理使用v-if和v-show，合理使用watch和computed，使用v-for必须添加key
• 然后从资源层面优化，图片压缩（Squoosh）+ WebP 格式 + 懒加载（Intersection Observer），优先使用字体图标，大文件放在cdn上，比如阿里云七牛云
•  然后构建配置优化，使用骨架屏，开启Brotli 、gzip压缩代码，减少代码包的大小，使用Tree Shaking移除 JavaScript 上下文中未被引用代码（它通过分析代码中的导入（import）和导出（export）语句，判断哪些代码是 “活的”（被引用），哪些是 “死的”（未被引用），从而在打包时剔除 “死代码”。作用：大幅减少打包后的代码体积，提升应用加载速度，尤其对使用大型第三方库的项目优化效果显著。）

2.说说了解的es6-es10的东西有哪些

        块级作用域：let/const 解决 var 的变量提升和闭包问题

        箭头函数（Arrow Functions）绑定外层 this，简化回调

        类（Class）语法糖：基于原型链的面向对象封装

        模块（ES Module）标准化导入导出

        解构赋值（Destructuring）、扩展运算符

ES6（ES2015）之后，JavaScript 新增了许多实用的数组和对象方法，下面为你详细介绍：

1. Array.from()：可将类数组对象或可迭代对象转换为真正的数组。
2. Array.find()：返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。
3. Array.findIndex()：返回数组中满足提供的测试函数的第一个元素的索引，若没有找到则返回 -1。
4. Object.assign()：用于将一个或多个源对象的所有可枚举属性复制到目标对象，返回目标对象。
5. Object.keys()：返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
6. Object.values()：返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用 for...in 循环的顺序相同。

3.常见前端安全性问题

        前端安全的主要领域，比如 XSS、CSRF、SQL 注入（虽然更多是后端，但前端也可能涉及）、点击劫持、跨域问题、密码安全、文件上传安全等等。然后，每个领域下有哪些常见的问题，比如 XSS 的类型、预防措施，CSRF 的原理和防护方法，这些都是面试中常问的。

XSS：攻击者通过注入恶意脚本，在用户浏览器中执行，窃取 Cookie、会话令牌等敏感信息

        预防措施：1.输入输出转码，对用户输入（如表单、URL 参数）和输出（如 HTML、URL、JavaScript）进行编码（如使用textContent代替innerHTML 2.Cookie 安全属性：设置HttpOnly（防止 JS 读取 Cookie）、Secure（仅 HTTPS 传输）

跨站请求伪造（CSRF）

        攻击者诱导用户执行非自愿的操作（如转账、修改密码），利用用户已登录的会话凭证。
攻击原理：用户登录 A 网站后，浏览器携带 Cookie 访问恶意网站 B，B 向 A 发送伪造请求（如隐藏的表单提交或自动发送的 GET 请求）。

        防御措施：Token 验证：提交时校验 Token 与用户会话是否匹配。设置Cookie的SameSite=Strict/Lax，限制跨站请求携带 Cookie（Strict完全禁止，Lax允许部分安全场景）。

跨域资源共享（CORS）与安全

        限制允许的源：使用Access-Control-Allow-Origin指定单一可信域名（如https://api.example.com），避免使用*（通配符）。

        预检请求（Preflight）：对复杂请求（如含Content-Type: application/json的 POST 请求），浏览器先发送 OPTIONS 请求验证权限，需确保服务端正确响应。

前端如何处理密码安全？需要

•  输入强度校验：通过正则表达式检查密码复杂度（如大小写、数字、特殊字符，长度限制）。
• 掩码显示：使用input type="password"隐藏输入内容，避免明文泄露。
• 避免本地存储：绝不将密码明文存储在localStorage/sessionStorage或 Cookie 中（应通过 HTTPS 传输，由后端加密处理）。
• 防暴力破解：前端配合后端限制登录尝试次数，或添加验证码。

如何避免 URL 中的敏感信息泄露？   

• 避免明文参数：绝不通过 URL 传递密码、Token 等敏感信息（如https://api.com/login?token=xxx），应通过 POST 请求体或 Header 传输。
• URL 编码：对用户输入的参数进行编码（如encodeURIComponent），防止特殊字符导致的注入攻击（如路径遍历../）。
• 路由参数校验：对动态路由参数（如/user/123）进行合法性校验，防止越权访问（如篡改 ID 访问他人数据）。 

其他常见安全问题

• 如何理解 Web 安全中的 “同源策略”？它的作用是什么？答：浏览器限制不同源（协议、域名、端口均相同）的页面之间交互，防止恶意网站窃取数据，作用是：阻止跨域读取 Cookie、DOM、AJAX 请求，是浏览器的核心安全机制。

• 什么是依赖项安全？如何防范 npm 包的漏洞？答：避免使用未维护的库，选择下载量高、社区活跃的包。使用package-lock.json或yarn.lock锁定依赖版本，防止版本劫持。

• 简述 HTTPS 的作用及前端相关配置 ：作用：加密传输数据，防止中间人攻击、数据篡改和窃听。确保证书有效（非自签名），使用 HSTS（HTTP Strict Transport Security）头强制浏览器仅通过 HTTPS 连接。

总结：前端安全核心原则

1. 输入输出校验：永远不信任用户输入，对所有输入进行严格过滤和转义。
2. 最小权限原则：限制资源访问范围（如 CORS、CSP），避免过度开放权限。
3. 关注最新漏洞：定期学习 XSS、CSRF、依赖漏洞等最新攻击手段及防御方案（如 2023 年的 CORS 漏洞confusion attacks）。

4.vite和webpack在热更新上有啥区别 

        1.实现机制，vite使用浏览器原生的ES模块导入功能，可以实现模块级别的热更新，即只更新修改的模块，而不需要刷新整个页面。这样可以提供更快的开发迭代速度。而在webpack中，热更新是基于文件级别的，Webpack 会对整个项目进行打包，需要重新构建并刷新整个页面。(Webpack 的热更新（HMR，Hot Module Replacement）机制不依赖特定的模块导入规范，而是通过 HotModuleReplacementPlugin 插件和 开发服务器（如 webpack-dev-server）实现，其核心原理是在模块更新时，通过注入运行时代码来替换旧模块)

        2.热更新速度，由于 Vite 在开发环境下不需要打包，所以热更新速度非常快。当修改一个模块时，Vite 只需要重新编译该模块，并将更新后的模块发送给浏览器，几乎可以实现即时更新。而webpack 需要重新编译整个模块或部分相关模块，然后再将更新后的代码推送给浏览器。尤其是在项目规模较大、依赖关系复杂时，重新编译的时间会明显增加。

        综上所述，Vite 在热更新方面具有速度快、配置简单等优势，更适合现代前端开发的快速迭代需求；而 Webpack 虽然热更新配置相对复杂，但它的生态系统成熟，对于复杂项目的热更新也能提供有效的支持。

5.在项目中，webpack使用过哪些常见的plugin（插件）和loader（加载器）

 Loader 主要专注于文件的转换，将不同类型的文件转换为 Webpack 可处理的模块；而 Plugin 的功能更广泛，可在 Webpack 构建过程的各个阶段执行各种任务。       

 Loader（加载器）

• 作用：Loader 的功能就是对不同类型的文件（如 CSS、图片、字体等）进行转换，让 Webpack 能够理解并处理这些文件。简单来说，Loader 就是将非 JavaScript 文件转化成 Webpack 可处理的模块。
• 使用方式：在 Webpack 配置文件里，借助module.rules属性来配置 Loader。每个规则包含test和use两个关键属性，test用于匹配文件类型，use用于指定要使用的 Loader。
• 示例：处理 CSS 文件时，一般会用到style-loader和css-loader。css-loader的作用是解析 CSS 文件里的@import和url()语句，style-loader则把 CSS 代码注入到 HTML 文件的<style>标签中。

module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
};

 

Plugin（插件）

• 作用：Plugin 能够在 Webpack 构建过程的各个阶段执行特定的任务，它的功能更为广泛，可用于优化打包结果、管理资源、注入环境变量等。
• 使用方式：在 Webpack 配置文件里，通过plugins属性来配置 Plugin。首先要引入 Plugin，接着在plugins数组里创建 Plugin 实例。
• 示例：HtmlWebpackPlugin可自动生成 HTML 文件，并把打包后的 JavaScript 文件注入其中。

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
};

常用loader

• css-loader：解析 CSS 文件里的@import和url()语句，把 CSS 文件转化为 JavaScript 模块。
• less-loader：将 Less 文件编译成 CSS 文件，同样常与css-loader、style-loader配合。
• file-loader：处理文件资源，像图片、字体等，将文件复制到输出目录，并返回文件的公共 URL
• babel-loader：借助 Babel 将 ES6 + 代码转换为向后兼容的 JavaScript 代码，以确保在旧版本浏览器中也能正常运行。

常用plugin

• HtmlWebpackPlugin：自动生成 HTML 文件，并且把打包后的 JavaScript 和 CSS 文件注入到 HTML 文件中。
• TerserPlugin：压缩和混淆 JavaScript 代码，减少文件大小，提高加载速度。
• CopyWebpackPlugin：将指定的文件或目录复制到输出目录，适用于处理静态资源。
• MiniCssExtractPlugin：将 CSS 提取到单独的文件中，而非将其注入到 JavaScript 文件里，从而提升性能。