前端面试场景题

目录

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

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

[ES6(ES2015)之后,JavaScript 新增了许多实用的数组和对象方法,下面为你详细介绍:](#ES6(ES2015)之后,JavaScript 新增了许多实用的数组和对象方法,下面为你详细介绍:)

3.常见前端安全性问题

[XSS:攻击者通过注入恶意脚本,在用户浏览器中执行,窃取 Cookie、会话令牌等敏感信息](#XSS:攻击者通过注入恶意脚本,在用户浏览器中执行,窃取 Cookie、会话令牌等敏感信息)

跨站请求伪造(CSRF)

跨域资源共享(CORS)与安全

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

[如何避免 URL 中的敏感信息泄露?](#如何避免 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 与用户会话是否匹配。设置CookieSameSite=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.jsonyarn.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。每个规则包含testuse两个关键属性,test用于匹配文件类型,use用于指定要使用的 Loader。

  • 示例 :处理 CSS 文件时,一般会用到style-loadercss-loadercss-loader的作用是解析 CSS 文件里的@importurl()语句,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 文件里的@importurl()语句,把 CSS 文件转化为 JavaScript 模块。
  • less-loader :将 Less 文件编译成 CSS 文件,同样常与css-loaderstyle-loader配合。
  • file-loader:处理文件资源,像图片、字体等,将文件复制到输出目录,并返回文件的公共 URL
  • babel-loader:借助 Babel 将 ES6 + 代码转换为向后兼容的 JavaScript 代码,以确保在旧版本浏览器中也能正常运行。

常用plugin

  • HtmlWebpackPlugin:自动生成 HTML 文件,并且把打包后的 JavaScript 和 CSS 文件注入到 HTML 文件中。
  • TerserPlugin:压缩和混淆 JavaScript 代码,减少文件大小,提高加载速度。
  • CopyWebpackPlugin:将指定的文件或目录复制到输出目录,适用于处理静态资源。
  • MiniCssExtractPlugin:将 CSS 提取到单独的文件中,而非将其注入到 JavaScript 文件里,从而提升性能。
相关推荐
musk121216 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
傻啦嘿哟41 分钟前
Python 办公实战:用 python-docx 自动生成 Word 文档
开发语言·c#
翻滚吧键盘1 小时前
js代码09
开发语言·javascript·ecmascript
q567315231 小时前
R语言初学者爬虫简单模板
开发语言·爬虫·r语言·iphone
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说2 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui