前端岗面试30万字原题含答案

我们正处在前端发展的一个微妙节点。

曾几何时，几句 HTML、CSS 加个 jQuery 特效就能轻松拿 Offer；后来，掌握 Vue 或 React 便能成为市场宠儿。但现在，当你翻开这本“前端岗面试30万字原题含答案”时，我们所面对的前端世界，已经悄然变成了一场 “冰与火之歌”。

大环境的“冰”：在存量博弈中寻找缺口
当下的技术招聘市场，用一个字形容就是 “卷”。互联网行业从野蛮生长步入精耕细作，HC（招聘名额）紧缩，而涌入的求职者却依旧庞大。大厂不再仅仅为了业务扩张而招人，更看重候选人的不可替代性。

你不仅要与同级的毕业生竞争，还要与众多因公司业务调整而释放出来的、经验丰富的中高级开发者同台竞技。这就导致了一个现象：面试难度呈指数级上升。以前“背八股”就能通关，现在面试官更擅长从一个简单的知识点出发，逐步深挖到你知识体系的盲区。

面试的“火”：从“会用”到“造轮子”的审判
这30万字的原题，记录的正是这种严酷审判下的“炮火”轨迹。面试题早已不满足于“Vue的双向绑定原理”，而是追问“如果让你实现一个响应式系统，你会如何处理数组变异？”；不再满足于“简述闭包”，而是要求“请用闭包修复这段实际代码中的内存泄漏问题”。

现在的面试，是一场对计算机基础、框架原理、工程化能力、性能优化以及软技能的全方位立体化考核。它要求你既要有广度的知识覆盖（对应这30万字的广度），又要有深度的技术钻研。

技术的“风”：永远追逐，永远热泪盈眶
更让人焦虑的是，我们脚下的技术栈从未停止更迭。Vue 3 的 Composition API 刚熟练，SolidJS、Svelte 带着全新的编译时理念悄然兴起；Webpack 还没玩透，Vite 已经凭借 ESM 成为主流；微前端、Serverless、边缘渲染、AI 与前端的结合……新的概念和工具层出不穷。

这种快速迭代带来了巨大的 “知识焦虑”。很多开发者陷入了“学新的，忘旧的，面试官问的还是底层”的死循环。但请记住，万变不离其宗。无论框架如何变化，JavaScript 的核心、浏览器的工作原理、网络协议、设计模式这些底层能力，才是你对抗技术洪流的“压舱石”。

关于这份资料：
因此，呈现在你面前的这“30万字原题与答案”，不仅仅是一份死记硬背的题库。
它更像是一面镜子，映照出当前市场的技术热点和考察趋势；
它是一张地图，帮你梳理从 HTML/CSS 到浏览器原理，从 JS 基础到前沿框架，从算法到工程化的知识脉络；
它更是一块磨刀石，旨在通过高频考题的深度解析，磨砺你的编程思维和解题技巧，让你在面对瞬息万变的技术浪潮和残酷的面试环境时，能够以不变应万变。

希望这30万字，能成为你穿越寒冬的一簇篝火，照亮你通往理想 Offer 的最后一公里。乾坤未定，你我皆是黑马。

以下：https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material4

如何理解Fiber架构的迭代动机与设计思想

在 16.x 版本中将其最为核心的 Diff 算法整个重写，使其以“Fiber Reconciler”的全新面貌示人。

那么 Stack Reconciler 到底有着怎样根深蒂固的局限性，使得 React 不得不从架构层面做出改变？而 Fiber 架构又是何方神圣，基于它来实现的调和过程又有什么不同呢？本讲我们就围绕这两个大问题展开讨论。

前置知识：单线程的 JavaScript 与多线程的浏览器

大家在入门前端的时候，想必都听说过这样一个结论：JavaScript 是单线程的，浏览器是多线程的。

对于多线程的浏览器来说，它除了要处理 JavaScript 线程以外，还需要处理包括事件系统、定时器/延时器、网络请求等各种各样的任务线程，这其中，自然也包括负责处理 DOM 的UI 渲染线程。而 JavaScript 线程是可以操作 DOM 的。

这意味着什么呢？试想如果渲染线程和 JavaScript 线程同时在工作，那么渲染结果必然是难以预测的：比如渲染线程刚绘制好的画面，可能转头就会被一段 JavaScript 给改得面目全非。这就决定了JavaScript 线程和渲染线程必须是互斥的：这两个线程不能够穿插执行，必须串行。当其中一个线程执行时，另一个线程只能挂起等待。

具有相似特征的还有事件线程，浏览器的 Event-Loop 机制决定了事件任务是由一个异步队列来维持的。当事件被触发时，对应的任务不会立刻被执行，而是由事件线程把它添加到任务队列的末尾，等待 JavaScript 的同步代码执行完毕后，在空闲的时间里执行出队。

