前端面试场景题

目录

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 文件里，从而提升性能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/77983.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Spring JDBC 的开发步骤（注解方式）

Spring JDBC 的开发步骤（注解方式）

Spring JDBC 的开发步骤主要包括以下关键环节&#xff0c;结合代码示例说明如下&#xff1a; 1. 添加依赖 在 pom.xml 中引入 Spring JDBC 和数据库驱动依赖&#xff08;以 HikariCP 连接池和 MySQL 为例&#xff09;&#xff1a; <!-- Spring JDBC --> <dependency…
阅读更多...
Java面试：探索Spring Boot与微服务的深度挑战

Java面试：探索Spring Boot与微服务的深度挑战

场景&#xff1a;互联网大厂Java求职者面试 在一个阳光明媚的下午&#xff0c;赵大宝来到了知名互联网大厂的面试现场。他面临的是一个严肃的面试官&#xff0c;准备对他的技术能力进行全面考核。 第一轮提问&#xff1a;基础知识与Spring Boot应用 面试官&#xff1a;赵先生…
阅读更多...
Spring Boot中的监视器：Actuator的原理、功能与应用

Spring Boot中的监视器：Actuator的原理、功能与应用

在 Spring Boot 应用中&#xff0c;监视器通常指 Spring Boot Actuator&#xff0c;一个内置的生产就绪工具&#xff0c;用于监控和管理运行中的应用。Actuator 提供了一系列 RESTful 端点&#xff0c;暴露应用的运行时信息&#xff0c;如健康状态、性能指标、日志配置和环境变…
阅读更多...
GitHub创建远程仓库

GitHub创建远程仓库

使用GitHub创建远程仓库&#xff1a;从零开始实现代码托管与协作 前言 在当今软件开发领域&#xff0c;版本控制系统已成为开发者必备的核心工具。作为分布式版本控制系统的代表&#xff0c;Git凭借其强大的分支管理和高效的协作能力&#xff0c;已成为行业标准。而GitHub作为…
阅读更多...
Manus技术架构、实现内幕及分布式智能体项目实战 线上高级实训班

Manus技术架构、实现内幕及分布式智能体项目实战 线上高级实训班

Manus技术架构、实现内幕及分布式智能体项目实战 线上高级实训班 模块一&#xff1a;解密Manus分布式多智能体工作原理和架构内幕  基于Claude和Qwen的大模型智能体Manus为何能够迅速成为全球讨论热度最高、使用体验最好、产业界最火爆的大模型智能体产品&#xff1f;  Ma…
阅读更多...
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示

JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示

获取wms服务元数据信息并在三维webgl客户端进行叠加显示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><tit…
阅读更多...
【刷题Day21】TCP（浅）

【刷题Day21】TCP（浅）

说说 TCP 的四次挥手&#xff1f; TCP的四次挥手事用于安全关闭一个已建立的连接的过程&#xff0c;它确保双方都能完成数据传输并安全地释放连接资源。 简述步骤&#xff1a; 第一次挥手&#xff08;FIN --> ACK&#xff09;&#xff1a;客户端主动关闭连接&#xff0c;…
阅读更多...
Springboot整合Redis主从

Springboot整合Redis主从

Springboot整合Redis主从 前言原配置现配置测试LettuceConnectionFactory.setShareNativeConnection 方法的作用 前言 SpringBoot版本&#xff1a;2.3.2.RELEASE 原配置 原yml配置内容&#xff1a; spring:# Redis服务器配置redis:host: 127.0.0.1# Redis服务器连接端口por…
阅读更多...
git撤销最近一次commit

git撤销最近一次commit

在Git中&#xff0c;在撤销最近一次的提交时&#xff0c;有几种不同的方法&#xff0c;这取决于你想要的结果。下面是一些常见的方法&#xff1a; 1. 取消最近的提交&#xff08;但不删除改动&#xff09; 如果你想要取消最近的提交&#xff0c;但是保留这些改动&#xff0c;以…
阅读更多...
解决Docker 配置 daemon.json文件后无法生效

解决Docker 配置 daemon.json文件后无法生效

