【面试】前端面试题

1. 常见高频

1. web开发十大趋势(Top 10 Web Development Trends for 2020)
   1）Progressive web applications(PWA)：渐进式web应用程序，PWAs是功能类似于本地移动应用程序。新兴技术和HTML5
   原生应用和操作系统更完美地整合为用户提供了无缝的用户体验，通过安装应用使在离线的状态下能运行
   2）Artificial intelligence（AI）and chatbots：前者人工智能关注用户体验，后者聊天机器人有效解决了客户支持需求，可以依赖机器人提供全天候帮助。
   3）WebAssembly：开放的标准定义了可执行程序的可移植二进制编码格式。借助WebAssembly可将编程语言编译成浏览器中运行的字节码。WebAassembly以高层次目标构建：首先利用硬件能力具有便携性和高效性，其次以特定方式利用导入和导出构建模块化二进制文件，支持非浏览器嵌入，整合现有网络平台。
   4）Single-page applications：单页应用程序通过使用JS加载内容减少对web页面重新加载需求、所有内容都显示在一个页面上，比如Google\Gmail和Github是单页应用程序最好例子。
   5）Push Notifications推送通知：网站和移动应用程序能在线营销并且吸引更广泛的受众，针对访客的最强大解决方案之一能根据通知的及时性、相关性和精确性改变重新营销的效率。推送通知在您和客户间形成了直接的通信链接，包括：
   a. 根据年龄、性别、位置和购买历史确定特定用户群；
   b. 避免通过垃圾邮件过滤器传递邮件;
   c. 把品牌放在顾客的首位;
   d. 不让客户承担成本情况下推销业务，应该尝试通过推送通知让客户了解有关特别折扣、活动、以客户为中心的活动最新情况。
   6）Augmented reality(AR) and virtual reality(VR)
   7）Response animation idle load(RAIL)：包含更快的加载时间和优秀的网站性能，

2. MVVM、MVC模型？
   MVC 即 Model-View-Controller（模型-视图-控制器)是项目的一种分层架构思想，它把复杂的业务逻辑，
   抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：
   保证了模块的智能单一性，方便程序的开发、维护、耦合度低。
   MVVM：MVVM 即 Model-View-ViewModel，(模型-视图-控制器)它是一种双向数据绑定的模式， 用 viewModel 来建立起 model 数据层和 view 视图层的连接，数据改变会影响视图，视图改变会影响数据
   
   1）vue双向数据绑定的原理：
   数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
   具体步骤：
   第一步： 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化
   第二步： compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
   第三步： Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:
   1、在自身实例化时往属性订阅器(dep)里面添加自己
   2、自身必须有一个 update() 方法
   3、待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。
   第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，
   通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；
   视图交互变化(input) -> 数据 model 变更的双向绑定效果。
   
   2）深浅拷贝：对象复制的两种方式，处理引用类型的字段时存在显著差异
   深拷贝Deep Copy：创建一个新对象并复制原对象的所有字段，包括引用类型的字段。每个引用类型都会创建一个新实例，确保源对象和目标对象间没有任何共享的引用

• 递归复制所有子对象，即使原始对象或拷贝对象修改子对象也不会互相影响
• 特点：基本数据类型的值会被复制；引用数据类型的对象被完全独立地复制
  浅拷贝Shallow Copy：创建一个新对象，该对象与原对象具有相同的值，但对引用类型（Reference Type）是数据类型，特点是变量存储的是数据的引用（内存地址）而非直接存储数据。当操作引用类型时，实际操作的是指向数据的指针，而非数据副本
  存储方式：引用类型的变量在栈（stack）存储的是数据的地址（引用），实际数据保存在堆（Heap）中；如Object、Array、Function（JS中）、类实例（Java/C#中的对象）等
  在赋值行为中将一个引用类型变量赋值给另一个变量时，复制的是引用（地址）而非数据本身；修改其中一个会影响另一个（因为指向同一数据）

  let a = {name:"Alice"};
  let b = a; // b和a指向同一个对象
  b.name = "Bob";
  console.log(a); // 输出：{name:"Bob"}
  

