前端问题集合

特别的专业术语

• 微格式是什么go
• 普通事件和事件绑定有什么区别?go
• 前端页面由哪三层构成，分别是什么？作用是什么？go
• 解释一下快排，用的什么思想，时间复杂度怎么计算go
• jsBridge的原理go

html

• html语义化中dl、dt、dd什么意思，ol、ul呢go
• div+css布局和table布局的区别go
• QUIRKS模式和STANDARDS模式的区别go
• 网页标准和标准制定机构重要性的理解go
• 超链接访问过后 hover 样式就不出现了go
• 行内元素设置padding和margin是否有效go
• Normalize.css简介及详解、使用go
• title与h1的区别、b和strong的区别、i和em的区别go
• 深入理解DOCTYPE的作用？严格模式和混杂模式？go
• HTML与XHTML有什么区别?go
• Web标准与W3C标准go
• iframe的优缺点有哪些？go
• 严格模式的限制
  • 变量必须声明后使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用with语句
  • 禁止this指向全局对象

基础

• JavaScript 继承 封装 多态实现及原理详解go

• 什么是面向对象go

• 事件循环机制eventLoop？JavaScript如何实现异步编程？go

• node与浏览器eventLoop的差异go

• 详解浏览器和Node的事件循环机制及区别go

• 理解js中执行上下文和执行栈go

• 理解词法作用域和动态作用域go

• this的原理以及几种不同的使用场景的取值go

• 作用域和作用域链go

• 原型和原型链？理解原型设计模式以及javascript中的原型规则？go

• 防抖和节流是什么，及其使用场景go

• 闭包是什么，及底层运行机制go

• 什么是深浅拷贝，且如何实现？实现函数能够深度克隆基本类型？go

• 前端的继承方式有那些go

• new的过程中，有哪些步骤go

• call、apply、bind的区别go

• 常用的数组方法go

• 什么是事件委托？什么是事件传播？事件流？事件的实现原理？go

• js数据类型go

• JS整数是怎么表示的？bigint最大安全整数？Number()的存储空间是多大？如果后台发送了一个超过最大自己的数字怎么办？go

• 判断javascript数据类型的方式，以及他们的优缺点，如何准确的判断数组类型？go

• typeof和instanceof的区别go

• 为什么typeof null是objectgo

• 理解堆栈溢出和内存泄漏的原理，如何防止go

• 基本类型对应的内置对象之间的装箱拆箱操作go

• js常用的设计模式go

• 0.1 + 0.2 === 0.3吗，为什么go

• null和undefined的区别go

• 原生js请求流程go

• var let const 有什么区别go

• 声明一个变量或常量的方式go

• new Number(1)和1是否全等go

• 如何获取安全的undefined值go

• JavaScript脚本延迟加载的方式有哪些go

• 对JSON的理解go

• 浅谈Canvas和SVG的区别go

• 传统轮询,长轮询,EventSource与WebSocketgo

• 微任务和宏任务区别go

• sort排序方法的实现原理go

• document.write和innerHTML区别go

• 高阶函数go

• ||和&&操作符的返回值go

• 如何获取对象非原型链上的属性go

• js为什么要进行变量提升，他导致了什么问题go

• 怎么取出数组出现最多的一项go

• 如何确定一个数在一个有序数组中的位置go

• 其他值到数字值的转换规则是什么go

• 实现一个你认为不错的继承方式go

• 实现一个插入排序go

• 实现一个add方法完成两个大数相加go

• js模块化的发展历程go

• ajax工作原理go

• __proto__是用来干嘛

  • __proto__是真正用来查找原型链去获取方法的对象
  • prototype是在用new创建对象时用来构建__proto__的对象

• 栈和队列的区别go

• 栈和堆的区别go

es6+

• es6的理解go
• Promise的实现原理go
• Promise.allSettled实现go
• 数组多种遍历方式go
• 箭头函数（与普通函数）go
• Object.is()与比较操作符=和的区别go
• map与weakmap的区别go
• ES6 代码转成 ES5 代码的实现思路是什么go
• Set和Map有什么区别go
• 说一下扩展运算符go
• decorator的作用，编译后是怎样的go
• symbol是什么，一般用来干什么的go
• for of和for in的区别go

ts

• ts泛型做什么的go
• infer关键字的作用?go

css

• css中的link和@import区别go
• css（层叠样式表）的工作原理是？go
• 前端的盒子模型go
• 怎么修改盒子
  • box-sizing: content-box / border-box / inherit
