前端基础 & 前端面试
2021-08-30 20:51:37 13 举报AI智能生成
前端面试基础知识整理（不定时更新）
作者其他创作
大纲/内容
Step1（初步认识
简历介绍
介绍下自己？讲下你刚刚提到的xx项目,具体是怎么实现的?你觉得初期设定的方案有没有什么优缺点?现在有改进的替代方案吗?有没有遇到什么复杂场景,或者说难点或者有意思的点?有没有想过这个方案可能面临的更复杂场景是什么?
个人 & 持续成长
专业技能
对前端发展怎么看？有自我的规划吗？平时有什么非技术相关的爱好吗？
有自己的专栏或者博客，或者开源的GitHub项目吗？平时在哪里学习？今年看了哪些不错的书籍或者文章有什么推荐吗？
生活爱好
阅读量 & 运动量
项目
口述
做过什么项目，主要解决了什么问题？遇到了什么难点？项目收益是什么
项目中前后端角色如何分配，沟通流程呢？gitflow？多人如何开发合作？
项目技术选型是什么?这样技术选型有什么优缺点?低代码和可视化了解吗?做过的几个项目中有遇到什么难点吗?你对前端的发展怎么看？
展示（有的需要
Step2（通用知识
计算机基础
高频
算法（手写代码
非递归深度遍历 & 非递归广度遍历
动态规划
爬楼梯问题
动态爬楼梯（动态规划<br>
http
http缓存策略了解吗?强缓存和协商缓存什么区别?优先命中哪个？
http1.0与http2.0的区别，http和https的区别？为什么2.0发展受阻
http2.0可以减少网络延迟为什么很多公司还是用1.1的版本
工程能力基础
高频
非必要知识
你觉得jquery源码有哪些写的好的地方
图片懒加载实现原理是什么?什么是渐进加载？页面滚动需要请求加载数据太频繁怎么处理提高性能?节流和防抖了解吗?引用场景是什么?
大数据处理问题
大数据页面切换怎么提升用户体验？
web woker
Coding能力
前端相关手写代码<br>
JavaScript手写
generator并发模型
LRU缓存
请求重试策略
深拷贝和浅拷贝
写一个深拷贝
节流和防抖
节流
防抖
实现一个基本的promise
发布订阅模式
实现一个双向数据绑定
async await
继承
实现一个继承方法
ajax
手写实现ajax<br>
简单的流程
用promise来实现ajax
call bind apply
实现apply和call
实现bind
函数科里化
字符串模板
实现new操作
Object
Object.create实现原理
实现instanceof
事件总线
实现一个基本的Event Bus
偏函数 & 数组
DOM手写
遍历DOM
树转表 & 表转树
树转表
表转树
业务问题
解析URL作为对象
用setTimeout模拟setInterval
实现一个简单路由
怎么实现图片懒加载
怎么设置rem<br>
实现拖拽
JavaScript检测横屏
实现一个通用事件代理绑定函数<br>包含: 绑定, 触发, 解绑
对下面代码进行优化
写个冒泡排序和快排
写个二分法, 二维数组查找
我要猜1~1000内中间的一个正整数， 要猜几次才能猜中
写一个事件委托函数
实际的几个问题
promise的具体实现
把多维数组降到一维<br>
用setTimeout来实现setInterval
js怎么控制一次加载一张图片，加载完后再加载下一张
如何实现sleep的效果
怎么解决回调地狱<br>
怎么实现轮播<br>
实现一个两列等高布局
数据结构与算法能力
Step3（深度知识
设计思想
系统搭建
如果让你来设计一个RN热更新服务需要考虑哪些地方？
mock
让你搭建一个mook系统，设计思路是什么？
监控和安全系统
怎么设计一个前端监控系统，怎么实现监控
安全管理
前端怎么鉴权
登录方案(关键是Token
Cookie + Session 登录
cookie跨域问题解决
Token登录
SSO认证中心就类似一个中转站，CAS也是
SSO单点登录
OAuth第三方登录
需要申请三方的 appid、appsecret<br>
网站会拿着 授权范围代码code 、appid、appsecret，向三方服务器申请 token,凭借三方token拿到用户信息将登录状态写到Cookie
cookie
cookie 为什么是最方便的存储方案，有哪些操作 cookie 的方式
session
session 方案是如何实现的，存在哪些问题
token
token 方案是如何实现的，如何进行编码和防篡改
jwt
jwt 是做什么的
前端怎么做反页面爬虫？有设计思路吗？
埋点系统
常见的埋点设计方案是什么，埋点跨域怎么解决
常见设计思想
作为前端架构师需要考虑的因素
对immutable的理解
设计serverless大平台需要考虑哪些事情
JavaScript & TypeScript
JavaScript
高频
基础知识
基础知识
基础语法
类型处理
怎么判断变量是数组
alert( NaN === NaN ); NaN 是一个特殊的数值型值，它与任何值进行比较都会返回 false
使用toFixed，请注意，toFixed 总是返回一个字符串。
数组与对象
数组
去重 & 降维 & 排序
数组排序
数组去重的方法
数组降维
构造
怎么初始化数组
new Array
从一个数组里删除另一个数组里的元素
对象
创建
JavaScript有哪些方法定义对象
...解构
智能参数
数组解构
讲下浅拷贝和深拷贝
深拷贝
Object.assign拷贝
递归克隆
lodash的cloneDeep实现方法
判断对象中是否有某属性
判断是否是对象
Object方法
Object.defineProperty()
字符串
去除字符串首尾空格
slice
substring（返回一个索引和另一个索引之间的字符串
substr（返回指定位置开始的指定字符数的字符
includes
codePointAt & fromCodePoint & localeCompare
其他
for ... of循环和for ... in循环有何区别
==和===、以及Object.is的区别
setTimeout、setInterval和requestAnimationFrame之间的区别
怎么进行js类型判断
JavaScript有几种类型的值, 他们的内存归属是什么
布局
offWidth/clientWidth/scrollwidth有什么区别
JSON转换
JSON.stringify
JSON.parse
日期与时间
数学
0.1 + 0.2 !== 0.3
基础方法
逗号运算符
ES6/ES7
ES6<br>
箭头函数
箭头函数和function有什么区别
module
promise
async和await
promise.all和promise.race
generator函数
手写代码<br>
手写代码
实现一个promise
如果已经有三个promise，A、B和C，想串行执行，该怎么写
class
set和map
map
set
WeakMap 和 WeakSet
let和const
const
proxy
手写实现
有什么优点
说说你对ES6的了解
简单介绍一下symbol
箭头函数的特性
简单讲讲ES6的一些特性<br>
说下promise.all和promise.race<br>
ECMAScript6怎么写class么，为什么会出现class这种东西?
Symbol
规范
说一下Commonjs、AMD和CMD
AMD (Modules/Asynchronous-Definition) 、CMD (Common Module Definition)规范区别?
如何理解前端模块化
requireJS的核心原理是什么? (如何动态加载的? 如何避免多次加载的?如何缓存的? )
让你自己设计实现一个requireJS, 你会怎么做?
谈一下AMD和commonjs
什么是按需加载
严格模式有哪些限制
说说你知道的JavaScript编写规范
动画
setTimeout
为什么会在低端机上出现动画不流畅抖动等问题
p屏幕分辨率问题
requestanimationframe可以解决
执行时间是不确定的
requestanimationframe
加载构建
js延迟加载的方式有哪些?
new操作符做了什么事情
进阶问题
缓存与通信
将原生的ajax封装成promise
异步
同步和异步差别
异步和单线程差别
event loop<br>
前端异步的场景
web work<br>
AMD CMD commonJS<br>
async和defer
异步加载js方式有什么
常见的异步有什么
如何使不同页面之间进行通信
ajax和fetch
ajax
ajax和axios有什么区别
Ajax是什么?如何创建一个Ajax?
ajax原理
讲一下ajax原理和流程
Ajax解决浏览器缓存问题
readyState有哪4种状态
fetch
Fetch和Ajax比有什么优缺点
内存与事件
一般内存泄漏是什么原因怎么解决
js的节流和防抖
节流
计算过程有人打算和你说话，但是你很专注，说稍等下我算完下和你说。
防抖
计算不能被打断的同学，计算过程被人打断了，他说又要重新算一次。<br>
谈谈Event Loop中的Job queue
JS中的垃圾回收机制
事件<br>
DOM0事件
DOM2事件
事件传播机制
冒泡机制
事件代理
讲一下事件代理(事件委托)
讲下事件流
事件循环<br>
JS单线程<br>
宏事件<br>
微事件
哪些操作会造成内存泄漏
原理问题
原型和原型链
原型和原型的定义
讲一下原型和原型链, 为什么要有原型<br>还有什么是_proto_和constructor
如何实现一个私有变量，用getName方法可以访问，不能直接访问
Function._proto_(getPrototypeOf)是什么
js监听对象属性的改变
继承的写法
讲下js的继承
继承对象
原型式继承
寄生式继承
继承构造函数
构造函数的继承
原型链的继承
组合式继承
寄生组合式继承
class继承
函数
IIFF ( 立即执行函数 )
箭头函数
函数表达式 & 函数声明
作用域和闭包
谈谈对this的理解
this指向问题
箭头函数的this
bind,apply,call区别
call
手写代码
apply<br>
手写代码
bind
说下bind函数
说说eval怎么用
eval是做什么的
其他
闭包
闭包的原理, 作用, 缺点
JS作用域有什么用<br>
js有没有块级作用域
静态作用域什么意思<br>
什么叫暂停死区
严格模式和混杂模式有什么区别
TypeScript
HTML & CSS & 交互
html
html标签有几个可以逃过同源策略<br>
attribute和property有什么区别
img的title和alt有什么区别
什么是语义化
html5有哪些新特新
html5离线存储怎么使用
iframe有什么缺点
xhtml和html有什么区别
canvas和svg有什么区别
说一下HTML5 drag api
iframe是什么？有什么缺点？
h5新增
前端SEO要注意哪些
异步加载的方式有哪些?
css
高频
CSS的BFC有了解吗?scale和zoom放大有什么区别?重绘和重排有什么区别?举几个会引起重排的属性?改变背景图引起重排?
postcss
postcss你自己会配置么？怎么让postcss加兼容性前缀？
选择器
Sizzle库的实现
基础知识
基础知识<br>
盒模型
content-box
border-box
讲一下BFC块格式化上下文
形成
float清除浮动
flex
flex的三个属性是什么？
兼容<br>
position
行内元素和块级元素互相转换
sass写法
动画
布局
流体布局、圣杯布局、双飞翼布局
详解下双飞翼布局和圣杯布局
居中布局
如何实现居中
扩展知识<br>
float有什么要注意的点
怎么清除浮动
你知道grid布局吗
讲一下position定位
讲一下flex布局
animation动画知道吗
transition和animation有什么区别
你了解重绘和回流吗
行内元素有哪些有什么区别
link和@import区别
标准css盒子模型和低版本ie盒子模型有什么差别
浏览器版本兼容问题
多终端IOS安卓分辨率兼容<br>
交互动画特效
画一条0.5px的线
transition和animation的区别
多行文本省略号
visibility=hidden, opacity=0，display:none
双边距重叠问题（外边距折叠）
display：table和本身的table有什么区别
z-index的定位方法
设置一个元素的背景颜色，背景颜色会填充哪些区域？
inline-block、inline和block的区别
画个正方体
浏览器的窗口大小
em是相对于父元素的还是相对于自身
什么是SVG<br>
什么是outline<br>
css设置链接样式
说下关于position定位<br>
什么是置换元素
如果需要手写动画, 最小时间间隔是多少?
:单冒号和::双冒号什么区别
display: none 和 visibility:hidden有什么区别
nth-of-type和nth-child的区别
常见的布局和实现
盒子模型和弹性盒布局
BFC、IFC、 GFC、FFC: FC (Formatting Contexts)，格式化上下文
左边定宽，右边自适应方案
左右两边定宽，中间自适应
左右居中
上下垂直居中
scale和zoom有什么区别?为什么scale后还会占空间?
常见布局与交互
浏览器& DOM
DOM
常见的DOM操作有什么
遍历DOM
documen.write和innerHTML的区别?
DOM操作一怎样添加、 移除、移动、复制、创建和查找节点?
浏览器
通信与存储
通信
iframe通信
跨域
jsonp
window.name
document.domain
代理
postMessage
CORS
讲下JavaScript跨域怎么实现
三个最常用的跨域(面试记这个即可)
四个比较不常见的跨域<br>
websocket
轮询和常轮询<br>
区别
优缺点
websocket和ajax的区别是什么，websocket的应用场景有哪些
说一下web worker
web中怎么实现会话跟踪?
存储
公共问题
Cookie、sessionStorage、localStorage的区别
cache
cache-control的值有哪些
cookie、localStorage、sessionStorage<br>
cookie
Cookie如何防范XSS攻击
Cookie和session的区别
localStorage和cookie的区别
sessionstorage
缓存
强缓存
协商缓存
渲染
讲一下什么是渐进增强和优雅降级
浏览器在生成页面的时候，会生成那两颗树？
浏览器从url输入到显示页面的步骤
常见兼容性问题
内核
你怎么理解浏览器内核
api
window
navigate
location
几个很实用的BOM属性对象方法
说一下web Quality（无障碍）
框架问题
框架共性知识
高频
路由hash模式和history模式有什么优缺点?
双向绑定原理？js的proxy有什么作用？和Object.defineProperty()有什么区别
单页应用怎么实现keep-alive<br>
Vue与Angular以及React的区别
React
高频
用过dva吗？介绍下redux？什么时候用类组件？什么时候用函数式组件
类组件
this.setState是同步还是异步（其实是个bug
函数式组件
hooks
react 为什么不能在for循环if语句里面使用hooks，说下react hooks实现原理
react hook了解哪些？怎么封装useState增加回调？
useMemo和useCallback什么区别
useEffect和componentDidMount有什么区别
为什么使用函数式组件而不用类组件
react fiber
每次this.setState都会创建fiber树吗？每个组件都有自己的fiber树吗
分片，之前是一气呵成不能被打断，现在是每个子组件都有一个fiber树，所以在计算过程中用户如果有其他操作可以被打断，渲染过程不能被打断。
fiber是有优先级定义，例如键盘按键触发事件优先级高
在线程方面去做了优化
基础知识
简单介绍下react<br>
单向数据流
react和Vue的原理，区别，亮点，作用
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
react高阶组件知道吗
生命周期
react的生命周期
嵌套组件之间的生命周期
prop和state
fiber
diff原理<br>
优缺点
redux
组件之间的通信<br>
父子
兄弟
爷孙
react-router原理
hash模式和history模式
mixin
react高阶组件
render props<br>
小问题
什么是JSX<br>
Vue
高频
VUE3.0的虚拟DOM本质是什么，diff算法有了解过吗?VUE3的diff算法有什么区别?
对于MVVM的理解
vue生命周期
什么是vue生命周期？
vue生命周期的作用是什么？
生命周期总共有几个阶段
第一次页面加载会触发哪几个钩子
DOM 渲染在哪个周期中就已经完成
Vue实现数据双向绑定的原理
Object.defineProperty()
基础知识
Vue 2.0
基础知识
vue中 key 值的作用？
小问题
一句话能说明的
对keep-alive 的了解
vue-cli
vue-cli如何新增自定义指令
如何自定义一个过滤器
vuex
vuex是什么?用在哪些场景?怎么使用<br>
组件之间的参数传递
实现vue的双向绑定
什么是mvvm
vuex干什么用的
什么是virtual dom
虚拟DOM & diff算法
vue的优点是什么，缺点是什么
Vue3有了解吗& diff算法有什么区别
性能优化
HOC是什么?相比mixins有什么优点? .
语法
v-if 和 v-show 区别
路由、通信、生命周期
路由
路由原理
vue路由的钩子函数
Vue的路由实现: hash模式和history模式
$route和$router的区别
通信
组件通信
Vue组件间的参数传递
生命周期
生命周期钩子函数
NextTick原理
存储
vuex
vuex是什么？怎么使用？哪种功能场景使用它？
vue实现路由的方式
常见问题
你对vue的理解到什么程度了?
你知道什么是spa、seo与ssr
vue为什么要求组件模板只能有一个根元素
hash模式和history模式有什么区别
怎么去实现双向数据绑定, 有几种方法
mixin
prop和state的区别
vuex
常见的vue指令<br>
你知道pwa是什么吗
为什么vue要放弃ES6的class<br>
生命周期
不同组件之间的嵌套生命周期会怎么样
vue的生命周期
双向数据绑定
为什么vue3要用proxy代替object.defineProperty
你了解vue的diff算法吗
虚拟DOM
diff
diff原理是什么
vue的双向绑定原理
vue常见指令<br>
vue-model
Vue 3.0
Proxy与Object.defineProperty的优劣对比
边界知识
工程化
打包
webpack
怎么使用webpack对项目进行优化？
优化打包速度
loader
Babel原理
如何实现一个插件
减少Webpack打包时间
减少Webpack打包后的文件体积
谈谈对webpack看法
webpack和gulp区别（模块化与流的区别）
高频
有做过性能优化吗?例如webpack优化?webpack打包优化怎么优化?对webpack5了解吗？
dll？热更新原理是什么
vite
vite实现原理
系统构建
埋点与监控
页面埋点
性能监控
异常监控
性能优化 & 测试
性能
图片优化
懒加载
用web pic 代替jpg<br>
CDN
防抖与节流
预加载
预渲染
css优化
怎么进行性能优化
js的性能优化有哪些
如何进行网站优化
讲下前端性能优化
怎么看网站的性能如何
实际使用过的前端性能优化的方案，描述下场景并做下介绍
测试
前端怎么进行测试<br>
单元测试
jest
移动端<br>
高频
小程序
微信小程序和vue的差别
实现自适应<br>
rem 的适配方案
比较好的解决自适应的方案
适配iphonex
设备列表<br>
1px很粗的解决办法<br>
border-image/background-image
渐变和阴影
viewport + rem 实现
伪类+transform, 对老项目兼容性好,不错<br>
svg方案, 目前最佳<br>
不重要的
响应式设计是否需要设计师提供多套的设计稿呢?<br>
click在ios上有300ms延迟，原因及如何解决？
讲讲viewport和移动端布局
基础知识
react native<br>
实现原理是什么
week
实现原理是什么
lonic
实现原理是什么
flutter
实现原理是什么
pwa
service work<br>
实现原理是什么
低代码
低代码平台可能面临的问题
大数据页面切换问题
diff算法问题
增量排序算法
逻辑结构设计问题
加速存储
二进制存储
做低代码你底层设计的思路是什么<br>
大数据页面渲染，页面切换怎么优化
可视化
前端三维渲染
webGL
IM & 直播
IM
融云IM
直播协议
Step4（广度知识
服务端知识
NODE
原生node
简单实现Node的Events模块
node的使用场景和优缺点
监控 & 性能优化
koa
express
egg
Docker & 持续集成
知识区分
C++,Java，JavaScript这三种语言的区别？
预备知识
计算机基础
https://www.processon.com/view/link/60d0bbaa1efad47436c3c5e2
工程能力基础
0 条评论
下一页
