前端面试题
2022-10-31 22:16:15 1 举报AI智能生成
登录查看完整内容
offer收割机前端面试题
作者其他创作
大纲/内容
CSS 选择器及其优先级
display 的属性值及其作用
display 的 block、inline 和 inline-block 的区别
隐藏元素的方法有哪些
display:none 与 visibility:hidden 的区别
对盒模型的理解
CSS3 中有哪些新特性
单行、多行文本溢出隐藏
z-index 属性在什么情况下会失效
CSS3 中的 transform 有哪些属性
考察很多
CSS 中可继承与不可继承属性有哪些
link 和@import 的区别
伪元素和伪类的区别和作用
常见的图片格式及使用场景
对 CSSSprites 的理解
CSS 预处理器/后处理器是什么？为什么要使用它们？
对line-height 的理解及其赋值方式
Sass、Less 是什么？为什么要使用他们
对媒体查询的理解
考察较多
transition 和 animation 的区别
margin 和 padding 的使用场景
CSS 优化和提高性能的方法有哪些
display:inline-block 什么时候会显示间隙
对 CSS 工程化的理解
如何判断元素是否到达可视区域
考察较少
对 requestAnimationframe 的理解
为什么有时候⽤translate来改变位置⽽不是定位
li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？
替换元素的概念及计算规则
::before 和 :after 的双冒号和单冒号有什么区别？
考察很少
一、CSS 基础
两栏布局的实现
三栏布局的实现
水平垂直居中的实现
对 Flex 布局的理解及其使用场景
常见的 CSS 布局单位
px、em、rem 的区别及使用场景
如何根据设计稿进行移动端适配
响应式设计的概念及基本原理
二、页面布局
为什么需要清除浮动？清除浮动的方式
对 BFC 的理解，如何创建 BFC
position 的属性有哪些，区别是什么
什么是 margin 重叠问题？如何解决？
display、float、position 的关系
使用 clear 属性清除浮动的原理
absolute 与 fixed 共同点与不同点
元素的层叠顺序
对 sticky 定位的理解
三、定位与浮动
实现一个三角形
如何解决 1px 问题？
实现一个扇形
画一条 0.5px 的线
设置小于 12px 的字体
实现一个宽高自适应的正方形
四、场景应用
CSS
JavaScript有哪些数据类型，它们的区别？
数据类型检测的方式有哪些
判断数组的方式有哪些
null和undefined区别
intanceof 操作符的实现原理及实现
为什么0.1+0.2 ! == 0.3，如何让其相等
== 操作符的强制类型转换规则？
Object.is() 与比较操作符 “===”、“==” 的区别？
object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别
typeof null 的结果是什么，为什么？
isNaN 和 Number.isNaN 函数的区别？
其他值到字符串的转换规则？
其他值到数字值的转换规则？
其他值到布尔类型的值的转换规则？
JavaScript 中如何进行隐式类型转换？
如何获取安全的 undefined 值？
typeof NaN 的结果是什么？
|| 和 && 操作符的返回值？
+ 操作符什么时候用于字符串的拼接？
什么是 JavaScript 中的包装类型？
为什么会有 BigInt 的提案？
一、数据类型
let、const、var的区别
箭头函数与普通函数的区别
const对象的属性可以修改吗
如果new一个箭头函数的会怎么样
箭头函数的 this 指向哪⾥？
对 rest 参数的理解
ES6中模板语法与字符串处理
扩展运算符的作用及使用场景
Proxy 可以实现什么功能？
对 对象 与 数组 的解构的理解
如何提取高度嵌套的对象里的指定属性？
二、ES6
new操作符的实现原理
数组有哪些原生方法？
什么是 DOM 和 BOM？
对类数组对象的理解，如何转化为数组
对AJAX的理解，实现一个AJAX请求
JavaScript为什么要进行变量提升，它导致了什么问题？
forEach和map方法有什么区别
map 和 Object 的区别
JavaScript脚本延迟加载的方式有哪些？
JavaScript类数组对象的定义？
为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?
ES6 模块与 CommonJS 模块有什么异同？
如何判断一个对象是否属于某个类？
for...in 和 for...of 的区别
数组的遍历方法有哪些
map 和 weakMap 的区别
常用的正则表达式有哪些？
对JSON的理解
Unicode、UTF-8、UTF-16、UTF-32的区别？
常见的位运算符有哪些？其计算规则是什么？
escape、encodeURI、encodeURIComponent 的区别
什么是尾调用，使用尾调用有什么好处？
常见的DOM操作有哪些
use strict是什么意思？使用它区别是什么？
如何使用 for...of 遍历对象
ajax、axios、fetch 的区别
JavaScript有哪些内置对象
强类型语言和弱类型语言的区别
解释性语言和编译型语言的区别
三、JavaScript基础
对原型、原型链的理解
原型链指向
原型修改、重写
原型链的终点是什么？如何打印出原型链的终点？
如何获得对象非原型链上的属性？
四、原型与原型链
对闭包的理解
对作用域、作用域链的理解
对执行上下文的理解
五、执行上下文/作用域链/闭包
对 this对象 的理解
call() 和 apply() 的区别？
（建议看一下鲨鱼哥的掘金手写）
实现call、apply 及 bind 函数
六、this/call/apply/bind
对Promise的理解
Promise的基本用法
对 async / await 的理解
async / await 对比 Promise 的优势
异步编程的实现方式？
setTimeout、Promise、Async/Await 的区别
Promise 解决了什么问题
Promise.all 和 Promise.race 的区别的使用场景
await 到底在等啥？
async / await 的优势
async / await 如何捕获异常
并发与并行的区别？
什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？
setTimeout、setInterval、requestAnimationFrame 各有什么特点？
七、异步编程
对象创建的方式有哪些？
对象继承的方式有哪些？
八、面向对象
浏览器的垃圾回收机制
哪些情况会导致内存泄漏
九、垃圾回收与内存泄漏
JavaScript
手写 instanceof 方法
手写 new 操作符
手写 Promise.all
手写防抖函数
手写节流函数
手写 call 函数
手写 apply 函数
手写 bind 函数
实现 AJAX 请求
实现深拷贝
手写 Promise
手写 Promise.then
手写 Promise.race
手写类型判断函数
函数柯里化的实现
手写 Object.create
使用 Promise 封装 AJAX 请求
实现浅拷贝
一、JavaScript 基础
实现数组的乱序输出
实现数组的扁平化
实现数组去重
将数字每千分位用逗号隔开
实现非负大整数相加
实现 add(1)(2)(3)
使用 ES5 和 ES6 求函数参数的和
解析 URL Params 为对象
实现日期格式化函数
实现数组元素求和
使用 reduce 求和
将 js对象 转化为树形结构
实现数组的 flat 方法
实现数组的 push 方法
实现数组的 filter 方法
实现数组的 map 方法
实现字符串的 repeat 方法
实现字符串翻转
实现类数组转化为数组
二、数据处理
循环打印红黄绿
实现 prototype 继承
小孩报数问题
查找文章中出现频率最高的单词
实现双向数据绑定
实现斐波那契数列
使用 setTimeout 实现 setInterval
实现 jsonp
判断对象是否存在循环引用
字符串出现的不重复最长长度
用 Promise 实现图片的异步加载
实现发布 - 订阅模式
封装异步的 fetch，使用 async await 方式来使用
实现简单路由
三、场景应用
手写代码
React 事件机制
React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代
对 React-Fiber 的理解，它解决了什么问题？
React 高阶组件是什么，和普通组件有什么区别，适用什么场景
哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？
对有状态组件和无状态组件的理解及使用场景
React 中什么是受控组件和非控组件？
类组件与函数组件有什么异同？
React的事件和普通的HTML事件有什么不同？
React.createClass 和 extends Component 的区别有哪些？
React 如何判断什么时候重新渲染组件？
对 React 中 Fragment 的理解，它的使用场景是什么？
React 如何获取组件对应的DOM元素？
对 React 的插槽 (Portals) 的理解，如何使用，有哪些使用场景
在 React 中如何避免不必要的 render ？
对 React-Intl 的理解，它的工作原理？
对 React context 的理解
React 中除了在构造函数中绑定 this ，还有别的方式吗？
React 组件中怎么做事件代理？它的原理是什么？
React.Component 和 React.PureComponent 的区别
React 声明组件有哪几种方法，有什么不同？
React 中可以在 render 访问 refs 吗？为什么？
为什么 React 并不推荐优先考虑使用 Context ？
React 中 refs 的作用是什么？有哪些应用场景？
React 组件的构造函数有什么作用？它是必须的吗？
对 componentWillReceiveProps 的理解
React.forwardRef 是什么？它有什么作用？
一、组件基础
React setState 调用的原理
React setState 调用之后发生了什么？是同步还是异步？
在 React 中组件的 this.state 和 setState 有什么区别？
React 组件的 state 和 props 有什么区别？
React 中的 setState 批量更新的过程是什么？
React 中有使用过 getDefaultProps 吗？它有什么作用？
React 中的 props 为什么是只读的？
在 React 中组件的 props 改变时更新组件的有哪些方法？
React 中 setState 的第二个参数作用是什么？
state 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程
React 中怎么检验 props ？验证 props 的目的是什么？
React 中的 setState 和 replaceState 的区别是什么？
二、数据管理
1）组件挂载阶段
2）组件更新阶段
3）组件卸载阶段
4）错误处理阶段
React 的生命周期有哪些？
React 性能优化在哪个生命周期？它优化的原理是什么？
state 和 props 触发更新的生命周期分别有什么区别？
React 中发起网络请求应该在哪个生命周期中进行？为什么？
React 16 中新生命周期有哪些
React 废弃了哪些生命周期？为什么？
React 16.X 中 props 改变后在哪个生命周期中处理
三、生命周期
父子组件的通信方式？
跨级组件的通信方式？
非嵌套关系组件的通信方式？
组件通信的方式有哪些
如何解决 props 层级过深的问题
四、组件通信
React-Router 的实现原理是什么？
React-Router 的路由有几种模式？
React-Router4 怎样在路由变化时重新渲染同一个组件？
React-Router4 的Switch有什么用？
如何配置 React-Router 实现路由切换
react-router 里的 Link 标签和 a 标签的区别
React-Router 如何获取 URL 的参数和历史对象？
React-Router 怎么设置重定向？
五、路由
对 Redux 的理解，主要解决什么问题
Redux 原理及工作流程
Redux 和 Vuex 有什么区别，它们的共同思想
Redux 中异步的请求怎么处理
Redux 怎么实现属性传递，介绍下原理
Redux 中间件是什么？接受几个参数？柯里化函数两端的参数具体是什么？
Redux 状态管理器和变量挂载到 window 中有什么区别
mobox 和 redux 有什么区别？
Redux 中的 connect 有什么作用
Redux 请求中间件如何处理并发
Redux 中间件是怎么拿到 store 和 action ？然后怎么处理？
六、Redux
对 React Hook 的理解，它的实现原理是什么
为什么 useState 要使用数组而不是对象
React Hooks 解决了哪些问题？
useEffect 与 useLayoutEffect 的区别
React Hook 的使用限制有哪些？
React Hooks 在平时开发中需要注意的问题和原因
React Hooks 和生命周期的关系？
七、Hooks
对虚拟 DOM 的理解？虚拟 DOM 主要做了什么？虚拟 DOM 本身是什么？
React diff 算法的原理是什么？
React key 是干嘛用的？为什么要加？key 主要是解决哪一类问题的？
虚拟 DOM 的引入与直接操作原生 DOM 相比，哪一个效率更高，为什么
React 与 Vue 的 diff 算法有何不同？
八、虚拟DOM
对 React 和 Vue 的理解，它们的异同
在 React 中遍历的方法有哪些？
对 React SSR 的理解
为什么 React 要用 JSX ？
React 最新版本解决了什么问题，增加了哪些东西
React 数据持久化有什么实践吗？
React 设计思路，它的理念是什么？
React 中 props.children 和 React.Children 的区别
React 的状态提升是什么？使用场景有哪些？
同时引用这三个库 react.js、react-dom.js 和 babel.js 它们都有什么作用？
React.Children.map 和 js 的 map 有什么区别？
React 组件命名推荐的方式是哪个？
React 实现一个全局的 dialog
在 React 中页面重新加载时怎样保留数据？
React 必须使用 JSX 吗？
在 React 中怎么使用 async / await ？
可以使用 TypeScript 写 React 应用吗？怎么操作？
React 中 constructor 和 getInitialState 的区别？
React 的严格模式如何使用，有什么用处？
为什么使用 jsx 的组件中没有看到使用 react 却需要引入 react ？
HOC 相比 mixins 有什么优点？
React 中的高阶组件运用了什么设计模式？
九、其他
React
src 和 href 的区别
对 HTML 语义化的理解
script 标签中 defer 和 async 的区别
HTML5 有哪些更新
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
DOCTYPE(⽂档类型) 的作⽤
常⽤的 meta 标签有哪些
说一下 web worker
head 标签有什么作用，其中什么标签必不可少？
Canvas 和 SVG 的区别
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
img 的 srcset 属性的作⽤？
HTML5 的离线储存怎么使用，它的工作原理是什么
渐进增强和优雅降级之间的区别
文档声明（Doctype）和 <!Doctype html> 有何作用? 严格模式与混杂模式如何区分？它们有何意义?
label 的作用是什么？如何使用？
浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
说一下 HTML5 drag API
浏览器乱码的原因是什么？如何解决？
iframe 有那些优点和缺点？
HTML
什么是 XSS 攻击？
如何防御 XSS 攻击？
什么是 CSRF 攻击？
如何防御 CSRF 攻击？
有哪些可能引起前端安全的问题？
网络劫持有哪几种，如何防范？
什么是中间人攻击？如何防范中间人攻击？
一、浏览器安全
进程和线程的区别
进程之前的通信方式
死锁产生的原因？如果解决死锁的问题？
进程与线程的概念
如何实现浏览器内多个标签页之间的通信？
浏览器渲染进程的线程有哪些
僵尸进程和孤儿进程是什么？
对 Service Worker 的理解
二、进程与线程
对浏览器的缓存机制的理解
协商缓存和强缓存的区别
浏览器资源缓存的位置有哪些？
为什么需要浏览器缓存？
点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？
三、浏览器缓存
常见浏览器所用内核
对浏览器内核的理解
常见的浏览器内核比较
浏览器的主要组成部分
对浏览器的理解
四、浏览器组成
浏览器的渲染过程
浏览器渲染优化
渲染过程中遇到 JS 文件如何处理？
什么情况会阻塞渲染？
CSS 如何阻塞文档解析？
如何优化关键渲染路径？
什么是文档的预解析？
五、浏览器渲染原理
浏览器本地存储方式及使用场景
Cookie、LocalStorage、SessionStorage区别
前端储存的⽅式有哪些？
Cookie 有哪些字段，作用分别是什么
IndexedDB有哪些特点？
六、浏览器本地存储
什么是同源策略
如何解决跨越问题
正向代理和反向代理的区别
Nginx 的概念及其工作原理
七、浏览器同源策略
事件是什么？事件模型？
对事件委托的理解
事件委托的使用场景
对事件循环的理解
宏任务和微任务分别有哪些
Node 中的 Event Loop 和浏览器中的有什么区别？process.nextTick 执行顺序？
如何阻止事件冒泡
同步和异步的区别
什么是执行栈
事件触发的过程是怎样的
八、浏览器事件机制
V8的垃圾回收机制是怎样的
哪些操作会造成内存泄漏？
九、浏览器垃圾回收机制
浏览器原理
GET和POST的请求的区别
常见的HTTP请求方法
HTTP 1.0 和 HTTP 1.1 之间有哪些区别？
HTTP 1.1 和 HTTP 2.0 的区别
HTTP 和 HTTPS 协议的区别
当在浏览器中输入 Google.com 并且按下回车之后发生了什么？
HTTP 请求报文的是什么样的？
HTTP 响应报文的是什么样的？
与缓存相关的 HTTP 请求头有哪些
常见的 HTTP 请求头和响应头
HTTP 状态码 304 是多好还是少好
OPTIONS 请求方法及使用场景
对 keep-alive 的理解
HTTP 协议的优点和缺点
URL 有哪些组成部分
POST 和 PUT 请求的区别
GET 方法 URL 长度限制的原因
页面有多张图片，HTTP 是怎样的加载表现？
HTTP2 的头部压缩算法是怎样的？
说一下HTTP 3.0
HTTP协议的性能怎么样
一、HTTP协议
什么是 HTTPS 协议？
TLS / SSL 的工作原理
HTTPS 是如何保证安全的？
HTTPS通信（握手）过程
HTTPS的特点
数字证书是什么？
二、HTTPS协议
2XX (Success 成功状态码)
3XX (Redirection 重定向状态码)
4XX (Client Error 客户端错误状态码)
5XX (Server Error 服务器错误状态码)
常见的状态码
同样是重定向，307，303，302的区别？
三、HTTP状态码
DNS 协议是什么
DNS完整的查询过程
DNS同时使用TCP和UDP协议？
迭代查询与递归查询
DNS 记录和报文
四、DNS协议介绍
OSI七层模型
TCP/IP五层协议
五、网络模型
TCP 和 UDP 的概念及特点
TCP 和 UDP 的区别
TCP 和 UDP 的使用场景
TCP 的三次握手和四次挥手
TCP 的重传机制
TCP 的拥塞控制机制
TCP 的流量控制机制
TCP 的可靠传输机制
UDP 协议为什么不可靠？
TCP 粘包是怎么回事，如何处理？
为什么 UDP 不会粘包？
六、TCP与UDP
对 WebSocket 的理解
即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？
七、WebSocket
计算机网络
Vue的基本原理
双向数据绑定的原理
MVVM、MVC、MVP的区别
Computed 和 Watch 的区别
Computed 和 Methods 的区别
v-if 和 v-show 的区别
data 为什么是一个函数而不是对象
Vue 单页应用与多页应用的区别
Vue 的优点
对 SPA 单页面的理解，它的优缺点分别是什么？
Vue.use 的实现原理
使用 Object.defineProperty() 来进行数据劫持有什么缺点？
slot是什么？有什么作用？原理是什么？
如何保存页面的当前的状态
常见的事件修饰符及其作用
v-if、v-show、v-html 的原理
对keep-alive的理解，它是如何实现的，具体缓存的是什么？
Vue 中封装的数组方法有哪些，其如何实现页面更新
Vue template 到 render 的过程
Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？
Vue 如何监听对象或者数组某个属性的变化
Vue 模版编译原理
对 SSR 的理解
Vue 的性能优化有哪些
MVVM 的优缺点？
过滤器的作用，如何实现一个过滤器
v-model 是如何实现的，语法糖实际是什么？
$nextTick 原理及作用
Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？
简述 mixin、extends 的覆盖逻辑
子组件可以直接改变父组件的数据吗？
assets 和 static 的区别
delete 和 Vue.delete 删除数组的区别
什么是 mixin ？
template 和 jsx 的有什么分别？
Vue 初始化页面闪动问题
v-model 可以被用在自定义组件上吗？如果可以，如何使用？
描述下 Vue 自定义指令
Vue 是如何收集依赖的？
extend 有什么作用
mixin 和 mixins 区别
一、Vue 基础
说一下Vue的生命周期
created 和 mounted 的区别
一般在哪个生命周期请求异步数据
keep-alive 中的生命周期哪些
Vue 子组件和父组件执行顺序
二、生命周期
props / $emit
eventBus事件总线（$emit / $on）
依赖注入（provide / inject）
ref / $refs
$parent / $children
$attrs / $listeners
三、组件通信
路由的 hash 和 history 模式的区别
对前端路由的理解
如何获取页面的 hash 变化
$route 和 $router 的区别
params 和 query 的区别
Vue-Router 的懒加载如何实现
如何定义动态路由？如何获取传过来的动态参数？
Vue-router 路由钩子在生命周期的体现
Vue-router 跳转和 location.href 有什么区别
Vue-router 导航守卫有哪些
四、路由
Vuex 的原理
Vuex 中 action 和 mutation 的区别
Vuex 和 localStorage 的区别
为什么要用 Vuex 或者 Redux
Vuex 有哪几种属性？
Vuex 和 单纯的全局对象 有什么区别？
为什么 Vuex 的 mutation 中不能做异步操作？
Vuex 的严格模式是什么，有什么作用，如何开启？
如何在组件中批量使用 Vuex 的 getter 属性
如何在组件中重复使用 Vuex 的 mutation
五、Vuex
Vue3.0 有什么更新
defineProperty 和 proxy 的区别
Vue3.0 为什么要用 proxy ？
Vue 3.0 中的 Vue Composition API ？
Composition API 与 React Hook 很像，区别是什么
六、Vue 3.0
对 虚拟DOM 的理解？
DIFF算法 的原理
虚拟DOM 的解析过程
虚拟DOM 真的比 真实DOM 性能好吗
Vue 中 key 的作用
为什么要用 虚拟DOM
为什么不建议用 index 作为 key
七、虚拟DOM
Vue
收割机一面资料（超链=答案）
0 条评论
回复 删除
下一页