• css单位go
• 脱离文档流？go
• BFC实现原理，可以解决的问题，如何创建bfc，可使用css函数复用代码，实现特殊效果？go
• 解析一下浮动的工作原理，会引起什么问题go
• 介绍Flex布局，flex是什么属性的缩写？go
• 了解过Grid布局么go
• 移动端响应式布局怎么实现的go
• CSS怎么画一个大小为父元素宽度一半的正方形；CSS实现自适应正方形、等宽高比矩形
  1、子元素{ width: 50%; padding-bottom: 50%; }
  2、子元素{ width :1vm; height:1vm; }
• 移动端1px解决方案go
• 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要到@2x，@3x这种图片to
• fixed什么情况下会失效？go
• 实现水平垂直居中
• background-size: cover和contain区别go
• CSS样式隐藏元素？opacity、visibility和display的区别？go
• border-radius:50%和100%究竟有什么区别go
• css常见布局方式go
• CSS的新标准go
• 合理使用选择器go
• CSS的权重和优先级go
• 让不支持高级css属性(比如grid布局)的浏览器支持这些属性有什么办法？原理是什么？
• 手写省略号?go
• css优化和提高性能的方法有哪些go
• margin和padding的使用场景go
• margin重叠问题？如何解决？go
• 如何实现三栏布局go
• 移动端一个元素拖动，如何实现和优化
• 如何避免css全局污染go
• css module是的原理go
• 如果是一个弹性盒子，其中A子元素为flex为1，请问B子元素的宽度？
  • 当A元素的宽度小于多余的位置，B元素宽度保持不变
  • 当A元素的宽度超过多余的位置，B元素宽度会被挤压(最小到B元素内容的宽度，并有可能出现横向滚动条)

浏览器

• 浏览器是多线程吗？浏览器的运行和工作原理？go
• 为什么利用多个域名来存储网站资源会更有效？go
• 浏览器从输入URL到解析到页面的过程go
• 浏览器的渲染原理？浏览器运行机制？go
• 浏览器解析HTML代码的原理，以及构建DOM树的流程，如何将解析好的带有样式的DOM树进行绘制go
• 浏览器的回流与重绘？重绘重排区别，什么属性引起重绘，什么属性引起重排？go
• 什么是合成层go
• css会阻塞js加载？css性能让js变慢go
• 如何避免js阻止DOM树渲染？go
• 构建CSSOM树的时候会阻塞DOM树的构建吗？go
• CSS和JS加载对HTML解析有什么影响go
• css文件在加载的过程中出现了阻塞会怎样加载html文档10ms、加载css10s会出现什么现象go
• 为什么说用css实现动画比js动画性能好go
• DOM事件流的具体实现机制、不同浏览器的差异、事件代理？go
• 静态资源一般采取什么缓存策略？go
• 浏览器的并发请求数量？go
• http的理解
• 什么是http无状态？怎么解决的？go
• 线上缓存了，怎么处理？go
• HTTP缓存；浏览器的页面缓存机制；浏览器的缓存机制；浏览器缓存策略（强缓存、协商缓存）go
• HTTP常用的状态码及使用场景？go
• 简单请求和复杂请求区别go
• HTTPoptions预请求go
• http304状态码go
• 你知道302状态码是什么嘛？你平时浏览网页的过程中遇到过哪些302的场景？go
• 实现浏览器多标签页通信go
• HTTP 常用的请求方式，区别和用途？go
• HTTP get和post的区别？go
• get方法URL长度限制的原因go
• 你对计算机网络的认识怎么样go
• 三次握手和四次挥手go
• http和https区别go
• HTTPS加密的过程你了解吗go
• domain属性解决跨域。几种domain设置对跨域sh是否生效？go
• 跨域的理解go
• option预请求go
• CORS 是如何做的？对于 CORS ，Get 和 POST 有区别吗？go
• 前端如何独立解决跨域问题go
• 垃圾回收机制、内存泄露及内存管理go
• CSRF攻击原理、防范go
• XSS攻击的原理，如何防范go
• sql注入是什么，如何防范go
• jsonp安全go
• jsonp有什么优缺点go
• 如何生成tokengo
• js的本地存储？localstorage、sessionStorage、cookie区别？几种浏览器存储方法及其优缺点？go
• session存在哪go
• session存在内存里有什么后果
  • Session存在内存里随着用户的增多会导致内存溢出，且不能跨进程、跨机器共享，且重启进程后会导致Session丢失，所以Session通常会存在第三方缓存，比如Redis里。 Redis全球部署带来的问题在于，已登录的用户再次请求时，如果请求定位到不同集群的Redis，会导致登录状态失效。
  • 解决方案： 1. 不同集群Redis数据同步 1. 保证相同集群的Web服务请求同一集群的Redis
