前言：
由于我目前所在的公司项目越来越少了，经常裁员，为了能够在被裁后及时找到工作，最近半个月在工作之余抽时间整理了这些面试题，准备在接下来的时间里开始怒刷这些题目，因为我知道现在的市场不景气，为了生活嘛，拼一波！我准备的算是比较全面了，有需要的面友们，可以一起肝！
感兴趣的话可以>>>关注一下<<<
<面试题是平时随意看的时候收集整理的，有的是从刷到的视频中记下的，有的是自己面试遇到而记下的]>
算法相关
- 本文不涉及算法面试，如有需求，LeetCode上疯狂刷题即可；
- 友情提示：如果是想去 Microsoft 这样的公司面试，请尽量用理解的方式去刷算法题，仅刷题背题是很难有用的，因为他们4轮或5轮面试从笔试、远程协同代码考试、面对面交流考察的都是算法，就算刷题背题通过了前面的考验，最后的面对面交流考察算法的那一轮也是很可能会刷掉的；
正则相关
- 有关正则的学习本人推荐使用这个在线工具，可以用于学习正则，也可用于辅助实际工作： regex101 在线正则工具
Html 相关
- meta标签的作用是什么？meta标签常常用来做什么？
- script标签应该放在html的哪个位置？为什么？
- 什么是盒模型？
- 什么是BFC?BFC有什么特点？
-- 提示： BFC 即 Block Formatting Contexts (块级格式化上下文) - html中事件原理？
-- 回答重点：说明事件的冒泡过程和捕获过程，且如何控制只执行其中的一种过程 - 对 shadow dom 有了解过吗？在什么场景下会去用它？举例说明下 -- 资料： shadow-root
- 举例说下Html5新增了哪些？
- 了解MutationObserver吗？说明一下
- 如何实现资源的预加载？(有些情况下我们希望一些资源优先被浏览器下载下来，为了让用户能最先看见)
- 如何为一个网页添加水印？
-- 回答重点：先说明有前端实现和后端实现两种，我们具体回答前端实现，前端实现重点是隐藏水印元素避免被去除，所以方案是通过js创建canvas动态创建水印且canvas必须基于内容的根div上，这样的话要想去除水印就只能删除div，但是div中又包含内容，去除了div就会把内容也去除，这就实现了内容和水印绑定的目的 - 如何给当前页面或某个指定区域的html实现截图功能？
-- 回答重点：通过 canvas 实现，canavs API中有把html转图片的功能(html2canvas)，但是存在一定的兼容性问题(特别是ios浏览器)，如果想绝对完美，恐怕需要交给后端实现了，比如把一段html内容传递给后端 python 去处理成图片
Css 相关
- css flex 最佳在线练习推荐： flex froggy
- 说出实现水平且垂直居中的几种方式？
- 说明移动端的适配方案？
-- 回答重点：heade中设置\<meta\>， rem单位(由html的font-size决定)和vh、vw单位，@media screen，弹窗盒子的宽高设定(盒子的宽高应由其子元素决定，适应效果更好) - 举例说下Css3新增了哪些？
- css 的几种写法的权重比较？为什么避免使用style？
-- 回答重点：外链、内联、内嵌的不同，内嵌的style写法会阻塞渲染，所以不能过多
Javascript 基础相关
- 什么是作用域？
- 什么是变量提升？
- 简要说明对闭包的理解？
- 什么是副作用？什么是纯函数？
- 双等号(==)和三等号(===)之间的区别是什么？
-- 回答提及：双等号一定要说清楚源码的比较规则；三等号就是类型和值都相等；且要说明尽量避免使用双等号的原因 - 对EventLoop的了解？
-- 回答提及：微任务和宏任务 - Array.isArray原理(如何判断一个对象是不是数组)？
-- 回答重点：Object.prototype.toString.call()的原理>>>参考资料<<< - ES6 及以上的新增了哪些特性？ -- >>>ES6的新特性<<< ||--|| >>>ES7~ES12的新特性<<< ||--|| >>>ES13中的11 个新特性<<<
- set map weakset weakmap的区别？
- 知道 viod 0 的用处吗？我们为什么要用 viod 0 去代替 undefined？
-- 回答重点：undefined 可以被声明，var undefined = 'xxx' 在一个内部作用域中会影响到关键词 undefined，所以用 viod 0 可以避免这个问题，因为 void 0 的结果是 undefined - 函数的二义性指的是什么？如何控制一个函数不能被 new 调用？
-- 回答重点：函数的二义性指的是一个function可以直接调用也可以被 new 来当作构造函数调用，这是js的历史遗留问题，es6的class就是用来解决这个问题的，不过我们也可以通过 new.target 来判断是否用了 new 来调用函数，比如 function getName() { if(new.target) { throw Error('can not invoke with new'); } } - 如何同时发 起多个异步任务？该问题也会延伸出 Promise 有几种并发方式？
-- 回答重点：Promise.all Promise.allSettled Promise.any Promise.race 各自的功能 - 了解 Symbol 吗，Symbol有些什么特性，有在实际项目中使用过吗？
- js的可迭代协议是什么？
-- 回答重点：{ [Symbol.iterator]:function { return 迭代器 } }，只要一个对象带有这里的 [Symbol.iterator]:function {return 迭代器} 那就是一个可迭代的对象，这就是可迭代协议 - 为什么Array是可迭代的，而Object是不可迭代的？能把Object变成可迭代的吗？
-- 回答重点：结合可迭代协议回答 - 如何让这一段代码成立“const [a,b] = {a:1, b:2, c:3}”(即让这段代码不报错)
-- 回答提示：把Object变成可迭代对象，可迭代函数中实现对当前对象的迭代；即 Object.prototype[Symbol.iterator]=function(){ Object.values(this)[Symbol.iterator](); } - 怎么实现大文件上传？
-- 回答重点： 整体方案是使用 input 标签把 File对象存入FormData；具体操作是，可以对 Blob 实现切片上传(File 即 Blob 的子类)，通过file.slice()分割成多个chunk，将分割完成后的chunk存入FormData对象传输给后端 - 如何实现埋点收集用户在页面的停留时长？
-- 回答重点：visibilitychange事件、visibleStateState状态值、pagehide事件 3者结合使用，并为了确保兼容性，需使用document.addEventListener注册监听器，页签显示时记录下时间戳，页签隐藏时记录下时间戳，两者相减得到此次浏览页面的停留时长 - 有没有听说过零宽字符？它有什么作用？>>>参考链接<<<
- 说是对Web Components的理解？实际项目中用到过吗？简要说明下
- 如何实现资源的懒加载？
- 如何监听整个浏览器中的所有资源的加载进度？
- 用js写一个函数，要求能够匹配出这样 url 里的所有search的内容：“juejin.cn/creator/con…
function getSearchParams(url) {
const search = url.split('?')[1];
if (!search) return {};
const params = search.split('&');
const result = {};
params.forEach(param => {
const [key, value] = param.split('=');
result[key] = value;
});
return result;
}
const url = 'https://juejin.cn/creator/content/article/essays?status=all&e';
const params = getSearchParams(url);
console.log(params);
// {status: 'all', e: ''}
TypeScript 基础相关
设计模式相关
- 设计模式的七大原则是什么？
- 实际项目中有用到哪些设计模式吗？举例说明下？
- 对依赖注入有了解吗？什么是依赖注入？实际项目中有用到吗？
- “发布订阅模式”和“观察者模式”有什么区别？
-- 回答重点：这设计模式因为在 vue 源码中有用到，所以说出区别的同时，要提到vue相关的知识点 - “发布订阅模式”中的“发布者”和“订阅者”能否直接通信？
-- 回答重点：不可以。提及 vue MVVM 模式 - “观察者模式”中“观察者”和“被观察者”能否直接通信？
-- 回答重点：可以。说明下观察者模式的实现方式 - “发布订阅模式”中的“发布者”和“订阅者”之间的区别是什么？简要说明下
-- 回答重点：提及上面的[5]、[6]两点内容
webpack 相关
- webpack 的 loader 和 plugin 有什么区别？怎么去实现一个plugin，plugin的内核是什么？
-- 回答重点：plugin 是一个 compiler对象（这方面最好亲身去写一个plugin感受一下） - 全局函数、命名空间、IIFE、CommonJS、AMD到ES6模块化的了解？ -- >>> 推荐讲解视频 <<<
- webpack 中 import 的原理是什么？
- webpack 是怎么实现动态引入的？
- require 和 import 的区别？现在的 import 怎么动态引入组件或文件？
- webpack 在异步请求一个 js 文件的时候，是怎么拿到 js bundle 的？
- webpack 的动态引入一般在哪些场景下会用到？
React 相关
- >>>react 2023面试题 参考连接<<<
- 什么是HOC？
- class组件和function组件的区别？
- class组件的生命周期和function组件的生命周期有什么区别？（function的生命周期为什么会产生这种变化，有什么好处？）
重点回复：曾经的class组件的部分生命周期在实际开发中不常用且过于繁重冗余，而优化为function组件后，hooks的功能更加简洁便于记忆和使用，关键是hooks更利于逻辑抽离 - hooks有哪些优势？
重点回复：组件逻辑抽离实现高度解耦，便于维护也更便于编写组件单测，提高组件健壮性 - react组件的key的作用是什么？
- class组件和function组件的生命周期分别是什么？
- 你知道哪些react的hooks？并简要说明下各自作用或适用场景
- react的hooks能在函数组件的内部函数中调用吗（为什么react的hooks只能用在函数组件或自定义hook的顶部调用？）
回答重点：从源码层面解释，重点要涉及react的hooks源码中是通过链表的方式实现的，链的特点是每个节点比必须是依次连续的，除了这个重点还要说出自己的一些理解，比如正式因为这个链表的特点，可以让react的hooks使用更加规范，不会像vue3的composition API可以随处使用并不会报错，导致实际项目中可能出现带有声明周期的hook却在函数中直接调用 - react中如何书写css？react的css如何实现组件隔离避免全局污染(css模块化)？
--回答重点：xxx.moudle.css实现css模块化，styled-components也可以做到，现在流行的tailwind - React的事件和普通的HTML事件有什么不同？
- setState 是同步异步？为什么？实现原理？
- 为什么 useState 要使用数组而不是对象？(像脑筋急转弯的一个问题，不过还是要记录一下怕反应不过来)
--回答提示：数组解构可以随意命名；对象解构的话必须按照属性名，若这样的useState就会出现这种效果{state:UserName, setState:setUserName}=useState()这种写法何必呢，所以useState返回的是数组，方便解构时根据需要进行命名 - react中常使用什么方式进行状态管理？或者说跨组件之间如何进行数据共享？
--回答重点：Redux Toolkit (redux redux-thunk) - redux的创建和使用是怎样的，其中redux-thunk用来做什么？
- react的单元测试框架一般用什么？
回答重点：jest 或 react test libraries - 单元测试的重点是什么？
回答重点：单元测试的几个覆盖率以及分别代表什么意思，实际开发过程中，覆盖率一般是多少(80%)，如何能够确保项目能够达成目标覆盖率，过程中如何优化组件（重点是逻辑抽离，先写function单测，再写hooks单测，实在覆盖率还达不到要求，再考虑把一些相对容易的组件中的逻辑进行抽离出单独的hook来编写单测，再达不到要求，就对组件进行编写单测，编写单测时是需要对接口等不可控因素进行mock，因为对于前端单测来说接口时不可控也是不用关心的）
Vue 相关
（如今 vue2 已停止维护，重点放到 vue3 上，但是部分原理还是与vue2相关所以整理的问题也提及了vue2）
- vue 的双向绑定原理（vue2/3的双向绑定有没有什么区别）
-- 回答重点：劫持和发布订阅 - computed 从出发到响应到视图曾到过程是怎样的？computed 和 watch 的区别（以及 vue3 watchEffect 的区别，vue3 的 computed watch 有哪方面的升级优化）
-- 回答重点：从源码的角度来分析说明 - vue 的组件对象中的 data 属性为什么是个函数，而不是对象？
-- 回答重点：vue2 的 data 重点是关于引用传递的知识点 - vue2/3 父子组件（兄弟组件）之间常用的通讯方式？（包括常用到一些简化祖父子之间甚至跨组件的通讯方式的工具库也可以提及一下，比如 vuex，pinia，mitt.js）
- vue2/3 的响应式原理
-- 回答提及：vue3把vue2中使用的Object.defineProperty升级为Proxy，这便可以实现对数组变化的监听了 - vue2/3 的diff算法（vue3的diff算法的升级优化），以及与react的diff算法区别是什么？
- 给标签设置css属性会触发重绘还是重排（理解“重绘”和“重排”的区别）？举例说下有哪些css属性会触发重绘、重排，又有哪些属性会同时触发重绘和重排的
- document中的哪些读取时也会触发重绘或重排？举例说明下
- v-if和v-show的底层用的原理是什么？除了这种方式还有什么别的方式可以隐藏元素？opacity:0和visibility:hidden以及display:none之间的区别是什么？
- vue 的关键生命周期有哪些应用场景？
-- 大概回答：beforeCreate、beforeMount初始化无关UI的数据，created、onMounted初始化响应式相关数据，onBeforeDestroy、onDestroy清理数据或移除事件之类的 - vue2/3 的常用组件s属性有哪些？
-- 回答提及：data、methods、computed、watch、setup(vue3) - vue2/3 组件的 name 属性在哪些场景下是必写的？
-- 回答重点：vue中通过 Vue.componet 去创建组件时，name会作为第一个参数时是必传的 - vue2/3 的 v-model 双向绑定在底层是如何实现的？
-- 回答重点：从源码的角度去分析说明 - vue2 在组件上怎么让一个属性去支持.sync这个修饰符，怎么让.sync去同步更新？
- vue3 的自定义组件如何实现双向绑定（如何自定义实现一个v-model功能的属性）
- nextTick 的作用，底层的实现方式是什么？
-- 从源码的角度去分析说明 - 怎么简易实现一个 nextTick？
- 为什么有些情况下nextTick 会似乎无效？你有没有遇到过 nextTick 似乎没起作用的场景？举例说明下，且说出不起作用的原理原因和解决方案
- 对 vue3 的 Composable(组合式API) 的理解，用这种方式有什么优势？
参考链接：juejin.cn/post/715842… - 列表渲染的时候，key 属性有什么作用？（vue 和 react 他们的 key 作用上有什么区别）
- vue 函数组件是怎么定义的，函数组件和普通组件有什么区别？
- 有没有使用过 jsx 开发 vue，为什么选择使用 jsx 开发（适合什么场景？）
- vue2/3 的 jsx 实现原理是什么（vue是怎么实现对 jsx 的支持的）？
- vue 的 render 中的 createElement 有哪些参数？
- 封装第三方组件给别人使用的时候，如何透传属性和方法？
- 对vue3 setup 的底层了解？从源码角度分析说明 setup 的实现原理
浏览器相关
- Chrome 更新过一个新属性 samesite 了解吗？这对我们开发有什么影响？（这一题就要求我们多去关注Chrome的相关属性，特别是对实际开发有所关联的那些关键属性）
-- 回答重点：说出samesite对 iframe 的具体影响，要求对 iframe 能有足够的了解 - 限制首屏的静态资源的个数是为什么？
-- 回答重点：可能是有关http 1.0 和 2.0 的相关知识点 - http 2.0 用什么模式来解决“限制首屏的静态资源的个数”的这个问题？
-- 回答重点：可能是 http2 的长连接的相关知识点 - 浏览器有几种存储方式？
-- 回答重点：sessionStorage、localStorage、cookie、IndexedDB这些存储方式的各自特点，如有效期、最大存储量等 - session、cookie、sessionStorage之间的区别或关系是什么？
- vuex、redux、pinia这些状态存储跟浏览器的存储方式有什么区别或关系？
- 说明下浏览器的渲染过程？
- fetch 和 ajax、axios、request 请求的区别？
-- 回答重点：XmlHttpRequest 是浏览器提供的与后端交互的普通对象，ajax 是基于 XmlHttpRequest 封装实现的，fetch 同样是由浏览器提供的，但是fetch返回的是一个Promise对象，且 fetch 请求相比之下更加简单，功能相对单一，fetch 请求不可中断，只能前端忽略(即 fetch请求一旦发起后端必然会接收到，只能通过AbortController做到前端忽略后端给到的反馈而已)；而 axios 是也是基于 XmlHttpRequest 的二次封装，只是结合了ES6的Promise，可以让代码更好用，request的话就是nodejs的了，属于后端的基于http请求进行封装的 - 浏览器的最大请求并发数？如何优化过多的并发请求？
--回答提示：使用http1协议的情况下，chrome浏览器对于同一个域名的请求资源最大为6个，当使用http2.0的情况下，同一个TCP连接上可以发送无限多个请求，自然也就无关无关浏览器的这种限制了 - 如何监听浏览器的页面关闭事件？在Safari浏览器中又如何监听浏览器给关闭事件？
- 你知道浏览器的跨页签数据共享方案吗？举例说明一到两个(假设一个列表页点击新增/编辑新打开一个页签，当另一个页签提交数据之后，列表页需要及时更新数据，这如何做到？)
--回答提示：监听浏览器当前显示的页签事件，通过localstorage实现数据共享，从而通过代码实现所需功能 - 浏览器路由的类型有哪些？分别有什么特点？（hash路由和history路由点区别？）
- 如何实现网页的锚点功能？
--回答提示：利用hash路由，window.loacation.hash读取路由hash值，通过类似这种方式能实现根据路由hash值滚动到对应的元素位置document.querySelector(${window.location.hash}).scrollIntoView({ behavior: "smooth", block: "start" })；并且通过 window.location.hash='#artle20' 这种方式能够触发 hashchange 事件，但是hash路由的更改是不会触发页面刷新的，需要通过js进行处理更新我们需要更新的DOM；【提示：在管理系统这种不需要SEO的网页中，当理解了hash路由和锚点功能之后，我们大可不必拘泥于hash路由去实现锚点功能，无非就是根据路由参数或者点击某个元素来控制页面滚动条的滚动位置，那这种功能完全可以自由发挥，即使是使用history也能实现锚点功能】
浏览器性能优化相关
- chrome性能测试里的关键参数有哪些？
- 一个网站打开页面卡顿的常见问题有哪些？举例说明几个，并说明下常用的解决方案
- 类似一个官网页面向下滚动时画面卡顿的情况遇到过吗？这种卡顿情况一般可能是什么问题导致的？又该怎么优化呢？
- 浏览器的内存泄露有遇到过吗？遇到过哪些情况造成了内存泄露，又是怎么解决的呢？
前端架构相关
- 前端的单元测试有写过吗？有哪些单元测试框架（vue2/3、react的相关单测框架）
- 前端安全问题有哪些？
- 首屏 SSR 有了解吗？
- SSR、SSG之间的区别？
- 用过那些 SSR 框架？（vue3的Nuxt3，react的NextJs）
- Nuxt3 和 NextJs 在 SSR 实现架构上有什么区别？简要举例说明一下
- 怎么测试 react 和 vue3 的渲染UI的默认时长？如果我们写的同一个组件在react中渲染得比vue3慢，该如何排查并优化？
- 什么是Restful API，其规定了哪些请求类型？
- 没有没做过埋点？了解或用过哪些埋点框架？有实际经验的话，举例说明一个埋点方案
- 前端的打包工具有哪些？
web前端打包工具有：1、Webpack，是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序；2、Grunt，一个前端打包构建工具；3、Gulp，用代码方式来写打包脚本；4、Rollup，ES6模块化打包工具；5、Parcel，一款速度极快、零配置的web应用程序打包器；6、equireJS，是一个JS文件和模块加载器。
Nuxt3 -- (选修)
- Nuxt3的SSR实现原理
- Nuxt3中如何让异步数据在服务端渲染？
- useRequestHeaders 是无法在客户端使用的，那如何才能通过它实现ssr获取到headers信息？
-- const {data} = useAsyncData(()=>Promise(useRequestHeaders())) 这样用 useAsyncData包装一下就能确保从服务端到了客户端都能获取到headers信息了 - useAsyncData()的第一个参数 key 有什么作用？什么情况下我们一定要传递这个key？
--回答提示：useAsyncData内部会生成一个key，当服务端的key与客户端的key匹配时，客户端就不会发送请求，而是使用这个key的数据，官方称这个过程为水合过程。而当你封装函数在一个ts中，key就会相同（生成一个与实例的文件名和行号唯一的密钥），所以你需要自己指定这个key才不会导致客户端重新请求
NextJs -- (选修)
- Next.js的SSR实现原理
- Next.js中如何让异步数据在服务端渲染？
业务相关
- 用户登录凭证失败之后会发生什么？
-- 回答重点：提示给用户失败原因，并重定向到登录页（这里不同的登录方案有不同的处理方式，单点登录、无感登录、OAuth2.0需要去了解一下） - 单点登录、无感登录、OAuth2.0有了解吗？简要说明一下
- 前端如何拿到用户的 openId，对 OAuth 协议的了解说明一下
实际项目相关
- 你在最近经历的项目中有遇到过什么难题吗？是怎么解决的？举例说明下
- 有没有独立带领过团队开发？一个实际项目是如何落地的？简要说明下
- 团队开发过程中我们需要设定些什么规范来确保协同开发？
-- 回答提及这些：提交规范(git flow)，分支策略，review，CICD代码质量检查、隐私安全扫描等 - 前后端如何协调开发，提高联调成功率？
-- 回答提及这些：确定方案和设计文档，且重点放在前后端的关键接口数据实体上，尽量确保实际开发过程中少改动，如此前后端便后面向接口文档开发，尽量避免因后端接口变化而导致前端需重复改动的问题发生；比如可以借助 Apifox 优先提供 mock 接口实例及其说明，便于前后端根据接口需求协同开发，避免前端对后端接口有强依赖；还需通过敏捷开发模式，在开发过程中及时收集开发情况，定期晨会以便如有问题尽早暴露尽早解决 - 对敏捷开发模式(Scrum)的了解？Sprint > Story > ticket(task)
- 如何学习前端的？在实际项目中遇到新技术或难点是如何攻克的？
-- 与同事交流学习、看相关源码、文档、视频，以及Google查阅等，当然很多新技术的难点功能关键还是从源码中找到解决方案；自己学习的话是，定期给自己定个项目需求，并着手去实现，如对新框架新技术有兴趣的，则会以探索新技术为重点去开发一个简单的项目来学习；
