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等 |