• 如何设置cookie过期go
• TCP队首阻塞、七层网络模型go
• 进程和线程go
• 小程序和web渲染区别，性能为什么好go
• axios拦截，怎么统计请求时长go
• electron底层有几个线程
• js web worker理解go
• TCP、UDP和HTTP的区别go
• 说一下http1.1的keep-alivego
• 说一下http1.1的http2.0的区别go
• 说一下http1.1的keep-alive与http2.0中多路复用有什么区别go
• paint 阶段是CPU还是GPU完成的
• 浏览器事件机制，e.target和e.currentTarget区别，addEventListener第三个参数go
• PWA的功能、实现、service worker怎么写；PWA使用过吗？serviceWorker的使用原理是啥go
• 在不支持set的浏览器上使用set有什么办法？polyfill原理是什么？go
• 为什么通常在发送数据埋点请求的时候使用的是1x1像素的透明gif图片？go
• https是如何保证安全性的go
• cdn是什么？他的原理是什么go
• dns如何查询域名go
• axios.CancelToke取消请求go
• 介绍下 HTTPS 中间人攻击go
• TLS/SSL的工作原理go
• 同样是重定向，307,303,302的区别go
• 301和302对于seo来说哪个更好go
• 进程与线程的概念go
• 渐进增强和优雅降级之间的区别go
• prefetch和preload的区别和使用场景go
• FP、FCP、FMP、LCP都是什么P？go
• TTI怎么计算go
• Etag的计算规则go
• 图片base64和外链的应用场景，各有什么优缺点go
• 一个tcp链接可以发多少个http请求go
• 如何解决大文件上传go
• 你说下http请求的refer字段？go
• ETag是什么，为什么使用Etag请求头go
• Expires和Cache-Controlgo

vue

• mvvm框架和mvc框架的差别go
• 如何理解vue2响应式原理？vue中的双向数据绑定原理（重点深入学习）？go
• 如何理解Vue的单向数据流？go
• 什么是发布/订阅模式、观察者模式go
• 什么是虚拟domgo
• vue的diff方法是怎么样的，key在其中有什么作用go
• 为什么vue的data要返回对象，不返回有啥问题go
• vue组件通信方式go
• computed和watch的区别go
• v-if和v-for优化级go
• v-if和v-show的区别go
• new Vue过程，vue生命周期详细解析go
• mixins原理go
• slots原理go
• vuex理解go
• Vue Router的模式、实现原理、路由原理、history模式与hash模式区别go
• 前端路由怎么实现go
• Vue2和3的区别，vue3有哪些优化go
• vue3 composition api解决了什么问题go
• vue-router有哪几种导航钩子？go
• vue频繁使用EventBus会造成什么问题go
• vue的$set,$delete性能go
• 在Vue中，设置全局变量的方式有哪些？go
• scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？
• v-model是什么？怎么使用？ vue中标签怎么绑定事件go
• 调用axios.post(‘api/user’)是进行的什么操作
• ajax/axios/fetch的区别？go
• 什么是RESTful API？怎么使用? go
• 利用路由跳到一个页面，都有哪些方法
• 说一下跳转路由组件怎样销毁
• 从一个路由页面跳转到另一个路由页面，我在前一个路由有一个请求还没有结束，该怎么办
• keep-alive原理，包裹下子组件如何更新状态go
• nextTick的实现go
• Vue 的 diff 时间复杂度从 O(n^3) 优化 到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？go
• Vue中子组件props接受父组件传递的值，能不能修改？go
• 为什么vuex的Mutations是同步go
• 首屏白屏优化方式go
• setup语法糖，composition API归纳go
• 路由懒加载原理go
• 路由执行顺序go
• template编译原理go
• vue-loader 工作原理go
• 前端路由刷新404问题go

React go

• 虚拟dom，区别realDom和VirtualDomgo

• React和vue 选型和优缺点、核心架构的区别go

• react setstate怎么获取到更新后的值go

• 异步函数中为什么setstate会立即更新go

• React中setState的执行机制，如何有效的管理状态go

• setState的同步/异步问题你怎么理解的？go

• setState之后发生了什么？go

• setState和hook区别go

• 为什么不直接更新statego

• React的事件底层实现机制go

• React的虚拟DOM和Diff算法的内部实现go

• React的Fiber工作原理，解决了什么问题，如何实现异步渲染go

• React Router和Vue Router的底层实现原理、动态加载实现原理go

• 可熟练应用React API、生命周期等，可应用HOC、rendeIprops、Hooks等高阶用法解决问题go

• 基于React的特性和原理，可以手动实现一个简单的React

  • 本文将分以下四个部分进行：
    1、实现 React.createElement && ReactDOM.render 方法
    2、实现组件Component 及生命周期函数
    3、实现 setState 的异步更新
    4、实现DOM Diff 算法

• react的函数式组件和类组件你一般用哪一个，它们两个的优缺点？go