3）基础

Infinity === -Infinity // false
1/-0 // -Infinity
-1/-0 // Infinity
:value = "props.modelValue"
@input="emit"
v-model=""
const obj = {}
console.log(obj.has)

4）模块化：解决一个复杂问题时自顶向下逐层将系统划分为若干模块的过程，包括模块间解耦、服用（对业务进行模块化有多种属性、反映内部特性）
其好处包括模块化解耦、复用，可单独编译某个模块、提升开发效率（每个模块实际上也是一个完整项目可以单独编译、调试），可多团队并行开发、测试
模块化业务分层-由下到上；
基础组件层包括底层使用的库和封装的一些工具库（libs）如okhttp, rxjava, rxandroidm glide等；
业务组件层包括与业务相关、封装第三方库sdk，如封装后的支付、即时通行等；
业务模块化按照业务划分模块比如IM模块，资讯模块等
5）前端架构时应遵守几个原则
a. 第一个“以不变为中心”，软开的本质是操作数据放在web开发的场景，后端是存储、获取数据，前端是收集、展示数据。数据在前、后端流转时数据的基本形态不会变：基本类型、对象、列表；数据的传输协议也不会变HTTP、WebSocket等。在前端开发中离其越远或者离GUI越近的东西越容易变。所以要梳理哪些东西不宜变化、哪些东西很容易改变
b. 各层皆可替换，根据易变性梳理出的模块按职责进行分层，定义好层和层间的对接协议（接口）。除了因自身进化需要对接协议基本不会变也不应去改变。
c. 视图层尽可能薄，该层是展示数据理应只有交互逻辑而前端在写UI时会参杂较多的业务，导致视图层变得厚重、臃肿。而业务逻辑不利于服用会增加视图层迁移成本，应对业务逻辑进行抽象并提取领域层
由于视图层易变、多样并想让它尽可能薄，最好有什么方式能增加访问逻辑层的成本如前端只能通过网络请求访问后端一样
6）热更新：浏览器的无刷新更新（即webpack的HMR-hot module replacement模块热替换）【允许在运行时替换、添加、删除各种模块而无需完全刷新】，目的是加快开发速度只适用于开发环境
a. 实现思路保留在完全重新加载页面时丢失的应用程序的状态、只更新改变的内容节省开发时间、调整样式更快速几乎等于浏览器调试器中更改样式
b. 使用中可引入webpack库、使用new webpack.HotModuleReplacementPlugin()、设置devServer选项中的hot字段为tree
c. 调整样式更快速几乎等于在浏览器调试器中更改样式
7）前端页面的三层构成：

4. 有做过npm
5. 组件库吗
6. 对底层源代码的了解
7.

2. 联调相关

1. HTTP状态码：这里1xx表示服务器接收到请求并进一步处理

2. 2xx表示成功

3. 3xx

状态码	名称	具体含义
300	Multiple Choices	请求有多个响应共选择，客户端可以选一个
301	Moved Permanetly	请求的资料可以永久移动
302	Found	服务器处理请求但没有完成处理
303	See Other	重定向，要求客户端用GET方法访问另一个URI，通常用POST后跳转；典型场景是表单提交后跳转到结果页，即用于POST请求后的重定向强制客户端使用GET方法访问新URI避免用户刷新页面时重复提交表单POST，符合PRG模式（Post/Redirect/Get）
304	Not Nodified	缓存控制，服务器告诉客户端资源未修改可直接用本地缓存；典型场景是浏览器缓存未过期、服务传输数据（节省带宽）；服务器告诉客户端资料未修改可以直接使用本地缓存，客户端必须事先发送IF-Modified-Since或If-None-Match(ETag)请求头服务器比对后决定是否返回304
305	Use Proxy	请求要通过代理访问
307	Temporary Redirect	请求的资料临时移动到了新位置

4. 4xx

