精品模板 前端基础 & 前端面试
2023-11-08 22:31:45 16 举报AI智能生成
前端面试基础知识整理（不定时更新）
作者其他创作
大纲/内容
Step1（初步认识
简历介绍
介绍下自己？讲下你刚刚提到的xx项目,具体是怎么实现的?你觉得初期设定的方案有没有什么优缺点?现在有改进的替代方案吗?有没有遇到什么复杂场景,或者说难点或者有意思的点?有没有想过这个方案可能面临的更复杂场景是什么?
个人 & 持续成长
专业技能
对前端发展怎么看？有自我的规划吗？平时有什么非技术相关的爱好吗？
有自己的专栏或者博客，或者开源的GitHub项目吗？平时在哪里学习？今年看了哪些不错的书籍或者文章有什么推荐吗？
生活爱好
阅读量 & 运动量
项目
口述
做过什么项目，主要解决了什么问题？遇到了什么难点？项目收益是什么
项目中前后端角色如何分配，沟通流程呢？gitflow？多人如何开发合作？
项目技术选型是什么?这样技术选型有什么优缺点?低代码和可视化了解吗?做过的几个项目中有遇到什么难点吗?你对前端的发展怎么看？
展示（有的需要
Step2（通用知识
计算机基础
高频
算法（手写代码
非递归深度遍历 & 非递归广度遍历
动态规划
爬楼梯问题
动态爬楼梯（动态规划
http
http缓存策略了解吗?强缓存和协商缓存什么区别?优先命中哪个？
http1.0与http2.0的区别，http和https的区别？为什么2.0发展受阻
http2.0可以减少网络延迟为什么很多公司还是用1.1的版本
工程能力基础
高频
非必要知识
你觉得jquery源码有哪些写的好的地方
图片懒加载实现原理是什么?什么是渐进加载？页面滚动需要请求加载数据太频繁怎么处理提高性能?节流和防抖了解吗?引用场景是什么?
大数据处理问题
大数据页面切换怎么提升用户体验？
web woker
Coding能力
前端相关手写代码
JavaScript手写
generator并发模型
LRU缓存
请求重试策略
深拷贝和浅拷贝
写一个深拷贝
节流和防抖
节流
防抖
实现一个基本的promise
发布订阅模式
实现一个双向数据绑定
async await
继承
实现一个继承方法
ajax
手写实现ajax
简单的流程
用promise来实现ajax
call bind apply
实现apply和call
实现bind
函数科里化
字符串模板
实现new操作
Object
Object.create实现原理
实现instanceof
事件总线
实现一个基本的Event Bus
偏函数 & 数组
DOM手写
遍历DOM
树转表 & 表转树
树转表
表转树
业务问题
解析URL作为对象
用setTimeout模拟setInterval
实现一个简单路由
怎么实现图片懒加载
怎么设置rem
实现拖拽
JavaScript检测横屏
实现一个通用事件代理绑定函数
包含: 绑定, 触发, 解绑
包含: 绑定, 触发, 解绑
对下面代码进行优化
写个冒泡排序和快排
写个二分法, 二维数组查找
我要猜1~1000内中间的一个正整数， 要猜几次才能猜中
写一个事件委托函数
实际的几个问题
promise的具体实现
把多维数组降到一维
用setTimeout来实现setInterval
js怎么控制一次加载一张图片，加载完后再加载下一张
如何实现sleep的效果
怎么解决回调地狱
怎么实现轮播
实现一个两列等高布局
数据结构与算法能力
Step3（深度知识
设计思想
系统搭建
如果让你来设计一个RN热更新服务需要考虑哪些地方？
mock
让你搭建一个mook系统，设计思路是什么？
监控和安全系统
怎么设计一个前端监控系统，怎么实现监控
安全管理
前端怎么鉴权
登录方案(关键是Token
Cookie + Session 登录
cookie跨域问题解决
Token登录
SSO认证中心就类似一个中转站，CAS也是
SSO单点登录
OAuth第三方登录
需要申请三方的 appid、appsecret
网站会拿着 授权范围代码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
箭头函数
箭头函数和function有什么区别
module
promise
async和await
promise.all和promise.race
generator函数
手写代码
手写代码
实现一个promise
如果已经有三个promise，A、B和C，想串行执行，该怎么写
class
set和map
map
set
WeakMap 和 WeakSet
let和const
const
proxy
手写实现
有什么优点
说说你对ES6的了解
简单介绍一下symbol
箭头函数的特性
简单讲讲ES6的一些特性
说下promise.all和promise.race
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
前端异步的场景
web work
AMD CMD commonJS
async和defer
异步加载js方式有什么
常见的异步有什么
如何使不同页面之间进行通信
ajax和fetch
ajax
ajax和axios有什么区别
Ajax是什么?如何创建一个Ajax?
ajax原理
讲一下ajax原理和流程
Ajax解决浏览器缓存问题
readyState有哪4种状态
fetch
Fetch和Ajax比有什么优缺点
内存与事件
一般内存泄漏是什么原因怎么解决
js的节流和防抖
节流
计算过程有人打算和你说话，但是你很专注，说稍等下我算完下和你说。
防抖
计算不能被打断的同学，计算过程被人打断了，他说又要重新算一次。
谈谈Event Loop中的Job queue
JS中的垃圾回收机制
事件
DOM0事件
DOM2事件
事件传播机制
冒泡机制
事件代理
讲一下事件代理(事件委托)
讲下事件流
事件循环
JS单线程
宏事件
微事件
哪些操作会造成内存泄漏
原理问题
原型和原型链
原型和原型的定义
讲一下原型和原型链, 为什么要有原型
还有什么是_proto_和constructor
还有什么是_proto_和constructor
如何实现一个私有变量，用getName方法可以访问，不能直接访问
Function._proto_(getPrototypeOf)是什么
js监听对象属性的改变
继承的写法
讲下js的继承
继承对象
原型式继承
寄生式继承
继承构造函数
构造函数的继承
原型链的继承
组合式继承
寄生组合式继承
class继承
函数
IIFF ( 立即执行函数 )
箭头函数
函数表达式 & 函数声明
作用域和闭包
谈谈对this的理解
this指向问题
箭头函数的this
bind,apply,call区别
call
手写代码
apply
手写代码
bind
说下bind函数
说说eval怎么用
eval是做什么的
其他
闭包
闭包的原理, 作用, 缺点
JS作用域有什么用
js有没有块级作用域
静态作用域什么意思
什么叫暂停死区
严格模式和混杂模式有什么区别
TypeScript
HTML & CSS & 交互
html
html标签有几个可以逃过同源策略
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库的实现
基础知识
基础知识
盒模型
content-box
border-box
讲一下BFC块格式化上下文
形成
float清除浮动
flex
flex的三个属性是什么？
兼容
position
行内元素和块级元素互相转换
sass写法
动画
布局
流体布局、圣杯布局、双飞翼布局
详解下双飞翼布局和圣杯布局
居中布局
如何实现居中
扩展知识
float有什么要注意的点
怎么清除浮动
你知道grid布局吗
讲一下position定位
讲一下flex布局
animation动画知道吗
transition和animation有什么区别
你了解重绘和回流吗
行内元素有哪些有什么区别
link和@import区别
标准css盒子模型和低版本ie盒子模型有什么差别
浏览器版本兼容问题
多终端IOS安卓分辨率兼容
交互动画特效
画一条0.5px的线
transition和animation的区别
多行文本省略号
visibility=hidden, opacity=0，display:none
双边距重叠问题（外边距折叠）
display：table和本身的table有什么区别
z-index的定位方法
设置一个元素的背景颜色，背景颜色会填充哪些区域？
inline-block、inline和block的区别
画个正方体
浏览器的窗口大小
em是相对于父元素的还是相对于自身
什么是SVG
什么是outline
css设置链接样式
说下关于position定位
什么是置换元素
如果需要手写动画, 最小时间间隔是多少?
:单冒号和::双冒号什么区别
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跨域怎么实现
三个最常用的跨域(面试记这个即可)
四个比较不常见的跨域
websocket
轮询和常轮询
区别
优缺点
websocket和ajax的区别是什么，websocket的应用场景有哪些
说一下web worker
web中怎么实现会话跟踪?
存储
公共问题
Cookie、sessionStorage、localStorage的区别
cache
cache-control的值有哪些
cookie、localStorage、sessionStorage
cookie
Cookie如何防范XSS攻击
Cookie和session的区别
localStorage和cookie的区别
sessionstorage
缓存
强缓存
协商缓存
渲染
讲一下什么是渐进增强和优雅降级
浏览器在生成页面的时候，会生成那两颗树？
浏览器从url输入到显示页面的步骤
常见兼容性问题
内核
你怎么理解浏览器内核
api
window
navigate
location
几个很实用的BOM属性对象方法
说一下web Quality（无障碍）
框架问题
框架共性知识
高频
路由hash模式和history模式有什么优缺点?
双向绑定原理？js的proxy有什么作用？和Object.defineProperty()有什么区别
单页应用怎么实现keep-alive
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
单向数据流
react和Vue的原理，区别，亮点，作用
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
react高阶组件知道吗
生命周期
react的生命周期
嵌套组件之间的生命周期
prop和state
fiber
diff原理
优缺点
redux
组件之间的通信
父子
兄弟
爷孙
react-router原理
hash模式和history模式
mixin
react高阶组件
render props
小问题
什么是JSX
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是什么?用在哪些场景?怎么使用
组件之间的参数传递
实现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指令
你知道pwa是什么吗
为什么vue要放弃ES6的class
生命周期
不同组件之间的嵌套生命周期会怎么样
vue的生命周期
双向数据绑定
为什么vue3要用proxy代替object.defineProperty
你了解vue的diff算法吗
虚拟DOM
diff
diff原理是什么
vue的双向绑定原理
vue常见指令
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
CDN
防抖与节流
预加载
预渲染
css优化
怎么进行性能优化
js的性能优化有哪些
如何进行网站优化
讲下前端性能优化
怎么看网站的性能如何
实际使用过的前端性能优化的方案，描述下场景并做下介绍
测试
前端怎么进行测试
单元测试
jest
移动端
高频
小程序
微信小程序和vue的差别
实现自适应
rem 的适配方案
比较好的解决自适应的方案
适配iphonex
设备列表
1px很粗的解决办法
border-image/background-image
渐变和阴影
viewport + rem 实现
伪类+transform, 对老项目兼容性好,不错
svg方案, 目前最佳
不重要的
响应式设计是否需要设计师提供多套的设计稿呢?
click在ios上有300ms延迟，原因及如何解决？
讲讲viewport和移动端布局
基础知识
react native
实现原理是什么
week
实现原理是什么
lonic
实现原理是什么
flutter
实现原理是什么
pwa
service work
实现原理是什么
低代码
低代码平台可能面临的问题
大数据页面切换问题
diff算法问题
增量排序算法
逻辑结构设计问题
加速存储
二进制存储
做低代码你底层设计的思路是什么
大数据页面渲染，页面切换怎么优化
可视化
前端三维渲染
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 条评论
下一页