vim /etc/docker/daemon.json 在daemon中配置一下dns {"registry-mirrors": ["https://docker.m.daocloud.io","https://hub-mirror.c.163.com","https://dockerproxy.com","https://docker.mirrors.ustc.edu.cn","ht…
阅读更多...
QML--全局对象Qt

QML--全局对象Qt

在 QML 中&#xff0c;Qt 是一个内置的全局对象&#xff0c;提供了许多核心功能、工具函数、环境信息和类型构造方法。以下是 Qt 全局对象的详细分类和常见用途&#xff1a; 1. 工具函数 1.1 格式化与转换 Qt.formatDate(date, format) / Qt.formatTime(date, format) 格式化…
阅读更多...
前端笔记-Vue3（下）

前端笔记-Vue3（下）

学习参考视频&#xff1a;尚硅谷Vue3入门到实战&#xff0c;最新版vue3TypeScript前端开发教程_哔哩哔哩_bilibili vue3学习目标&#xff1a; VUE 31、Vue3架构与设计理念2、组合式API&#xff08;Composition API&#xff09;3、常用API&#xff1a;ref、reactive、watch、c…
阅读更多...
Git远程操作与标签管理

Git远程操作与标签管理

目录 1.理解分布式版本控制系统 2.远程仓库 3.新建远程仓库 4.克隆远程仓库 5.向远程仓库推送 6.拉取远程仓库 7.配置Git 7.1.忽略特殊文件 7.2.给命令配置别名 8.标签管理 8.1.理解标签 8.2.创建标签 8.3.操作标签 1.理解分布式版本控制系统 Git是目前世界上…
阅读更多...
Vue3：component(组件：uniapp版本)

Vue3：component(组件：uniapp版本)

目录 一、基本概述二、基本使用(父传子)三、插槽四、子传父 一、基本概述 在项目的开发过程中&#xff0c;页面上井场会出现一些通用的内容&#xff0c;例如头部的导航栏&#xff0c;如果我们每一个页面都去写一遍&#xff0c;那实在是太繁琐了&#xff0c;所以&#xff0c;我…
阅读更多...
C#语言实现PDF转Excel

C#语言实现PDF转Excel

实现效果 第三方库 ClosedXML iTextSharp 实现源码 using System.Text; using iTextSharp.text.pdf; using iTextSharp.text.pdf.parser; using System.Text.RegularExpressions; using ClosedXML.Excel;namespace PdfToExcel_winform {public partial class MainForm : For…
阅读更多...
如何将IDP映射属性添加，到accountToken中 方便项目获取登录人信息

如何将IDP映射属性添加，到accountToken中 方便项目获取登录人信息

✅ 目标 你想要&#xff1a; 用户通过 IdP 登录&#xff08;SAML 或 OAuth2&#xff09;Keycloak 自动将 IdP 返回的属性&#xff08;如&#xff1a;email、name、role 等&#xff09;映射到用户账户中并把这些属性加入到用户登录返回的 Access Token 中&#xff0c;供业务系…
阅读更多...
JSON-RPC远程控制

JSON-RPC远程控制

文章目录 &#x1f310; 一、什么是 JSON-RPC&#xff1f;&#x1f4ec; 二、通信过程1️⃣ 客户端发起请求2️⃣ 服务端处理请求&#xff0c;调用方法&#xff0c;返回结果 &#x1f4d1; 三、重要字段说明&#x1f6e0;️ 四、核心函数与概念&#xff08;结合你的代码&#x…
阅读更多...
芝法酱躺平攻略（21）——kafka安装和使用

芝法酱躺平攻略（21）——kafka安装和使用

本节内容比较初级&#xff0c;故接着躺平攻略写 一、官网的下载 1.1 下载解压 首先&#xff0c;去官网下载jar包&#xff0c;放进linux中&#xff0c;解压到对应位置。 我的位置放在/WORK/MIDDLEWARE/kafka/4.0 1.2 常见配置 # 每个topic默认的分片数 num.properties4 # 数…
阅读更多...
AutoSAR从概念到实践系列之MCAL篇(二)——Mcu模块配置及代码详解(上)

AutoSAR从概念到实践系列之MCAL篇(二)——Mcu模块配置及代码详解(上)

欢迎大家学习我的《AutoSAR从概念到实践系列之MCAL篇》系列课程，我是分享人M哥，目前从事车载控制器的软件开发及测试工作。 学习过程中如有任何疑问，可底下评论！ 如果觉得文章内容在工作学习中有帮助到你，麻烦点赞收藏评论+关注走一波！感谢各位的支持！ 根据上一篇内容中…
阅读更多...
easypoi 实现word模板导出

easypoi 实现word模板导出

特此非常致谢&#xff1a;easypoi实现word模板 基础的可以参考上文&#xff1b; 但是我的需求有一点点不一样。 这是我的模板&#xff1a;就是我的t.imgs 是个list 但是很难过的是easy poi 我弄了一天&#xff0c;我都没有弄出来嵌套list循环怎么输出显示&#xff0c;更难过…
阅读更多...
最新文章

Copyright @ 2022~2023