5. 5xx

3. 性能优化

1. 常用的是chrome developer
   1）lighthouse：nodejs中使用npm i lighthouse
   2）performace：
2. 使用webpacgetest
3. 使用perfermance Observer
   1）LCP(Largest Contentful Painter）视图中最大图像和文本块呈现的时间

4. 前端新技术栈

1. 现代的：antd, webpack, nextjs, scss, ts
2. 趋势：前端工程化，SSR，Three.js和WebGL
3. 云计算、分布式系统和软件工程中的关键技术概念
   1）RSP（Real-time Streaming Protocol)：定义为实时流协议，用于直播、视频会议等实时数据传输的通信协议如RTSP；用途则为控制音视频流的播放、暂停等，如监控摄像头或流媒体服务
   2）CSP（Content Security Policy）定义为内容安全策略，一种网络安全机制；用途则是通过HTTP头定义网页可加载的资源（脚本、图片）防止XSS攻击，比如Content-Security-Policy:defulat-src’self’限制只加载本站资源
   3）可观察性（Observability）定义则是通过日志（Logs）、指标（Metrics）、追踪（Traces）监控系统内部状态的能力；工具则包含Prometheus（指标）、ELK（日志）、Jaeger（分布式追踪）；与监控的区别则在于不仅能报警还能深入诊断未知
   4）灰度分布Canary Release：定义为渐进式部署策略先让用户试用新版本，目的在于降低全量发布的风险，结合A/B测试验证功能，最终通过负载均衡按比例分流流量来实现
   5）WAF（Web Application Firewall）则定义为web应用防火墙，专门防护HTTP流量安全层，功能则是组织SQL注入、XSS、DDoS等攻击，部署则是云服务（如Cloudflare）、硬件或软件模块
   6）边缘计算（Edge Computing）将计算推向数据源头（IoT设备、基站附近）；优势则为减少延迟（自动驾驶，AR/VR）、节省带宽（本地处理视频）；案例包含AWS IoT Greengrass、CDN上节点的逻辑处理
   7）Serverless无服务器架构：定义为开发者无需管理服务器按需运行代码/事件驱动；特点包含自动扩缩容、按实际用量计费（如AWS Lambda）；场景则包含短时任务（图像处理、API后端等）

• 关联场景则包含边缘计算+Serverless：在CDN边缘结点运行lambda函数，实时处理用户上传的图片
• WAF+CSP：双重防护web应用，防攻击同时限制资源加载来源
• 可观察性+灰度发布：通过【监控指标和日志】决定是否全量发布新版本