在这样的机制下，若 JavaScript 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，带给用户的体验就是所谓的“卡顿”。一般页面卡顿的时候，你会做什么呢？我个人的习惯是更加频繁地在页面上点来点去，期望页面能够给我哪怕一点点的响应。遗憾的是，事件线程也在等待 JavaScript，这就导致你触发的事件也将是难以被响应的。

试想一下界面不更新、交互无反应的这种感觉，是不是非常令人抓狂？这其实正是 Stack Reconciler 后期所面临的困局。

为什么会产生“卡顿”这样的困局

Stack Reconciler 所带来的一个无解的问题，正是JavaScript 对主线程的超时占用问题。为什么会出现这个问题？Stack Reconciler 是一个同步的递归过程。

同步的递归过程，意味着不撞南墙不回头，意味着一旦更新开始，就像吃了炫迈一样，根本停不下来。这里我用一个案例来帮你复习一下这个过程，请先看下面这张图：

在 React 15 及之前的版本中，虚拟 DOM 树的数据结构载体是计算机科学中的“树”，其 Diff 算法的遍历思路，也是沿袭了传统计算机科学中“对比两棵树”的算法，在此基础上优化得来。因此从本质上来说，栈调和机制下的 Diff 算法，其实是树的深度优先遍历的过程。而树的深度优先遍历，总是和递归脱不了关系。

拿这棵树来举例，若 A 组件发生了更新，那么栈调和的工作过程是这样的：对比第 1 层的两个 A，确认节点可复用，继续 Diff 其子组件。当 Diff 到 B 的时候，对比前后的两个 B 节点，发现可复用，于是继续 Diff 其子节点 D、E。待 B 树最深层的 Diff 完成、逐层回溯后，再进入 C 节点的 Diff 逻辑......调和器会重复“父组件调用子组件”的过程，直到最深的一层节点更新完毕，才慢慢向上返回。

这个过程的致命性在于它是同步的，不可以被打断。当处理结构相对复杂、体量相对庞大的虚拟 DOM 树时，Stack Reconciler 需要的调和时间会很长，这就意味着 JavaScript 线程将长时间地霸占主线程，进而导致我们上文中所描述的渲染卡顿/卡死、交互长时间无响应等问题

设计思想：Fiber 是如何解决问题的

什么是 Fiber？从字面上来理解，Fiber 这个单词翻译过来是“丝、纤维”的意思，是比线还要细的东西。在计算机科学里，我们有进程、线程之分，而 Fiber 就是比线程还要纤细的一个过程，也就是所谓的“纤程”。纤程的出现，意在对渲染过程实现更加精细的控制。

Fiber 是一个多义词。从架构角度来看，Fiber 是对 React 核心算法（即调和过程）的重写；从编码角度来看，Fiber 是 React 内部所定义的一种数据结构，它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的“虚拟 DOM”；从工作流的角度来看，Fiber 节点保存了组件需要更新的状态和副作用，一个 Fiber 同时也对应着一个工作单元。

Fiber 架构的应用目的，按照 React 官方的说法，是实现“增量渲染”。所谓“增量渲染”，通俗来说就是把一个渲染任务分解为多个渲染任务，而后将其分散到多个帧里面。不过严格来说，增量渲染其实也只是一种手段，实现增量渲染的目的，是为了实现任务的可中断、可恢复，并给不同的任务赋予不同的优先级，最终达成更加顺滑的用户体验。

Fiber 架构核心：“可中断”“可恢复”与“优先级”

在 React 16 之前，React 的渲染和更新阶段依赖的是如下图所示的两层架构：

正如上文所分析的那样，Reconciler 这一层负责对比出新老虚拟 DOM 之间的变化，Renderer 这一层负责将变化的部分应用到视图上，从 Reconciler 到 Renderer 这个过程是严格同步的

而在 React 16 中，为了实现“可中断”和“优先级”，两层架构变成了如下图所示的三层架构：

多出来的这层架构，叫作“Scheduler（调度器）”，调度器的作用是调度更新的优先级。

在这套架构模式下，更新的处理工作流变成了这样：首先，每个更新任务都会被赋予一个优先级。当更新任务抵达调度器时，高优先级的更新任务（记为 A）会更快地被调度进 Reconciler 层；此时若有新的更新任务（记为 B）抵达调度器，调度器会检查它的优先级，若发现 B 的优先级高于当前任务 A，那么当前处于 Reconciler 层的 A 任务就会被中断，调度器会将 B 任务推入 Reconciler 层。当 B 任务完成渲染后，新一轮的调度开始，之前被中断的 A 任务将会被重新推入 Reconciler 层，继续它的渲染之旅，这便是所谓“可恢复”。

以上，便是架构层面对“可中断”“可恢复”与“优先级”三个核心概念的处理。

八股文档（含答案）

1.JavaScript

相比于npm和yarn，pnpm的优势是什么?

如果使用 Math.random()计算中奖概率会有什么问题吗?

怎么使用js实现拖拽功能?

举例说明你对尾递归的理解，以及有哪些应用场景

说说你对Iterator, Generator 和Async/Await 的理解

说说你对模块化方案的理解，比如CommonJS, AMD, CMD, ES Module