• 状态管理库你用过哪些？分别都适用于什么场景go

• react生命周期，react16新增哪些生命周期，有什么作用，为什么去掉某些15的生命周期go

• react组件如何做性能优化，说说纯函数pureComponentgo

• 有用过hooks么？怎么看待hooks，它的原理是？go

• 了解过react最新一些动态么？time slice、suspense、server component能说说么go

• react复用组件的方式有哪几种go

• react事件绑定原理go

• react的key作用go

• redux和redux-saga的区别和原理go

• 项目中用到的saga-duck是什么东西go

• hooks为什么不能在if语句里用go

• useState和useEffect的实现原理go

• 异步渲染和旧版的diff的区别go

• 项目的技术栈怎么选型

• useMemo和useCallback的区别go

• RN容器和浏览器容器的区别go

• react的refsgo

• state和props区别go

• 了解jsx

• 受控组件和非受控组件的区别go

• 构造函数和getInitialState的区别go

• react特点、优点、限制go

• 浏览器无法读取jsx处理方法go

• 如何理解react中的一切皆组件

  • 组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。

• 区分有状态和无状态组件go

• react中的事件go

• 理解reduxgo

• 数据如何通过redux流动go

• reducer的作用go

• react路由go

• 常用hookgo

• react 里如何做动态加载go

• react.lazy的原理是什么go

环境

• commonjs与es6模块化区别go
• require与import的区别和使用go
• requirejs核心原理go
• 服务端渲染的原理？go
• 移动端300ms的延迟问题，为什么会有这个问题go
• 微前端怎么去实现css样式隔离的？平时怎么写css的？go
• 微前端怎么实现 js 隔离的，沙箱的实现方式有几种？go
• 如果让你统计上面的函数到底运行了多久，你怎么去统计？performance api？go
• webpack了解么？loader、plugin分别是干什么的。如何实现一个loadergo
• webpack如何优化打包速度，性能优化有哪些go
• 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面go
• webpack构建流程是什么go
• 讲讲tree-shaking原理go
• webpack5做了新突破go
• npm run dev打包过程go
• 介绍下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？go
• vite、snowpack可以比webpack快那么多，具体原理是？go
• nodejs是多线程吗?go
• nodejs事件循环机制go
• nodejs应用异常退出如何处理go
• node如何升级到websocketgo
• node的中间件原理go
• 如何添加header头
• 日志上报怎么做
• graphic schema怎么设计go
• 有哪些技术驱动业务的案例
• 怎么优化包和体积go
• 知道哪些性能指标go
• babel实现转码的过程go
• babel工作流程go
• wepback如何实现动态加载，wepback能动态加载require引入的模块吗go
• require引入的模块webpack能做tree sharking吗go
• import和require导入的区别是什么go
• require有什么性能问题
• 组件库如何做按需加载go
• ts中interface和type的区别go
• ESM和cjs的区别go
• 你说下express和koa的区别？
• 后端怎么实现的跨域？除了用koa-cors这个包？你说下具体实现？

算法题

• 前端优化的解决方案go
• 怎么去统计的某一个页面用户的留存时间，你怎么知道用户跳去其它页面或者关掉了页面
• 实现树的广度优先遍历，深度优先遍历go
• 如何在保证页面运行流畅的情况下处理海量数据
• 时间分片， 批处理，Buffer 缓存，虚拟滚动，Web Worker 后台进程
• 链表
• 描述链表的反转怎样实现，复杂度多少
• 怎么判断链表有环
• 字符串
• 数组问题
• 二叉树
• 二叉树的前、中、后序遍历的顺序go
• 排序算法
• 二分查找
• 动态规划

1，时间复杂度
2，位运算
3，左移 <<
4，算数右移 >>
5，按位操作
6，排序
7，冒泡排序
8，插入排序
9，选择排序
10，归并排序
11，快排
12，堆排序
13，系统自带排序实现
14，链表
15，二叉树的先序，中序，后序遍历
16，递归实现
17，非递归实现
18，中序遍历的前驱后继节点
19，树的深度
20，动态规划
21，斐波那契数列
22，背包问题
23，最长递增子序列
24，字符串相关

手写题

• 手写防抖
• 手写冒泡和快排，并尽量多写一些排序算法]
• 手写发布订阅
• 手写call、apply、bind
• 手写new
• 实现instanceofgo
• 实现for of遍历
• 实现链表的添加删除，复杂度多少

其他

• 小程序底层运行实现原理了解多少
• 前端监控的理解
• 埋点上报埋点
• 业务埋点和错误上报有什么不同
• pm2的原理，有哪些模式
• docker和k8s有了解过吗
• DNS迭代和递归区别
• 页面白屏，分析原因