Lambda表达式(Lambda Expression）：Java 8 中引入一种简化函数式编程的语法，更简洁表示匿名函数（没有名称）核心目的简化代码，尤其是使用函数式接口(Functional Interface)
(参数列表)->{方法体}
其中，->是lambda操作符读作goes to
常见用法包含

Runnable r = new Runnable() {
@Override
	public void run() {
     System.out.println("Hello, world!");
     }
}

用lambda简化后变为

Runnable r = () -> System.out.println("Hello, world!");

5. 浏览器&JS

5.1 web缓存

Web缓存是指一个Web资源（如html页面，图片，js，数据等）存在于Web服务器和客户端（浏览器）之间的副本。
缓存会根据进来的请求保存输出内容的副本；当下一个请求来到时，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。
常见的包含浏览器缓存访问过网站的网页；当再次访问该URL地址时若网页没有更新则

1. 缓存的几个好处：减少网络带宽消耗、减轻服务器端的访问压力、减少网络延迟（使用本地缓存能加快页面载入速度提升用户体验）、存储频繁访问的数据、内存缓存减少磁盘I/O、保存耗时的操作以免再次使用
2. 常见的则是浏览器会缓存访问过网站的网页当再次访问该URL时，若网页没更新就不会再次下载网页而是直接使用本地缓存。
3. web缓存分类
   1）浏览器缓存（客户端）：包括浏览器、代理服务器、网关缓存等，浏览器能将比较消耗带宽且不会变更的静态资源缓存在本地，当用户需要再次使用这部分资源（点击浏览器的页面前进或后退）则能直接从浏览器缓存中加载而不需要再向服务器发起请求
   2）服务端缓存（服务端）：包括页面、数据、数据库缓存，典型代表包括反向代理服务器缓存，该服务器大多数时候是在分担服务器端的访问压力，能减少向源服务器发送请求就尽量减少尽可能利用缓存下来的资源。
   使用CDN为了让用户就近访问加快页面的载入速度，每个CDN节点都会缓存用户访问过的资源属于服务器端缓存的范畴。
4. 客户端缓存：把缓存保存在除Web服务器之外的地方加速同一客户端访问相同资源时的速度
   1）浏览器缓存
   2）代理服务器缓存
   3

5.2 算法或场景

1. 下拉刷新和上拉加载实现：在移动端H5网页中，这两个加载更多数据的交互方式出现频率很高，开源社区的解决方案包括iscroll\pulltorefresh.js等
   1）上拉刷新实现主要依靠touch事件的三个阶段以及CSS3
   2）
2. 1

5.3 DOM渲染

1. 指对于浏览器中展示给用户的DOM文档的生成过程并渲染，可分为三个阶段
   1）纯后端渲染：每个页面中在Chrome中展开得到的DOM和服务器返回的DOM基本一致（可通过查看网页源代码得到服务器返回的DOM），因为实际中页面多少会带一些js代码并且在浏览器端运行js渲染DOM，但js代码不影响DOM的主题由服务端返回。该渲染DOM树的生成完全在后端服务器中完成，相当于后端服务器程序会把各种数据拼成一个DOM树并转为一个字节流作为HTTP Response的body返回给浏览器
   2）纯前端渲染：纯前端可以解决纯后端渲染中各种体验问题。将DOM生成的主题逻辑放在前端，此时后端只会返回一个框架的DOM比如只带一个容器元素的DOM，由JS将页面的主题渲染到容器元素中
   3）服务端的js渲染结合前端：最适用于提供最优的使用体验但未必是开发中最好的方式

6. Webpack

6.1 概念和应用

1. 模块化可以将复杂的程序细化为小文件，

7. 如何快速定位并解决线上问题（前端视角）

7.1 问题确认阶段

【现象确认】

1. 现象确认：快速复现（用户操作路径/设备环境/网络条件）
2. 确认问题影响范围（特定用户群/全量/特定功能模块）
3. 区分偶发性问题与系统性故障

【信息收集】

1. 用户端日志（浏览器Console/Network错误/设备信息）
2. 服务端日志（CDN/接口响应状态码/Nginx日志）
3. 监控系统数据（APM工具如sentry，性能指标，错误率徒增）
4. 版本关联性（是否与新发布版本相关）

7.2 问题分类与定位

【前端问题判断】

1. 资源加载异常
   1）检查JS/CSS/图片的HTTP状态码（404/500/CDN失效）
   2）验证资源版本哈希是否匹配（缓存问题）
2. 代码执行错误
   1）分析浏览器Console报错：语法错误或者未捕获异常
   2）Source Map反解析定位源码位置：利用Source Map文件将压缩/编译后的代码位置映射回原始源代码位置的过程
   具体含义则包括Source Map文件-一个JSON格式的映射文件记录了编译后代码与源代码间的对应关系、反解析过程（当浏览器开发者工具调试时系统会自动使用Source Map将压缩后的行号映射为原始行号、混淆的变量名映射为原始变量名、合并的文件映射为分离的源文件
   典型应用场景：
   a. 在浏览器中调试压缩后的JavaScript
   b. 查看Sass/Less编译后的CSS对应的原始样式位置
   c. 调试TypeScript转译后的JavaScript代码
   d. 分析生产环境错误堆栈中的原始代码位置
3. 性能问题：
   a. Lighthouse/Chrome Performance分析关键指标（FCP, LCP, TTI）
   FCP(First Contentful Paint）定义页面首次渲染内容的时间点包括用户首次看到页面的文本、图片或其他任何内容的时间。重要性包括了FCP反映了页面显现的速度、有助于用户感知页面的初步加载情况
   LCP(Largest Contentful Paint）定义最大可见内容（图片或大块文本）加载完成的时间；重要性包括包括LCP衡量页面视觉加载速度关键指标较快的LCP有助于提升用户满意度
   TTFB（Time to Fist Byte）定义是从用户发出请求到浏览器收到第一个字节响应的时间；重要性反映了服务器的响应能力，短的TTFB则有利于提高整体加载速度
   FID（First Input Delay）则定义了用户首次与页面交互（点击链接或按钮）到浏览器实际响应这一操作的时间；重要性代表了FID衡量了页面的交互性较低的值意味着用户可以更快地与页面互动
   TTI（Time to Interactive)：定义了页面能完全交互的时间表示页面主要元素加载完毕且可以响应用户输入的时刻；重要性则代表了TTI指标帮助开发者了解用户何时能有效进行交互
   CLS（Cumulative Layout Shift）：定义了页面在加载过程中内容布局变化的综合、衡量加载过程中元素移动的频率和程度；重要性则代表了较低的CLS值意味着用户在阅读期间内容不断移动的情况较少提高用户体验
   TBT（Total Blocking Time）定义在页面加载过程中长时间保持阻塞的时间总和即时间超出50ms的任务之和，重要性则体现了TBT协助评估页面在加载过程中各个元素执行的阻塞速度影响用户交互的流畅性。
   其中
4. 兼容性问题：

7.3 前后端协作问题

1. 接口异常
   1）验证接口响应格式（JSON结构错误）
   2）检查CORS配置与身份认证状态
2. 数据一致性
   1）对比接口文档与实际字段
   2）数据缓存策略冲突（LocalStorage与接口数据）

7.3 根因分析与解决

1. 代码缺陷
   1）紧急修复：通过热修复或回滚版本
   2）逻辑验证：通过单元测试或集成测试用例
   3）防御式编程：通过异常边界（Error Boundaries）
2. 性能瓶颈
   1）加载优化：代码分割（Code Splitting）、异步加载、预加载
   2）渲染优化：减少重绘重排、虚拟滚动、骨架屏
   3）缓存策略：Service Worker/HTTP缓存头优化
3. 基础设施问题
   1）CDN故障：切换备用源站或多CDN容灾
   2）构建工具配置：检查Webpack/Rollup打包策略
   3）部署异常：验证CI/CD流程（环境变量注入错误）

7.4 验证与监控

1. 灰度验证：通过A/B测试逐步放量观察关键指标
2. 监控加固：增加自定义埋点（如关键操作成功率）、配置报警阈值（错误数/性能劣化）
3. 回归测试：自动化测试覆盖核心场景，人工回归边缘用例

7.5 复盘与预防

1. 根因报告：记录问题时间线、影响面、修复方案
2. 流程改进：完善Code Review CheckList，增强发布卡口（如E2E测试强制通过）
3. 技术债治理：架构优化（如微前端隔离故障域），工具链升级（如TS强化类型安全）

7.6 思维链工具

1. MECE原则：穷尽可能性且不重叠，区分网络/代码/配置问题
   1）网络问题特征与排查方法
   a. 特征表现：连接超时或完全无法连接，数据传输中断或不完整，响应时间异常长
   2）
   3）
2. 5 Why分析法：连续追问直到根因（如JS报错-》依赖版本冲突 -> npm索包缺失
3. 优先级矩阵：按影响面与修复成本决策行动顺序

8. 组件

8.1 函数式组件

1. 函数组件（组件的函数式写法），类组件算legacy
   1）类组件写法：class App extends Components
   2）hooks是特殊函数用在函数组件中使用state和其他react特性无需编写类组件

9.

参考文章：
[1] 前端常见面试题
[2]