前端跨页面通信，你知道哪些方法?

JavaScript脚本延迟加载的方式有哪些?

怎么理解ES6中Generator的?使用场景有哪些?

导致页面加载白屏时间长的原因有哪些，怎么进行优化?

微前端中的应用隔离是什么，一般是怎么实现的?

JavaScript对象的底层数据结构是什么?

浏览器和Node中的事件循环有什么区别?

版本号排序

哪些原因会导致js里this指向混乱?

怎么实现大型文件上传?

说说你的ES6-ES12的了解

Promise 的 finally 怎么实现的?

怎么使用js动态生成海报?

异步编程有哪些实现方式?

AST语法树是什么?

JS内存泄露的问题该如何排查?

实现mergePromise函数

async、await实现原理

使用Promise实现:限制异步操作的并发个数，并尽可能快的完成全部

2.React

fiber 架构的工作原理?

React Reconciler 为何要采用 fiber 架构?

useState 是如何实现的?

React Fiber是什么?

简单介绍下React中的diff算法

如何让 useEffect 支持 async/await?

React中怎么实现状态自动保存(KeepAlive)?

React Fiber 是如何实现更新过程可控?

react中懒加载的实现原理是什么?

React有哪些性能优化的方法?

不同版本的React 都做过哪些优化?

React18新特性

说说你对React Hook的闭包陷阱的理解，有哪些解决方案?

React 中，怎么给children添加额外的属性?

Fiber 为什么是React性能的一个飞跃?

react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline?

说说 React render 阶段的执行过程

React中，fiber 是如何实现时间切片的?

React 中为什么不直接使用

requestldleCallback?

说说 React commit 阶段的执行过程

React中的路由懒加载是什么?原理是什么?

为什么useState 返回的是数组而不是对象?

3.Vue

Vue模板是如何编译的

vue3相比较于vue2，在编译阶段有哪些改进?

说说Vue页面渲染流程

Vue项目中，你做过哪些性能优化?

如果使用Vue3.0实现一个Modal，你会怎么进行设计?

Vue3.0里为什么要用 Proxy API替代defineProperty API ?

Vue有了数据响应式，为何还要 diff?

说说vue3中的响应式设计原理

说说 Vue 中 CSS scoped 的原理

vue3的响应式库是独立出来的，如果单独使用是什么样的效果?

手写vue的双向绑定

什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路

SSR是什么?Vue中怎么实现?

说下Vite的原理

4.CSS

1. css 中的 animation,transition, transform 有t么区别?

2.怎么做移动端的样式适配?

3.相邻的两个inline-block节点为什么会出现间隔，该如何解决?

4.grid网格布局是什么?

5.CSS3新增了哪些特性?

6.怎么使用 CSS3实现动画?

7.怎么理解回流跟重绘?什么场景下会触发?

8.什么是响应式设计?响应式设计的基本原理是什么?如何进行实现?

9.如果使用CSS提高页面性能?

10.如何实现单行/多行文本溢出的首略样式?

11.如何使用css完成视差滚动效果?

12.怎么使用CSS如何画一个三角形

13.说说对CSS工程化的理解

14.怎么触发BFC，BFC有什么应用场景?

15.单行文本怎么实现两端对齐?

16.说说你对CSS模块化的理解

17.CSS模块化的实现方式

18.怎么让Chrome支持小于12px的文字?

19.怎么让Chrome支持小于12px的文字?

20.flexbox(弹性盒布局模型)是什么，适用什么场景?

21.如何实现两栏布局，右侧自适应?三栏布局中间自适应呢?

22.设备像素、css像素、设备独立像素、dpr、ppi之间有什么区别?

23.说说你对盒子模型的理解

24.怎么实现样式隔离?

25.flex布局下，怎么改变元素的顺序?

26."flex:auto;"是什么意思?

27.object-fit 用法

28.行内元素和块级元素有什么区别

29.em/px/rem/vh/vw 这些单位有什么区别?

30.html和css中的图片加载与渲染规则是什么样的?

31.CSS中，有哪些方式可以隐藏页面元素?有什么区别?

32.CSS3中 transition和animation 的属性分别有哪些?

33.说说对CSS预编语言的理解，以及它们之间的区别

5.HTML

1.什么是DOM和BOM?

2.简单描述从输入网址到页面显示的过程

3.一台设备的dpr，是否是可变的?

4.前端该如何选择图片的格式?

5.前端跨页面通信，你知道哪些方法?

6.说说你对Dom树的理解

7.行内元素有哪些?块级元素有哪些?空(void)元素有那些?

8.html和css中的图片加载与渲染规则是什么样的?

9.title与h1的区别、b与strong的区别、i与em的区别?

10.script标签为什么建议放在body标签的底部(defer、async)

11.说说你对SSG的理解

12.什么是HTML5，以及和HTML的区别是什么?

13.什么是渐进增强和优雅降级?

14.Node和Element是什么关系?

15.导致页面加载白屏时间长的原因有哪些，怎么进行优化?

