2022金三银四前端面试题预告

1,080 阅读18分钟

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等