前端常见面试题总结

• 【Q001】网站开发中，如何实现图片的懒加载
• 【Q003】什么是防抖和节流，他们的应用场景有哪些
• 【Q008】当新入职一家公司时，如何快速搭建开发环境并让应用跑起来
• 【Q009】如何实现一个元素的水平垂直居中
• 【Q010】了解 React 中的 ErrorBoundary 吗，它有那些使用场景
• 【Q011】vue3.0 中为什么要使用 Proxy，它相比以前的实现方式有什么改进
• 【Q013】有没有使用过 react hooks，它带来了那些便利
• 【Q014】如何使用 react hooks 实现一个计数器的组件
• 【Q017】css 如何实现左侧固定300px，右侧自适应的布局
• 【Q019】浏览器中如何实现剪切板复制内容的功能
• 【Q021】React 中，cloneElement 与 createElement 各是什么，有什么区别
• 【Q022】如何实现一个简单的 Promise
• 【Q027】在前端开发中，如何获取浏览器的唯一标识
• 【Q031】js 中如何实现 bind
• 【Q032】js 中什么是 softbind，如何实现
• 【Q034】如何实现一个 loading 动画
• 【Q038】使用 react 实现一个通用的 message 组件
• 【Q066】如何使用 react hooks 实现 useFetch 请求数据
• 【Q067】react 如何使用 render prop component 请求数据
• 【Q068】React Portal 有哪些使用场景
• 【Q069】什么是 virtual DOM，它的引入带了什么好处
• 【Q071】react 与 vue 数组中 key 的作用是什么
• 【Q072】webpack 是用来做什么的，原理是什么
• 【Q073】webpack 中的 loader 的作用是什么
• 【Q074】有没有自己写过一个webpack的loader
• 【Q075】webpack 中plugin的作用是什么，有没有自己写过
• 【Q077】使用 webpack 时如何优化项目体积
• 【Q078】什么是 HMR，原理是什么
• 【Q080】使用 webpack 打包时，如何更好地利用 long term cache
• 【Q082】随着 http2 的发展，webpack 有没有更好的打包方案
• 【Q083】网站性能优化都有哪些点
• 【Q086】webpack 中 tree shaking 的原理是什么
• 【Q088】如何实现 promise.map，限制 promise 并发数
• 【Q089】vue 中 v-if 和 v-show 的区别是什么
• 【Q090】vue 中 computed 的原理是什么
• 【Q091】vue-loader 的实现原理是什么
• 【Q092】react 中 ref 是干什么用的，有哪些使用场景
• 【Q094】你们的前端代码上线部署一次需要多长时间，需要人为干预吗
• 【Q100】如何使用 react/vue 实现一个 message API
• 【Q102】有没有用 npm 发布过 package，如何发布
• 【Q118】有没有读过 koa 的源码，什么是洋葱模型呢
• 【Q123】如何监控文件的变动
• 【Q126】localhost:3000 与 localhost:5000 的 cookie 信息是否共享
• 【Q137】js 代码压缩的原理是什么
• 【Q139】在 Node 应用中如何利用多核心CPU的优势
• 【Q140】Node 中 cluster 的原理是什么
• 【Q142】react hooks 中如何模拟 componentDidMount
• 【Q146】如果使用 SSR，可以在 created/componentWillMount 中访问 localStorage 吗
• 【Q148】关于 JSON，以下代码输出什么
• 【Q151】react hooks 如何替代或部分替代 redux 功能
• 【Q152】如何实现一个 react hook，你有没有自己写过一个
• 【Q153】权限设计中的 RABC 是指什么
• 【Q154】在 react/vue 中数组是否可以以在数组中的次序为 key
• 【Q156】如何进行代码质量检测
• 【Q159】什么是 CSRF 攻击
• 【Q160】如何设置一个 cookie
• 【Q161】如何删除一个 cookie
• 【Q164】React 中 fiber 是用来做什么的
• 【Q168】在 js 中如何把类数组转化为数组
• 【Q169】Array(100).map(x => 1) 结果是多少
• 【Q175】如何使用 css 写一个魔方
• 【Q177】如何在 url 中传递数组
• 【Q178】如何使用 css 写一个有 3D 效果的立方体
• 【Q181】如何用一行代码实现 compose 函数
• 【Q184】有没有使用过 css variable，它解决了哪些问题
• 【Q185】谈谈你对 styled-component 的看法
• 【Q189】performance API 中什么指标可以衡量首屏时间
• 【Q190】使用 CSS 如何画一个三角形
• 【Q191】什么是 Open Graph 协议，用来做什么
• 【Q192】简述你们前端项目中资源的缓存配置策略
• 【Q193】如何加速 npm install
• 【Q194】npm i 与 npm ci 的区别是什么
• 【Q195】package-lock.json 有什么作用，如果项目中没有它会怎么样，举例说明
• 【Q196】前端中遇到过处理二进制的场景吗
• 【Q197】什么是 TypedArray
• 【Q198】如何实现类似 lodash.get 函数
• 【Q200】前端如何进行多分支部署
• 【Q201】js 中什么是可选链操作符，如何访问数组
• 【Q202】如何实现一个深拷贝 (cloneDeep)
• 【Q203】对于已经 import 但未实际使用的模块使用 webpack 还会对它打包吗？
• 【Q204】Node 中如何判断一个路径是文件还是文件夹
• 【Q205】Code Splitting 的原理是什么
• 【Q210】如何判断当前环境是移动端还是PC端
• 【Q211】React hooks 中 useCallback 的使用场景是什么
• 【Q214】input 中监听值的变化是在监听什么事件
• 【Q215】什么是跨域，如何解决跨域问题
• 【Q220】请简述一下 event loop
• 【Q228】如何实现一个 flatMap 函数 (头条)
• 【Q230】如何裁剪图片 (情景：选择头像)
• 【Q235】useEffect 中如何使用 async/await
• 【Q236】主域名的 SEO 是否比二级域名要更好
• 【Q237】以下代码，koa 会返回什么数据
• 【Q239】Node 如何进行进程间通信
• 【Q240】如何实现一个 async/await
• 【Q241】如何使用 async/await 实现 Promise.all 的效果
• 【Q242】有没有用过 continuous local storage，用在了哪里
• 【Q243】有没有遇到 js 捕捉不到异常堆栈信息的情况
• 【Q244】Promise 在异步资源的生命周期 (async_hooks) 中是如何被销毁的
• 【Q245】有没有用过 Promise.allSettled() ，它是干什么的
• 【Q247】在 node 中如何监听异步资源的生命周期
• 【Q248】测试中 TDD 与 BDD 有什么区别
• 【Q249】使用 js 实现一个 lru cache
• 【Q250】刚刚启动了一个服务，如何知道这个服务对应的端口号是多少
• 【Q251】node --max-old-space-size=4096 是什么意思
• 【Q253】cookie 有哪些字段
• 【Q255】图片防盗链原理是什么
• 【Q256】如何理解 Node 的异步非阻塞IO
• 【Q263】你们项目的测试覆盖率是怎么做的
• 【Q264】当 Node 应用发生 gc 时，如何监控
• 【Q265】Node 应用中如何查看 gc 的日志
• 【Q266】bind 与 call/apply 的区别是什么
• 【Q267】CSP 是干什么用的了
• 【Q268】你如何看待 serverless
• 【Q269】什么是 XSS 攻击，如何避免
• 【Q271】react hooks 的原理是什么
• 【Q272】如何查看你们 JS 项目中应采用的 node 版本
• 【Q274】如何获取你们 Node 项目的 cpu profile 快照
• 【Q276】如何查看 node_modules(某一文件夹) 的体积有多大
• 【Q277】redux 解决什么问题，还有什么其他方案
• 【Q278】为什么不能在表达式里面定义 react hooks
• 【Q279】display: inline 的元素设置 margin 和 padding 会生效吗
• 【Q280】html 的默认 display 属性是多少
• 【Q281】响应式布局需要注意哪一些
• 【Q282】对一个非定长宽的块状元素如何做垂直水平居中
• 【Q284】prefetch 与 preload 的区别是什么
• 【Q285】有没有做过裁剪头像图片的需求，如何实现
• 【Q289】Node 中循环引用会发生什么
• 【Q290】Node 中 require 时发生了什么
• 【Q291】简述 node/v8 中的垃圾回收机制
• 【Q292】peerDependency 是为了解决什么问题
• 【Q293】semver 指什么，试图解释一下
• 【Q294】optionalDependencies 的使用场景是什么
• 【Q295】fetch 中 crendentials 指什么意思，可以取什么值
• 【Q296】package-lock.json 与 yarn.lock 有什么区别
• 【Q300】node 中 exec，fork 与 spawn 有何区别
• 【Q305】如何删除项目中没有使用到的 package
• 【Q306】如何实现左右固定，中间自适应布局
• 【Q307】如何实现表格单双行条纹样式
• 【Q308】node 中 dns.resolve 及 dns.lookup 有什么区别
• 【Q309】简述下 css specificity
• 【Q310】Node 中 require json 文件数据时，如何当文件更新时，重新 require
• 【Q311】当 cookie 没有设置 maxage 时，cookie 会存在多久
• 【Q312】如何实现 Promise.race
• 【Q313】在浏览器中如何监听剪切板中内容
• 【Q315】'+' 与 '~' 选择器有什么不同
• 【Q316】node 中如何查看函数异步调用栈
• 【Q317】有哪些 css 属性不能展示动画效果
• 【Q319】css 动画与 js 动画哪个性能更好
• 【Q321】 css 中属性选择器及类选择器的权重哪个高
• 【Q322】有没有接触过 fs-extra，它是解决什么问题的
• 【Q324】为什么会发生样式抖动
• 【Q334】position: sticky 如何工作，适用于哪些场景
• 【Q335】什么是层叠上下文 (stacking contect)，谈谈对它的理解
• 【Q336】你用 css 实现过什么不错的效果
• 【Q337】你做前端有多少时间花在写 css 上
• 【Q338】js 中在 new 的时候发生了什么
• 【Q339】伪类与伪元素有什么区别
• 【Q347】在 node 中如何开启 https
• 【Q348】node 中 module.exports 与 exports 有什么区别
• 【Q349】如何把 json 数据转化为 demo.json 并下载文件
• 【Q350】如何实现一个 timeout 的中间件
• 【Q351】如何得知目前 node 版本的 v8 版本号
• 【Q354】在 node 中如何判断一个对象是 stream
• 【Q355】什么是 Iterable 对象，与 Array 有什么区别
• 【Q356】在 node 端如何向服务器上传文件
• 【Q357】js 如何全部替代一个子串为另一个子串
• 【Q362】js 动画和 css 动画那个性能比较好
• 【Q364】css 如何匹配前N个子元素及最后N个子元素
• 【Q365】node 中 nextTick 与 setTimeout 有什么区别
• 【Q367】redux 和 mobx 有什么不同
• 【Q368】关于 React hooks 的 caputre value，以下输出多少
• 【Q369】在 React 项目中 immutable 是优化性能的
• 【Q370】如何使用 CSS 实现网站的暗黑模式 (Dark Mode)
• 【Q371】在 redux 中如何发送请求
• 【Q373】如何为你们的前端项目选择状态管理器
• 【Q374】简单介绍 requestIdleCallback 及使用场景
• 【Q375】在 redux 中如何写一个记录状态变更的日志插件
• 【Q377】在 js 中如何实现继承
• 【Q378】在 setState 时发生了什么
• 【Q380】如何设计一个UI组件库
• 【Q384】python 中的 self 与 javascript 中的 this 有何不同
• 【Q386】什么是浏览器的关键渲染路径
• 【Q389】以下输出顺序多少 (setTimeout 与 promise 顺序)
• 【Q399】实现一个 once 函数，记忆返回结果只执行一次
• 【Q402】如何实现一个函数 isPlainObject 判断是否为纯对象
• 【Q403】React 中的 dom diff 算法如何从 O(n3) 优化到 O(n) 的
• 【Q404】在 React 应用中如何排查性能问题
• 【Q405】你使用过哪些前端性能分析工具
• 【Q408】React 17.0 有什么变化
• 【Q411】如何找到当前页面出现次数最多的HTML标签
• 【Q412】对以下字符进行压缩编码
• 【Q413】如何在生产环境部署一个 Node 应用
• 【Q415】你有没有重客户端状态前端应用的经验
• 【Q421】如何实现无限累加的一个函数
• 【Q422】JS 如何实现一个同步的 sleep 函数
• 【Q423】什么是安全的正则表达式
• 【Q425】什么是层叠上下文 (stacking context)
• 【Q428】在 nginx 中如何配置负载均衡
• 【Q429】实现一个函数用来解析 URL 的 querystring
• 【Q430】如何把 DOM 转化为图片
• 【Q435】JS 如何实现一个 sleep/delay 函数
• 【Q436】如何实现一个 sample 函数，从数组中随机取一个元素
• 【Q437】浏览器的剪切板中如何监听复制事件
• 【Q439】JSONP 的原理是什么，如何实现
• 【Q440】实现一个函数用来对 URL 的 querystring 进行编码
• 【Q441】v8 是如何执行一段 JS 代码的
• 【Q443】实现一个数组扁平化的函数 flatten
• 【Q444】介绍 CSS 隐藏页面中某个元素的几种方法
• 【Q445】实现一个数组去重函数 unique
• 【Q446】如何实现页面文本不可复制
• 【Q447】如何实现一个数组洗牌函数 shuffle
• 【Q448】异步加载 JS 脚本时，async 与 defer 有何区别
• 【Q449】vue3 中，如何监听数组的变化
• 【Q450】Vue 中 nextTick 的实现原理是什么
• 【Q452】现代框架如 React、Vue 相比原生开发有什么优势
• 【Q453】typeof 与 instanceof 的区别
• 【Q454】load 事件与 DomContentLoaded 事件的先后顺序
• 【Q455】React/Vue 中的 router 实现原理如何
• 【Q461】如何计算白屏时间和首屏时间
• 【Q462】JS 如何翻转一个字符串
• 【Q463】前端如何实现文件上传功能
• 【Q464】什么是重排重绘，如何减少重拍重绘
• 【Q465】css 如何实现响应式布局大屏幕三等分、中屏幕二等分、小屏幕一等分
• 【Q466】在 SSR 项目中如何判断当前环境时服务器端还是浏览器端
• 【Q467】前端打包时 cjs、es、umd 模块有何不同
• 【Q468】前端开发中如何进行多主题配置
• 【Q469】HTML 中的 input 标签有哪些 type
• 【Q470】什么是 Data URL
• 【Q471】如何自定义滚动条的样式
• 【Q472】什么是 HTML 的实体编码 (HTML Entity Encode)
• 【Q473】关于模块化，什么是 amd 和 umd
• 【Q474】简单介绍以下浏览器中的 module
• 【Q475】什么是 commonjs2
• 【Q476】textarea 如何禁止拉伸
• 【Q477】在 Canvas 中如何处理跨域的图片
• 【Q478】如何实现容器中子元素三个三列布局，子元素两个则两列布局
• 【Q479】前端上传文件时如何读取文件内容
• 【Q480】你最喜欢的三个 js 库是什么
• 【Q481】网站设置字体时，如何设置优先使用系统默认字体
• 【Q482】现代化前端框架中如何进行调试
• 【Q484】express 中间件的原理是什么
• 【Q485】写 CSS 时如何避免命名样式冲突
• 【Q486】什么是前端工程化
• 【Q489】如何实现一个函数 lodash.merge
• 【Q490】如何实现一个 promise.any
• 【Q491】如何实现一个 Promise.all
• 【Q492】CSS 如何设置方格背景
• 【Q493】如何取消请求的发送
• 【Q494】如何过滤数组中的 falsy value
• 【Q495】如何把一个数组随机打乱
• 【Q496】如何更好地给元素设置 z-index
• 【Q497】React.setState 是同步还是异步的
• 【Q498】什么是服务器渲染 (SSR)
• 【Q499】在 React 中如何实现代码分割 (code splitting)
• 【Q500】在 React 中如何做好性能优化
• 【Q501】在 React 中发现状态更新时卡顿，此时应该如何定位及优化
• 【Q502】当多次重复点击按钮时，以下三个 Heading 是如何渲染的
• 【Q503】Core Web Vitals 是什么，它有哪些指标
• 【Q504】画一个 100x100 的方框，其中文字可以正常换行，文字过多超过方框显示滚动条
• 【Q505】JS 中基础数据类型有哪些
• 【Q506】Grid 布局如何实现类似 flex: row-reverse
• 【Q507】如何创建一个数组大小为100，每个值都为0的数组
• 【Q508】dependencies 与 devDependencies 有何区别
• 【Q509】如何确认你们项目是否依赖某一个依赖项
• 【Q510】当你引入某一个依赖项时，你引入的是该依赖下的哪一个文件
• 【Q511】npm workspaces 解决了什么问题
• 【Q512】如何检测并避免循环依赖
• 【Q513】有没有使用过 async/await，他们的原理是什么
• 【Q514】什么是闭包，闭包的应用有哪些地方
• 【Q515】一道异步代码执行输出顺序问题
• 【Q516】HTML 标签有哪些行内元素
• 【Q517】CSS如何设置一行超出显示省略号
• 【Q518】CSS如何设置多行超出显示省略号
• 【Q519】如何发布一个全局可执行命令的 npm package
• 【Q520】如何为一个项目指定 node 版本号
• 【Q521】什么是 semver，~1.2.3 与 ^1.2.3 的版本号范围是多少
• 【Q522】package.json 中 main/module/browser/exports 字段有何区别
• 【Q523】npm publish 时 npm script 的生命周期
• 【Q524】前端项目每次 npm install 之后需要执行一些处理工作，应该怎么办
• 【Q525】flex 布局中 order 有何作用
• 【Q526】flex 布局中 align-content 与 align-items 有何区别
• 【Q527】解构赋值一个数组，a 取第一项默认值为 3，c取剩下的值组成数组
• 【Q528】解构赋值以下对象，他们的值是多少
• 【Q529】Map 与 WeakMap 有何区别
• 【Q530】HTML 中有哪些语义化标签
• 【Q531】子元素垂直居中，并且长度为父容器一半的正方形
• 【Q532】简述 css 中 position 的值
• 【Q533】什么是 BFC
• 【Q534】CSS 如何实现固定长宽比的元素
• 【Q535】rem、em、vw、wh 的值各是什么意思
• 【Q536】normalize.css 与 reset.css 又何区别
• 【Q537】line-height 的值分别取 [2, 2em, 200%] 有什么区别?
• 【Q538】你是如何保障你们项目质量的
• 【Q539】Javascript 数组中有那些方法可以改变自身，那些不可以
• 【Q540】如何判断一个数组是否包含某个值
• 【Q541】如何判断字符串包含某个子串
• 【Q542】DOM 中如何阻止事件默认行为，如何判断事件否可阻止？
• 【Q543】什么是事件冒泡和事件捕获
• 【Q544】什么是事件委托，e.currentTarget 与 e.target 有何区别
• 【Q545】关于事件捕获和冒泡，以下代码输出多少
• 【Q546】浏览器中 cookie 有哪些字段
• 【Q547】某元素的 fontSize: 2rem; lineHeight: 1.5em; 此时 lineHeight 为多少像素
• 【Q548】DOM 中 Element 与 Node 有何区别
• 【Q549】如何判断某一个值是数组
• 【Q550】简述 Object.defineProperty
• 【Q551】Object.keys 与 Object.getOwnPropertyNames() 有何区别
• 【Q552】关于 setState 以下代码的输出
• 【Q553】Grid 布局的优势在哪里
• 【Q554】SameSite Cookie 有哪些值，是如何预防 CSRF 攻击的
• 【Q555】sessionStorage与localStorage有何区别
• 【Q556】如何设置一个支持过期时间的 localStorage
• 【Q557】如何实现三列均分布局
• 【Q558】如何统计当前页面出现的所有标签
• 【Q559】如何监听 localStorage 的变动
• 【Q560】Data URL 的应用场景
• 【Q561】实现一个 inherits 函数进行继承
• 【Q562】WeakMap 与垃圾回收有何关系
• 【Q563】什么是媒体查询，JS 可以监听媒体查询吗
• 【Q564】z-index: 999 元素一定会置于 z-index: 0 元素之上吗
• 【Q565】浏览器中事件有哪些属性与方法
• 【Q566】关于块级作用域，以下代码输出多少，在何时间输出
• 【Q567】如何逆序一个字符串
• 【Q568】为何 0.1+0.2 不等于 0.3，应如何做相等比较
• 【Q569】关于 this 与包装对象，以下输出多少
• 【Q570】浏览器中如何读取二进制信息
• 【Q571】关于类型转化，判断以下代码输出
• 【Q572】关于暂时性死域，判断以下代码输出
• 【Q573】关于词法作用域，判断以下代码输出
• 【Q574】关于 this，判断以下代码输出
• 【Q575】关于 new，判断以下代码输出
• 【Q576】如何正确得知某张图片的 MIME 格式
• 【Q577】关于简单的事件循环，判断以下代码输出
• 【Q581】箭头函数和普通函数的区别
• 【Q582】什么是 URL 编码 (URL Encode)
• 【Q584】现代前端应用应如何配置 HTTP 缓存机制
• 【Q587】使用 webpack 如何分包
• 【Q590】React 中什么是合成事件
• 【Q591】什么是纯函数
• 【Q592】前端项目中有哪些副作用
• 【Q593】React/Vue 中受控组件与不受控组件的区别
• 【Q594】给数字添加千位符
• 【Q595】React 中监听 input 的 onChange 事件的原生事件是什么
• 【Q596】在浏览器中点击 a 标签保存为文件如何做
• 【Q597】引入 BFF 层的优势在哪里
• 【Q598】如何实现一个深比较的函数 deepEqual
• 【Q599】Object.is 与全等运算符(===)有何区别
• 【Q600】在 React hooks 中如何模拟 forceUpdate
• 【Q602】如何把对象转化为 key/value 的二维数组
• 【Q603】在 JS 中如何监听 Object 某个属性值的变化
• 【Q604】判断以下路由，将会响应哪一个路由
• 【Q605】js 中什么是 AsyncIterable
• 【Q606】关于事件循环，仅有 Promise，判断以下代码输出
• 【Q607】关于字符串编码解码进阶
• 【Q608】请简介 CSS 的盒模型