16.如何控制input输入框的输入字数?

17.渐进式jpg有了解过吗?

18.假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的图片?

19.怎么实现”点击回到顶部"的功能?

20.SPA应用怎么进行SE0?

21.如何实现SEO优化

22.SE0是什么?

23.SEO的原理是什么?

24.DNS预解析是什么?怎么实现?

25.HTML5有哪些drag相关的API?

26.浏览器乱码的原因是什么?如何解决?

27.Canvas和SVG有什么区别?

28.浏览器是如何对HTML5的离线储存资源进行管理和加载?

29.HTML5的离线储存怎么使用，它的工作原理是什么

30.img的srcset属性的作用?

31.label标签有什么用?

32.js和css是如何影响DOM树构建的?

33.CSSOM树和DOM树是同时解析的吗?

6.Node.js

1.common.js和es6中模块引|入的区别?

2.为什么Node在使用es module时必须加上文件扩展名?

3.浏览器和Node中的事件循环有什么区别?

4.Node性能如何进行监控以及优化?

5.如果让你来设计一个分页功能，你会怎么设计?前后端如何交互?

6.如何实现文件上传?说说你的思路

7.如何实现jwt鉴权机制?说说你的思路

8.说说对中间件概念的理解，如何封装node中间件?

9.说说Node文件查找的优先级以及Require方法的文件查找策略?

10.说说对Nodejs中的事件循环机制理解?

11.说说Node中的EventEmitter?如何实现一个EventEmitter?

12.说说对Node中的Stream的理解?应用场景?

13.说说对Node中的Buffer的理解?应用场景?

14.说说对Node中的fs模块的理解?有哪些常用方法

15.说说对Node中的process的理解?有哪些常用方法?

16.Node.js有哪些全局对象?

17.说说你对Node.js的理解?优缺点?应用场景?

18.body-parser这个中间件是做什么用的?

19.Koa中，如果一个中间件没有调用awaitnext()，后续的中间件还会执行吗?

20.在没有async await的时候，koa是怎么实现的洋葱模型?

21.koa框架中，该怎么处理中间件的异常?

22.Node.js如何调试?

23.说说你对koa洋葱模型的理解

24.pm2守护进程的原理是什么?

25.koa和express有哪些不同?

26.两个Node.js进程如何通信?

27.npm是什么?

7.Typescript

1.说说对TypeScript中命名空间与模块的理解?区别?

2.说说你对typescript的理解?与javascript的区别?

3.Typescript中泛型是什么?

4.TypeScript中有哪些声明变量的方式?

5.什么是Typescript的方法重载?

6.请实现下面的 sleep方法

7.typescript中的is关键字有什么用?

8.TypeScript支持的访问修饰符有哪些?

9.请实现下面的myMap方法

10.请实现下面的treePath方法

11.请实现下面的 product方法

12.请实现下面的myAll方法

13.请实现下面的sum方法

14.请实现下面的mergeArray 方法

15.实现下面的firstSingleChar方法

16.实现下面的reverseWord方法

17.如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型?

18.请补充 objToArray 函数

19.使用TS实现一个判断传入参数是否是数组类型的方法

20.TypeScript 的内置数据类型有哪些?

21.ts中any和unknown有什么区别?

22.如何将unknown类型指定为一个更具体的类型?

23.使用ts实现一个判断入参是否是数组类型的方法?

24.tsconfig.json文件有什么用?

25.TypeScript中的 Declare关键字有什么用?

26.解释一下TypeScript中的枚举。

27.TypeScript的主要特点是什么?

28.TypeScript中的方法重写是什么?

29.什么是TypeScript映射文件?

30.TypeScript中的类型有哪些?

31.如何检查TypeScript中的null和undefined?

32.如何在TypeScript中实现继承?

33.什么是TypeScript Declare关键字?

34.TypeScript 和JavaScript 的区别是什么?

8.性能优化

1.script标签放在header里和放在body底部里有什么区别?

2.前端性能优化指标有哪些?怎么进行性能检测?

3.SPA(单页应用)首屏加载速度慢怎么解决?

4.如果使用CSS提高页面性能?

5.怎么进行站点内的图片性能优化?

6.虚拟DOM一定更快吗?

7.有些框架不用虚拟dom，但是他们的性能也不错是为什么?

8.如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?

9.讲一下png8、png16、png32的区别，并简单讲讲png的压缩原理

10.页面加载的过程中，JS文件是不是一定会阻塞DOM和CSSOM的构建?

