2022金三银四前端面试题预告
马上就到了面试季了，今天整理了一下前端常见的一些面试题。虽说面试的时候造火箭，需要你背好八股文，不过很多基础还是应该掌握的，就算不面试，也应该多看一些基础，内功深厚了，将来说不定还开始写框架了，嘿嘿嘿
| 项目介绍 |
|---|
| 你觉得前端包括什么 |
| 自我介绍 |
| 为啥离职 |
| 聊项目（项目的背景、你的角色、团队情况、技术难点、怎么解决、项目收益、个人收获） |
| 聊项目（聊的很深） |
| 职业思考 |
| 你是怎么学习前端的 |
| 你想要实现一个功能时，你不知道vue怎么实现，你是怎么查找资料的 |
| 面试官简单介绍自己，然后自我介绍 |
| 学前端怎么学，自己的亮点，优势等等 |
| 介绍一下简历上的项目 |
| 自己软实力方面的缺点优点 |
| 前端学习了几年了，如何学习的前端 |
| 反问面试官您平时怎么学习前端的（面试官又反问我先问问我怎么学习的） |
| 简单说说项目，没有细问，估计项目不是一面的重点。 |
| 如何区分前端和后端的工作，也就是哪些事要给前端做，哪些事要给后端做。有点懵，随便说了些。 |
| 说说自认为项目中表现得比较好的地方。 |
| 说一说前端体系 |
| 我项目的设计结构 |
| 你觉得微信小程序和普通的web开发有什么区别呢 |
| 你是怎么学习前端的呢 |
| 对后续的发展规划有什么想法 |
| 项目的背景是什么 |
| 当前项目的目的是什么 |
| 在开发过程中，你的角色是什么 |
| 在开发过程中有遇到过什么样的难题 |
| 遇到这些问题，你都是如何进行解决的 |
| 项目完成之后，取得了哪些成果 |
| 你是如何提高效率的 |
| 项目中难点，为什么学前端 |
| 举一个值得说的点，通过自己的思考解决了什么交互难度 |
| 如何实现工程化建设 / 如何实现自动化建设? |
| 怎么重构的，是不是不了解就重构的? |
| 讲一下你做过的项目，在项目中负责什么 |
| 在项目中遇到了哪些困难，是如何解决的 |
| 举一个值得说的点，通过自己的思考解决了什么交互难度 |
| 反问阶段，问了部门的一些业务和技术栈。（因为我前面投递的原因，我不知道这次面试的是哪个部门，又不好意思直接问是哪个部门） |
| http1.0、http1.1、http2.0 的区别 |
| 介绍一下 http 缓存。 |
| Etag 和 Last-modified 比较。 |
| encodeURI 和 encodeURIComponent 的区别 |
| http 协议报文结构 |
| http 状态码 |
| 协商缓存为什么做了 http1.1 header 字段的优化 |
| http状态码 400是啥 |
| http缓存 |
| http和https区别 |
| cookie和localstorage， cookie一般用来做什么。 里面的domain属性是干嘛的 |
| www.baidu.com发送一个请求 tieba.baidu.com。 会携带以下哪个cookie |
| http2.0更新哪些。 新的二进制什么意思。 多路复用怎么做的。 header压缩怎么做的 |
| 大小端存储 |
| 讲一下TCP为什么可靠 |
| 讲一下DNS解析 |
| 讲一下HTTP状态码都是干什么的 |
| 讲一下304（讲了协商缓存和强缓存） |
| HTTP2 头部压缩是如何实现的，多路复用的原理？ |
| tcp拥塞控制 |
| http缓存。 |
| http1.0、http1.1、http2、https都有哪些了解。这部分比较熟悉，讲到一半面试官就掐了下一道。 |
| Cache-control字段有哪些？作用是什么？ |
| 代理跨域？ |
| 状态码和缓存 |
| https加密，什么是非对称加密？ |
| 浏览器的存储方式有哪些 |
| cookie的有效作用域 |
| 跨域的cookie要怎么做 怎么实现SSO单点登录？ |
| http2.0 |
| get请求和post请求的区别 |
| 两者本质是一样的 get请求可以用post请求替代 那有什么存在的必要呢 |
| 网络，浏览器篇 |
| dns解析 |
| TCP协议、IP协议、HTTP协议分别在哪一层吗？ |
| tcp/ip协议有几层 |
| 网络七层协议内容 |
| 浏览器进程和线程 |
| 谷歌浏览器为什么使用多进程 |
| 进程通信的方式 |
| https加密过程 |
| url到页面过程 |
| http2和http1的区别 |
| 如何实现有状态的http协议 |
| 强缓存和协商缓存（浏览器缓存机制） |
| 强缓存 |
| 协商缓存 |
| 浏览器缓存过程 |
| 跨域请求 |
| 跨域方式 |
| TCP三次握手为什么不能两次 |
| Tcp为什么是4次挥手 |
| get和post |
| http请求头中Referer的含义和作用 |
| HTTPS和HTTP的主要区别 |
| cookie、sessionStorage和localStorage的区别 |
| TCP和UDP的区别 |
| Cookie和Session有什么区别？ |
| 浏览器如何做到 session 的功能的？ |
| 说一下浏览器缓存； |
| 跨域的处理方案有哪些？ |
| CORS 是如何做的？ |
| 有哪些提升浏览器性能的方式 |
| 从输入url到页面渲染完毕都经历了什么 |
| 重绘和重排怎么理解，如何减少 |
| http有哪些请求方式，有什么区别 |
| http请求和收到的字段有哪些，有什么作用 |
| localStorage有大小限制，如果数据量过大，你有什么办法 |
| TCP和UDP各自的特点和区别（三次握手四次挥手等） |
| ip地址是什么， ipv4和ipv6 |
| DNS协议了解吗 |
| cookie local Storage sessionStorage 的区别 |
| https如何实现加密， 数字证书中都包括哪些内容？ |
| 登录是怎么确定用户身份的？讲了cookie和session。问了cookie上的httponly属性。 |
| 跨域 |
| 浏览器端的宏任务，微任务 |
| 我跨域的问题，如何解决，我说了后端响应时设置Access-control-allow-origin头部，还有JSONP |
| 要我写JSONP，我是首先介绍了一下它的基本原理 |
| 对于 CORS ，Get 和 POST 有区别吗？ |
| 了解 HTTPS 的过程吗？ |
| websocket和http对比，优缺点 |
| 跨域详细 （小程序有没有跨域一说） |
| 跨域解决方案，我说的数据代理，深入问了原理以及浏览器的同源策略，然后引出了xss攻击和csrf攻击的原理以及防御措施 |
| 原生AJAX和Fetch的区别。Fetch怎么监听下载进度？我说忘了。然后问了一下，是通过接收一个一个chunk，我随口说知道http有个分块传输，然后让我说说。 |
| 跨域原理 |
| ajax和fetch区别 |
| 介绍一下跨域的解决方案 |
| 解决的方法 |
| 绕过的方法 |
| 说一下jsonp的实现原理 |
| 写出axios或fetch的基本用法 |
| webpack 如何做性能优化？ |
| 介绍一下webpack |
| webacpk的常用配置 |
| webpack的原理 |
| webpack是如何加载文件的？ |
| webpakc是如何实现热更新的 |
| webpack是如何监听文件变化的 |
| webpack是如何查找资源的 |
| 前端工程化里面怎么做到优化的（说了webpack的压缩代码、cdn加速、tree shaking、提取公共代码 |
| new 一个对象发生了什么 |
| es6 新特性 |
| 如何判断一个对象为空 |
| 如何判断 symbol 对象为空 |
| 原型链，为什么要这么设计 |
| ES5 继承，寄生组合式 |
| ES6 继承，实例成员与静态成员处理 |
| CommonJS 与 ES Module 差异 |
| typeof 和 instanceof 的区别 |
| 什么是柯里化和尾递归 |
| 箭头函数和普通函数区别 |
| 说一说普通函数的this指向 |
| 说一下new的过程 |
| class类的public、private、static介绍一下 |
| ul、li事件委托 |
| e.target相关常用的属性 |
| onclick和addeventlistener的区别 |
| 介绍一下promise.all |
| commonJS 和 es6 模块化的区别 |
| 暂时性死区的定义 |
| 什么是事件循环，事件代理 |
| 装箱拆箱，隐式转换 |
| 事件循环，V8 与 Libuv 事件循环的差异 |
| call apply bind |
| 实现一个bind |
| 实现一个中间件 |
| 关于词法作用域的一道题目 |
| 实现洋葱模型 |
| 模拟实现8进制加法 |
| 判断数组类型 |
| 实现继承 |
| js阻塞 |
| this指向问题！！！ |
| 看两道输出题，一个有关this，引出箭头函数相关 |
| 一个宏微任务Promise相关 |
| 进程与线程的关系与区别 |
| js数据类型 |
| 如何区分引用类型（Object等） |
| ES5 和 ES6的继承 |
| this指向规则，并有一道关于this的题 |
| 如何创建一个闭包 |
| promise之前js如何实现异步操作，浏览器事件循环机制（宏任务和微任务） |
| 用过promise是吧，手写一个Promise.all |
| JS怎么定义一个常量对象（内部属性无法修改），回答Object.freeze()，缺点是要递归，能不能不递归，一时没想起来，提示：vue3响应式是怎么实现的？ |
| ES5实现继承：为什么要改Son.prototype.constructor = Son，如果不改行不行，不改会发生什么 |
| 手撕Promise.all |
| 怎么判断array，写一下instanceof和Object.toString怎么判断 |
| 写一下一个空数组的原型链 |
| 模块化有哪几种（说了ES6和commonjs），他俩什么区别 |
| 开发的时候能直接用es6语法吗，为什么。（浏览器不支持ES6）追问，所有浏览器都不支持吗？怎么支持ES6（答 babel），那么babel会怎么操作ES6模块化的语法呢 |
| js基本数据类型，null和undefined区别 |
| 数组方法有哪些，哪些改变原数组，哪些不改变原数组 |
| 手写一个map方法 |
| 如何判断一个数据是数组，讲一下数组和对象的关系 |
| 实现一个原型继承 |
| 基于Promise手写一个promise.all |
| 基本数据类型 |
| 如何判断数组？ |
| instanceof原理 |
| 讲原型链， 如何判断属性是自身属性还是原型属性 |
| es6的模块化和commenjs模块化区别 |
| js中动画如何实现，造成页面堵塞如何解决，问了requestAnimationFrame这个api |
| 将一个普通函数封装成promise风格，或是将ajax封装成promise风格 |
| 一道简单的this绑定问题。 |
| 讲讲JavaScript执行上下文。 |
| 脚本的几种引入方式。知道script标签的哪些特性。defer和async脚本。问了crossorigin特性，不懂。 |
| 事件循环，根据代码分析打印顺序，并解释原理。 |
| 编程题，实现类似lodash的get方法。 |
| 一个函数修复0.1+0.2的问题 |
| 2种方法实现for里面放settimeout合理输出 |
| 手写发布订阅 |
| 深拷贝和浅拷贝 |
| 事件冒泡捕获 |
| 图片懒加载 |
| 场景题：js加锁（开关） |
| 什么是原型对象以及原型对象有什么优点。 |
| 判断数组 |
| 数据类型，如何判断数组是否为空 |
| 面向对象 |
| 函数式编程 |
| diff算法 |
| JS线程 |
| 如何用多线程避免JS单线程要解决的DOM元素操作冲突问题（死锁） |
| 事件循环 |
| 维护一个定时器结构，它接收两个参数，一个是执行的时间，一个是执行的任务。 |
| 问用什么数据结构去维护这个结构，优化 |
| JS类型判断 |
| typeof能检测8种值 |
| es6的symbol，以及最新的bigint |
| 函数式编程 |
| 函数的副作用 |
| 纯函数 |
| curry的实现 |
| 偏函数 |
| es6扩展了哪些东西 |
| 数值扩展，函数扩展啊，比如剪头函数 |
| Proxy,Reflect,Promise,class,生成器函数，async/await |
| Proxy对象能拦截什么，我说总共13个吧 |
| Promise 我给他讲了一下这个对象，然后又顺便扩展出JS实现异步的5种方式callback, 发布订阅模式，Promise，生成器函数，async/await等等 |
| 实现异步的Event Loop |
| 异步在其他语言上是怎么实现 |
| 发布订阅设计模式 |
| 原型链的题 |
| 节流函数 |
| reduce实现map的功能 |
| 设计模式，就让我敲一个单例模式 |
| Es6之前是用什么来模拟类 |
| 模拟一遍new关键字 写个函数 |
| 来一题原型链的 |
| var let const 区别 |
| let const为块级作用域 声明的变量不在window上，所以声明后通过window访问变量是undefied |
| 箭头函数特点 call可以改变吗 |
| call apply bind 区别 |
| javascript内存机制 |
| 怎么避免js,css等资源阻塞 |
| js原理篇 |
| prototype 和 proto 的关系是什么 |
| 手写jsonp |
| js继承 |
| 预编译 |
| 长列表优化 |
| 深浅拷贝 |
| 浅拷贝 |
| 深拷贝 |
| object.create和object.assign |
| 尾递归（避免栈溢出的方法） |
| typeof |
| js原型和原型链 |
| jsv8引擎原理 |
| 编译型语言 |
| 解释性语言 |
| 比较 |
| v8引擎 |
| js执行机制 |
| 单线程执行 |
| 宿主 |
| 执行栈 |
| Event Loop |
| 宏任务和微任务 |
| js为什么设计成单线程语言 |
| 手写节流，防抖 |
| 页面性能优化 |
| defer和async的区别 |
| 手写new |
| 手写event类 |
| ES6中class是语法还是语法糖 |
| 原型的终点 |
| 手写实现promise，promise. all，promise. race |
| promise |
| promise.all |
| promise.race |
| 闭包优缺点 |
| function和object的关系 |
| 手写call |
| 异步执行顺序（易错） |
| setTimeout |
| promise |
| async/await |
| this指向 |
| this绑定优先级 |
| “硬绑定” bind为什么在new之后 |
| 事件委托 |
| regexp正则，讲讲贪婪模式 |
| 顺序存储结构和链式存储结构的优缺点 |
| 堆、栈和队列 |
| 写 new 的执行过程 |
| 写一个处理加法可能产生精度的函数，比如 0.1 + 0.2 = 0.3 |
| 1000000000 + 1000000000 允许返回字符串。处理大数。大数问题其实就是通过字符串来处理，从后往前加，然后处理进位的问题。 |
| es module 和 commonjs 的区别 |
| 写一个 es6 的继承过程 |
| 写一个防抖函数 |
| 如何做错误监控的 |
| 先介绍一下有那些错误监控方式，如 |
| try-cache |
| unhandleRejection |
| listener Event |
| vue error 钩子等等 |
| 介绍一下typescript |
| ts下的 never 如何理解 |
| 介绍一下Promise.all |
| 如何确保一定进入then回调 |
| 介绍一下 Promise.allSettled |
| 如果版本是一个超出安全范围的字符串，应该如何解决呢 |
| 将setTimeout用promise封装，实现函数delay |
| 动态加载的原理是什么？ |
| 在构造函数中用bind绑定的函数，前后是不是同一个，this指向考察 |
| CSS怎么实现边框宽度是 0.5px？ |
| flex 详细介绍属性 |
| 什么是 BFC 和 IFC |
| 伪类与伪元素差别 |
| CSS 动画里的 GPU 加速开启（3d属性）与原理（GPU） |
| 怎么实现左右定宽，中间适应的三栏布局 |
| 双飞翼布局 |
| flex里的basis解释一下` |
| 实现三列布局，左右固定 |
| 各种布局flex grid table-cell |
| 清除浮动 |
| 垂直居中 |
| CSS盒模型 |
| CSS选择器及其优先级 |
| CSS实现一个三角形 |
| flex布局实现一个两边固定宽中间自适应的布局（三栏布局） |
| translate3d |
| CSS flex布局实现一个中间居中，两边靠边的效果，其实就是justify-content: space-between; 然后讲讲flex布局。 |
| CSS的BFC是什么，有什么应用。 |
| 隐藏元素的几种方式。 |
| 因为上面说到了重排重绘，就针对这个点问了什么时候会导致重排重绘，如何减少。 |
| Span标签是否可以设置宽高，margin和padding呢？ |
| 哪些操作会导致回流（重绘、回流） |
| 三栏布局 |
| 图片存储在cdn如何获取宽高、像素 |
| flex后面三个属性 |
| css画圆 |
| 双栏布局 |
| 清除浮动 |
| 水平垂直居中 |
| 列表标签、段落标签、h标签 |
| css文本属性高、多行文本、单行文本...处理 |
| margin |
| 盒子模型，标准盒子模型小试牛刀 |
| HTML5和HTML4相比有什么性能的优化或标签 |
| PureComponent，flex布局以及一些css的东西，比如水平垂直居中 |
| css实现一个模态窗口，要从窗口下面向上弹的动画 |
| css的单位比如rem，em，问css的布局方式，就是只用盒子模型布局 |
| position的布局，flex布局，grid布局 |
| 实现一个左边固定右边自适应的样式 |
| 实现一个自适应正方形 |
| css篇 |
| css盒子模型 |
| css3新特性 |
| css动画 |
| transition |
| transition-delay |
| transition-timing-function |
| animation |
| css权重 |
| 三栏布局和二栏布局的实现 |
| 实现等比矩形 |
| inline和inline-block |
| BFC |
| clientHeight, scrollHeight, offsetHeight ,scrollTop和offsetTop的区别 |
| clientHeight |
| scrollHeight |
| offsetHeight |
| scrollTop |
| offsetTop |
| css渲染过程 |
| display有哪些属性 |
| flex能否实现元素竖排 |
| css的行内元素和块级元素区别 |
| vue 和 jquery 的区别 |
| vue 生命周期 |
| 什么时候会使用 keep-alive 组件 |
| 实现一个 vue 组件，底部可以滑入滑出。 |
| 防抖节流应用场景 |
| 路由怎么实现 |
| histroy会请求数据吗 |
| 渲染页面 |
| vue的官方文档有看吗 |
| vue怎么做到切换页面页面不刷新的 |
| Vue中的计算属性是怎么实现的 |
| 写一个图片加载的函数，传入url和timeout，需要处理error和timeout超时 |
| 有一个已经上线的项目，项目中出现了一个bug，如果在不影响用户的情况下实现项目的bug的修复，也就是重新部署 |
| react和Vue有什么区别 |
| vue中的key |
| 组件间通信方式 |
| vue-cli做过哪些配置，loader和plugins的区别以及常用plugins |
| Vue生命周期钩子。 |
| Vuex用过吗？简单说说。Vuex上保存哪些变量？为什么不直接用全局变量？Vuex上的状态最终保存到哪去？这真不知道，问了，面试官说是内存。（我：。。。） |
| computed、watch区别 |
| vue复用手段 |
| template编译render过程（ast） |
| v-if、v-show |
| vue如何解决回流重绘的问题 |
| Vue和React的区别 |
| Vue双向数据绑定原理 |
| 数组的绑定有什么特殊处理 |
| Vue3.0的双向数据绑定是怎么做的 |
| DOM 树 和 渲染树 的区别 |
| vue双向绑定为什么数组采用拦截原型来实现 |
| keep-alive原理 |
| vuex |
| 源码思考 |
| vue3的相关改动 |
| vue3哪些方面变快了 |
| vue3 patchFlags |
| vue单向数据流 |
| mvc和mvvm |
| 父子组件执行顺序 |
| 如何实现工程化和自动化 |
| 使用webpack搭建项目 |
| 使用eslint检查代码规范 |
| 使用typescript约定类型 |
| 使用proxy解决跨域 |
| 使用babel磨平差异 |
| 使用githooks拦截提交 |
| 使用plugins / loader做自动化处理 |
| 使用cicd做自动打包 |
| 使用命令行工具实现自动登录 |
| 说一下 v-for 中 key 的作用 |
| diff的时间复杂度是多少，如何提升的 |
| 说一下vue的生命周期和父子顺序 |
如果在父子组件的场景下，两个组件的生命周期顺序大致遵守 洋葱模型 |
| readonly 和 const 的区别是什么 |
| 不同页面间通信的多种实现方法 |
| scope是怎么实现的 |
| 项目中动画的实现， |
| 了解虚拟DOM吗，用代码判断两个element是否全等 |
| 是否知道html代码生成的dom树，写出对应代码 |
| 介绍一下 xss 和 csrf攻击 |
| 前端的安全问题。我的弱项，简单说了一下，XSS和CSRF和常用的预防手段。问了CSP，不懂，没听过。 |
| XSS攻击 |
| CSRF |
| XSS 和 CSRF |
| XSS防范方法 |
| CSRF防范方法 |
| git基本指令 |
| git hook |
| 前端埋点方案？ |
| 项目做了登录吗 |
| 购物车的记录保存在哪 |
| 我想让你实现下次进来还有购物车记录怎么实现 |
| 二维码登录（没看过没接触过） |
| 前端优化有哪些 |
| 这里cdn加速具体怎么做的，tree shaking的条件，提取公共代码是webpack直接就做了吗 |
| DNS解析过程 |
| 图片懒加载怎么实现，offsetTop和scrollTop区别。 监听事件怎么设置（vue的什么阶段 |
| 图片已经加载过了不希望监听怎么办。 滚动事件一直触发怎么办。 |
| DNS有几种查询方式 |
| 什么时候用递归查询，什么时候用迭代查询 |
| 说明一下你对脚手架的理解 |
| 分页怎么做？在列表的当前页中删除了一条，怎么处理？如何减少性能代价？增加一条呢？ |
| 一个滑动到底部自动加载下一页的长列表，当列表内容过长时，页面卡顿明显，怎么解决？我的想法是设置一个列表的最大值，达到最大值后，根据视窗，动态调整表格中加载的数据。又追问了如何确定元素在视窗内。 |
| React native的优势 |
| 还原树 |
| unicode和utf-8编码 |
| node.js有哪些常用API |
| react生命周期，虚拟dom，diff算法，keys，路由，setState原理（这个没答上来） |
| ajax实现原理，以及和fetch的区别 |
| 数组，和大于等于n的连续最短子序列（一开始忽略了连续，方向错导致没写完，让说了思路） |
| 设计一个类似百度搜索框那样随输随搜的，有哪些注意点 |
| SSR |
| SPA |
| SEO |
| GraphQL |
| GraphQL这种方式交互有什么好处 |
| nodejs中的几个事件循环阶段 |
| 如果不用CORS跨域呢 CORS是异步的 不用CORS呢 有没有更好的方法 |
| 给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。 |
| 项目中一个组合筛选的功能实现 |
| npm命令行工具：自动登录 |
| 约定大于配置（模仿dvajs下的自动生成路由/插件的实现） |
| plugins自动上报cdn/map等 |