11.React.memo(和useMemo(的用法是什么，有哪些区别?

12.导致页面加载白屏时间长的原因有哪些，怎么进行优化?

13.如果一个列表有100000个数据，这个该怎么进行展示?

14.DNS预解析是什么?怎么实现?

15.在React中可以做哪些性能优化?

16.浏览器为什么要请求并发数限制?

17.如何确定页面的可用性时间，什么是 Performance API?

18.谈谈对 window.requestAnimationFrame 的理解

19.css加载会造成阻塞吗?

20.什么是内存泄漏?什么原因会导致呢?

21.如何用webpack来优化前端性能

22.说说常规的前端性能优化手段

23.么是CSS Sprites?

24.CSS优化、提高性能的方法有哪些?

25.script标签中，async和defer两个属性有什么用途和区别?

9.编程题

1.使用Promise实现红绿灯交替重复亮

2.bind、call、apply有什么区别?如何实现一个bind?

3.利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabcccccaaa会变为...

4.说说new操作符具体干了什么?

5.如何实现上拉加载，下拉刷新?

6.大文件怎么实现断点续传?

7.什么是防抖和节流，以及如何编码实现?

8.说说ajax的原理，以及如何实现?

9.深拷贝浅拷贝有什么区别?怎么实现深拷贝?

10.用js实现二叉树的定义和基本操作

11.如何实现一个轮播图组件?

12.写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字。

13.将下面的数组转成树状结构

14.编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能

15.实现lodash的set和get方法

16.去除字符串中出现次数最少的字符，不改变原字符串的顺序。

17.实现一个批量请求函数，要求能够限制并发量

18.树转数组

19.数组转树

20.删除链表的一个节点

21.请实现一个函数，要求能在页面请求很多时，尽可能快地按照顺序输出返回的结果。

22.实现一个请求函数:fetchWithRetry，要求会最多自动重试3次，任意一次成功就直接返回

23.链表中，环的入口节点

24.多叉树指定层节点的个数

25.请手写“快速排序”

26.使用js实现有序数组原地去重

27.计算出下面数组中的平均时间

28.实现compose函数，类似于koa 的中间件洋葱模型

29.请按以下要求实现方法fn:遇到退格字符就删除前面的字符，遇到两个退格就删除两个字符

30.Promise 的finally怎么实现的?

31.实现一个函数，可以间隔输出

32.不定长二维数组的全排列

33.两个字符串对比，得出结论都做了什么操作，比如插入或者删除

34.实现一个方法，从某个数值数组中，获取最小正数(非零非负数)的索引值

10.工程化

1.使用Promise实现红绿灯交替重复亮

2.bind、call、apply有什么区别?如何实现一个bind?

3.利用字符重复出现的次数，编写一种方法，实现基本的字符串压缩功能。比如，字符串aabcccccaaa会变为..

4.说说new操作符具体干了什么?

5.如何实现上拉加载，下拉刷新?

6.大文件怎么实现断点续传?

7.什么是防抖和节流，以及如何编码实现?

8.说说ajax的原理，以及如何实现?

9.深拷贝浅拷贝有什么区别?怎么实现深拷贝?

10.用js实现二叉树的定义和基本操作

11.如何实现一个轮播图组件?

12.写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字。

13.将下面的数组转成树状结构

14.编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能

15.实现lodash的set和get方法

16.去除字符串中出现次数最少的字符，不改变原字符串的顺序。

17.实现一个批量请求函数，要求能够限制并发量

18.树转数组

19.数组转树

20.删除链表的一个节点

21.请实现一个函数，要求能在页面请求很多时，尽可能快地按照顺序输出返回的结果。

22.实现一个请求函数:fetchWithRetry，要求会最多自动重试3次，任意一次成功就直接返回

23.链表中，环的入口节点

24.多叉树指定层节点的个数

25.请手写"快速排序”

26.使用js实现有序数组原地去重

27.计算出下面数组中的平均时间

28.实现compose函数，类似于koa 的中间件洋葱模型

29.请按以下要求实现方法fn:遇到退格字符就删除前面的字符，遇到两个退格就删除两个字符

30.Promise 的 finally 怎么实现的?

31.实现一个函数，可以间隔输出

32.不定长二维数组的全排列

33.两个字符串对比，得出结论都做了什么操作，比如插入或者删除

34.实现一个方法，从某个数值数组中，获取最小正数(非零非负数)的索引值

11.场景题

怎么在前端页面中添加水印?

如何封装一个请求，让其多次调用的时候实际只发起一个请求的时候，返回同一份结果

web网页如何禁止别人移除水印

react中怎么实现下拉菜单场景，要求点击区域外能关闭下拉组件

如何搭建一套灰度系统?

React 如何实现 vue 中keep-alive 的功能?

如何监控前端页面的崩溃?

如何在前端团队快速落地代码规范

前端如何实现即时通讯?

用户访问页面白屏了，原因是啥，如何排查

如何给自己团队的大型前端项目设计单元测试?

如何做一个前端项目工程的自动化部署，有哪些规范和流程设计?

你参与过哪些前端基建方面的建设?

假如让你负责一个商城系统的开发，现在需要统计商品的点击量，你有什么样设计与...

前端怎么做错误监控?

1.如何判断用户设备

2.将多次提交压缩成一次提交

3.介绍下navigator.sendBeacon方法

4.混动跟随导航（电梯导航）该如何实现

5退出浏览器之前，发送积压的埋点数据请求，该如何做？

6如何统计页面的long task（长任务）【热度：140】

7.PerfoemanceObserver如何测量页面性能

移动端如何实现下拉滚动加载（顶部加载）

9.判断页签是否为活跃状态

10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？

11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素

12.页面关闭时执行方法，该如何做

13.如何统计用户pv访问的发起请求数量

14.长文本溢出，展开/收起如何实现

15.如何实现鼠标拖拽

16.统计全站每一个静态资源加载耗时，该如何做

17.防止前端页面重复请求

18.ResizeObserver作用是什么

19.要实时统计用户浏览器窗口大小，该如何做

20.当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做

21.如何移除一个指定的commit

22.如何还原用户操作流程

23.可有办法将请求的调用源码地址包括代码行数也上报上去？

24.请求失败会弹出一个toast,如何保证批量请求失败，只弹出一个toast【热度：420）

25.如何减少项目里面if-else【热度:310】

26.babel-runtime作用是啥【热度：200】

27.如何实现预览PDF文件

28.如何在划词选择的文本上添加右键菜单（划词：标滑动选择一组字符，对组字符进行操作）【热度：100】

29.富文本里面，是如何做到划词的（鼠标滑动选择一组字符，对组字符进行操作？【热度：100】

30.如何做好前端监控方案【热度：672】

31.如何标准化处理线上用户反馈的问题【热度：631】

32.px 如何转为rem【热度：545】

33.浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制【热度：579】

34.cookie可以实现不同域共享吗【热度：533】

35.axios是否可以取消请求【热度：532】

36.前端如何实现折叠面板效果？

37.dom里面，如何判定a元素是否是b元素的子元素【热度：400】

38.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？

39.is如何判空？「空」包含了：空数组、空对象、空字符串、0、undefined、null、空map、空set都属于为空的数据【热度:640】

40.css 实现翻牌效果【热度:116】

41.flex:1代表什么【热度：400】

42.一般是怎么做代码重构的

43.如何清理源码里面没有被应用的代码，主要是JS、TS.CSS代码【热度：329】

44.前端应用如何做国际化？【热度：199】

45.应用如何做应用灰度发布【热度:247】

46.「微前端]为何通常在微前端应用隔离，不选择iframe方案【热度：280】

47.[微前端]Qiankun是如何做JS隔离的【热度：228】

48.[微前端]微前端架构一般是如何做JavaScript隔离

49.[React]循环渲染中为什么推荐不用index 做key【热度:320】

50.[React]如何避免使用context的时候，引起整个挂载节点树的重新渲染【热度：420】

51.前端如何实现截图？

52.当QPS达到峰值时,该如何处理？

53js超过Number最大值的数怎么处理？

54.使用同一个链接，如何实现PC打开是web应用、手机打开是-个H5应用？【腾讯二面】

55.如何保证用户的使用体验【字节一面】

56.如何解决页面请求接口大规模并发问题【必会】

57.设计一套全站请求耗时统计工具

58.大文件上传了解多少【百度一面】

59.H5如何解决移动端适配问题【美团一面】

60.站点一键换肤的实现方式有哪些？【美团一面】

61.如何实现网页加载进度条？【百度一面】

62.常见图片懒加载方式有哪些？【京东一面】

63.cookie构成部分有哪些【百度一面】

64.扫码登录实现方式【腾讯一面]

65.DNS协议了解多少【字节一面】

66.函数式编程了解多少？【京东一面】

67.前端水印了解多少？【腾讯一面】

68.什么是领域模型【必会】

69.一直在window上面挂东西是否有什么风险【百度一面】

70.深度SEO优化的方式有哪些，从技术层面来说

71.小程序为什么会有两个线程【腾讯一面】

72.web应用中如何对静态资源加载失败的场景做降级处理

73.html中前缀为data-开头的元素厘性是什么？

74.移动端如何实现上拉加载，下拉刷新？【字节一面】

75.如何判断dom元素是否在可视区域【字节一面】

76.前端如何用canvas来做电影院选票功能【美团一面】

77.如何通过设置失效时问清除本地存储的数据？【腾讯二面】

78.如果不使用脚手架，如果用webpack构建一个自己的react应用

79.用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数

80.packagejson里面sideEffects厘性的作用是啥【必会】

81.script标签上有那些厘性，分别作用是啥？【必会】

82.为什么SPA应用都会提供一个hash路由，好处是什么？

83.[React]如何进行路由变化监听【字节一面】

84.单点登录是是什么，具体流程是什么【腾讯一面】

85.web网页如何禁止别人移除水印【百度一面】

86.用户访问页面白屏了，原因是啥，如何排查？

87.[代码实现]s中如何实现大对象深度对比

88.如何理解数据驱动视图，有哪些核心要素？【腾讯二面】

89.vue-cli都做了哪些事儿，有哪些功能？

90.JS执行100万个任务，如何保证浏览器不卡顿？【百度一面】

91.JS放在head里和放在body里有什么区别？

92.Eslint代码检查的过程是啥？【必会】

93.虎拟混动加载原理是什么，用JS代码简单实现一个虚拟滚动加载

94.[React]react-router和原生路由区别

95.html的行内元素和块级元素的区别【京东一面】

96.介绍-下 requestlIdleCallback api

97.documentFragment api是什么，有哪些使用场景？【必会】

98. git pull 和 git fetch 有啥区别?

99.前端如何做页面主题色切换【腾讯一面】

100.前端视角-如何保证系统稳定性【字节一面]

101.如何统计长任务时间、长任务执行次数【腾讯二面】

102.V8里面的JT是什么？【京东一面]

103.用Js写一个cookies解析函数，输出结果为一个对象

104.vue中Scoped Styles是如何实现样式隔离的，原理是啥

105.样式阿商方式有哪些【字节一面】

106.在JS中，如何解决递归导致栈溢出问题？

107.站点如何防止爬虫？【百度一面】

108.ts项目中，如何使用nodemodules里面定义的全局类型包到自己项目src下面使用？【百度二面】

109.不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）

110.【React】在react项目开发过程中，是否可以不用reactrouter使用浏览器原生history路由来组织页面路由？

111.在表单校验场景中，如何实现页面视口滚动到报错的位置

112,如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】

113.【webpack】打包时hash码是如何生成的【必会】

114.如何从0到1搭建前端基建【京东一面】

115.你在开发过程中，使用过哪些TS的特性或者能力？【美团一面】

116JS的加载会阻塞浏览器渲染吗？【百度一面】

117.浏览器对队头阻寒有什么优化？【百度一面）

118.Webpack项目中通过script 标签引入资源，在项目中如何处理？

119.应用上线后，怎么通知用户刷新当前页面？【腾讯一面】

120.Eslint代码检查的过程是啥？

121.HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？

122.如何检测网页空闲状态（一定时间内无操作）【百度二面】

123.为什么Vite速度比Webpack快?

124.列表分页，快速翻页下的竟态问题【百度二面】

125.JS执行100万个任务，如何保证浏览器不卡顿？

126.git 仓库迁移应该怎么操作

127.如何禁止别人调试自己的前端页面代码？【字节二面】

128.web系统里面，如何对图片进行优化？【必会】

129.0Auth2.0是什么登录方式

130.单点登录是如何实现的？

131.常见的登录鉴权方式有哪些？

132.需要在跨域请求中携带另外一个域名下的Cookie该如何操作？

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

134.封装一个请求超时，发起重试的代码

135.前端如何设置请求超时时间timeout【必会】

136.nodejs如何充分利用多核CPU?【字节二面】

137.后端一次性返回树形结构数据，数据量非常大前端该如何处理？

138.你认为组件封装的一些基本准则是什么？

139.页面加载速度提升(性能优化)应该从哪些反向来思考？

140.前端日志埋点SDK设计思路

141.token进行身份验证了解多少？【腾讯一面】

142.在前端应用如何进行权限设计？【字节二面】

143.【低代码】代码平台一般消染是如何设计的？

144.【低代码】代码平台一般底层协议是怎么设计的

145.【Webpack】有哪些优化项目的手段?

146.IndexedDB存储空间大小是如何约束的?

147.浏览器的存储有哪些【腾讯一面】

148.【Webpack】如何打包运行时chunk，且在项自工程中如何去加载这个运行时chunk？

149.为何现在市面上做表格泊染可视化技术的，大多数都是canvas，而很少用svg的？

150.在你的项目中，使用过哪些webpack plugin,说一下他们的作用

151.在你的项目中，使用过哪些webpackloader,说一下他们的作用

152.【React】如何避免不必要的染？【美团一面】

153.全局样式命名冲突和样式盖问题怎么解决？

154.【React】如何实现专场动画？

155.【React】从React层面上，能做的性能优化有哪些？

156.【VUE】中为何不要把v-f和v-for同时用在同一个元素上，原理是什么？

157.将静态资源缓存在本地的方式有哪些？

158.SPA首屏加载速度慢的怎么解:决

159.axios是如何区分是nodejs环境还是浏览器环境的?

160.如何拦截web应用的请求

161.前端有哪些跨页面通信方式？

162.H5下拉刷新如何实现？

163.如何修改第三方npm包？

项目细节难点

1. 测试和调试

2.跨域请求问题

3.数据安全和隐私保护

4. 移动端触摸事件处理

5.性能优化

6.响应式布局的挑战

7.浏览器兼容性问题

8.获取首页链接里面的参数问题

9.更新文件缓存的坑

10.解析后端返回的map格式数据的坑。

11.vue组件动态加载的坑

12. 页面缓存的坑。

13.路由传参的功能的坑。

14. axios请求中post请求的坑。

15.为什么需要二次封装组件库？

16.请结合一个组件库设计的过程，谈谈前端工程化的思想

17.如何对一个组件库进行测试？

18.在使用qiankun时，你如何处理多个子项目的调试问题？

19.你能解释一下 qiankun 如何实现keep-alive 的需求吗?

20.在使用qiankun时，你如何处理js沙箱不能解决的js污染问题？

21.在项目中有没有单独封装组件

22.在项目中发送请求怎么携带token

23.工作中有用到git吗

24. git版本发生冲突你怎么解决的

25.如何快速让一个盒子水平垂直居中

26.首屏加载白屏怎么进行优化

27.路由传参 query与 params区别

28.项目基础优化

29.对$nextTick异步渲染的理解

30.你是怎么对axios进行二次封装的，有什么作用

31.用戶token失效你是怎么处理的

32.说一下项目的流程

33.商品和增删改查

34.Element-UI的form表单验证你是怎么使用的

35.项目中的商品详情页你是怎么实现的

36.什么是数组扁平化

37.你这个项目登陆是怎么实现的

38.项目中的权限管理怎么实现的

39.Vue的$nextTick0方法有用到过吗

40.深拷贝与浅拷贝

41.在Vue是项目中如何打开新的页面

42.请解释一下微前端的概念以及它的主要优点和挑战？

43.你能详细描述一下qiankun微前端框架的工作原理吗？

4.在使用qiankun时，如果子应用是基于jQuery的多页应用，你会如何处理静态资源的加载问题？

45.在使用qiankun时，如果子应用动态插入了一些标签，你会如何处理？

46.在使用qiankun时，你如何处理老项目的资源加载问题？你能给出一些具体的解决方案吗？

47.你能解释一下qiankun的start函数的作用和参数吗？如果只有一个子项目，你会如何启用预加载？

48. axios-请求中post请求的坑

49.路由传参的功能的坑

50.页面缓存的坑

51.vue组件动态加载的坑

52.解析后端返回的map格式数据的坑

53. 更新文件缓存的坑

54.h5页面打开调试日志

55. 获取首页链接里面的参数问题

56. h5里面的搜索

57.登录接口bug

58.封装的请求方法不需要在传入相同的参数。

59.进来不在index.htmI文件里面引入公共的文件

60.你做的项目中都使用过那些中间件呢？

61.你在开发过程中有什么困难点（或者使用了什么技术）

62.会写接口吗？项目你负责什么？

63.你之前做过小程序吗？主要包括哪些功能？

64.这个小程序的具体设计逻辑是怎么样的？有几个人开发？周期多长？在你离职时，这个小程序项目是否还在开发？或者你离职时，你们公司在开发什么？

65.你说你负责支付环节，那么微信支付的流程是否可以简单说一下？

66.那好，既然流程说完了，那么，我问你，你这个项目涉及到了mb，它在用戶点击支付之后的逻辑关系和表关系你是怎么理解的？有多少张表？表关系？

67.你觉得这个小程序项目的细节之处有哪些？

68.如何自定义tabbar?

69.你刚才提到了异步，在这个项目中你是否被异步坑过，最后又是如何解决的？

70.你能描述一下渐进增强和优雅降级之间的不同吗？

71.为什么利用多个域名来存储网站资源会更有效?

72.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用戶更好的体验。

73.一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

74. 前端如何进行登录身份的判断

75.电商项目跟其它项目有什么不同？

76.实践题

77.项目开发中有遇到什么挑战没？

78.项目研发流程中作为前端开发一般扮演的啥角色？

79.现在有的项目中觉得哪些项目可以继续优化，为啥没有优化?

80.平时写项目总结么，一般总结哪些东西？

81.请简单绘制登录场景的业务流程图，如不熟悉登录业务，也可以选择自己之前项目的业务简单说明。

82.项目上线后，会将index.html给后端，在地址栏上输入www.abc.com，当在地址后面缀上/layout回车后，页面会报404，是否遇见过这个问题，又该如何去解决？

83.项目中由谁定接口，公司文档如何管理，由谁负责上传代码，怎么上传代码的，项目发布都是怎么做的？

84.请你说说高级前端工程师和初级以及中级有什么区别？

85.用过echars与highchars么，你遇到哪些问题及如何解决的

86.项目开发中是用什么工具来管理代码的：说一下你是用过的工具用法（git、svn）

87.讲一下最近的这个项目中都负责什么

88.怎么判断是开发环境生产环境

89.Vue如何在用戶没登陆的时候重定向登录界面？

90.Vue项目常见优化点

91.异步解决方案有哪些？

92.移动端点击事件300ms延迟如何去掉？原因是什么？

93.如何实现函数的柯里化？比如add(1)(2)(3）

94.什么是反柯里化

95.如何避免回调地狱？

96.开发过程中遇到内存泄漏的问题都有哪些？

97.浏览器有哪些兼容问题，你封装过什么插件

98.假如A页面我定义了一个定时器，然后跳到B页面如果让A页面的定时器暂停

99.深拷贝是什么？项目哪里是用到了深拷贝？

100.swiper插件从后台获取数据没问题，css代码啥的也没问题，但是图片不动，应该怎么解决？

101.常见内存泄漏

102.插入几万个dom，如何实现页面不卡顿？