开发工程师面试自我介绍_30道经典面试题，靠它我在一线拿到了20k的前端开发工程师岗位...

题 1 ：什么是防抖和节流？有什么区别？如何实现？

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算是间

思路：每次触发事件时都取消之前的延时调用方法

节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率

思路：每次触发事件时都判断当前是否有等待执行的延时函数

题 2 ：get请求传参长度的误区、get和post请求在缓存方面的区别误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。为了明确这个概念，我们必须再次强调下面几点:

HTTP 协议未规定 GET 和 POST 的长度限制
GET 的最大长度显示是因为浏览器和 web 服务器限制了 URI 的长度
不同的浏览器和 WEB 服务器，限制的最大长度不一样
要支持 IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度 8182byte

补充补充一个 get 和 post 在缓存方面的区别：

get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

题 3：模块化发展历程

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

使用 visibility替换 display: none，因为前者只会引起重绘，后者会引发回流(改变了布局)把 DOM 离线后修改，比如：先把 DOM 给 display:none(有一次 Reflow)，然后你修改100次，然后再把它显示出来不要把 DOM 结点的属性值放在一个循环里当成循环里的变量

 for(let i = 0; i < 1000; i++) {  // 获取 offsetTop 会导致回流，因为需要去获取正确的值  console.log(document.querySelector('.test').style.offsetTop) }

不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
CSS 选择符从右往左匹配查找，避免 DOM 深度过深
将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于 video标签，浏览器会自动将该节点变为图层。

题 19：写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

vue 和 react 都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在 vue 的 diff函数中(建议先了解一下 diff 算法过程)。

在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的 key 去对比旧节点数组中的 key，从而找到相应的节点(这里对应的是一个 key => index 的 map 映射)。如果没找到就认为是一个新增节点。而如果没有 key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言，map 映射的速度更快。

题 20：React 中 setState 什么时候是同步的，什么时候是异步的？

在React中，如果是由React引发的事件处理(比如通过onClick引发的事件处理)，调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。原因：在 React 的 setState 函数实现中，会根据一个变量isBatchingUpdates 判断是直接更新 this.state 还是放到队列中回头再说，而 isBatchingUpdates 默认是 false，也就表示 setState 会同步更新 this.state，但是，有一个函数 batchedUpdates，这个函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会调用这个 batchedUpdates，造成的后果，就是由 React 控制的事件处理过程 setState 不会同步更新 this.state。

题 21：为什么虚拟 dom 会提高性能？

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。具体实现步骤如下：1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中。2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。把 2 所记录的差异应用到步骤 1 所构建的真正的DOM树上，视图就更新了。

题 22：清除浮动的方式有哪些？比较好的是哪一种？

常用的一般为三种：.clearfix, clear:both,overflow:hidden。比较好是 .clearfix，伪元素万金油版本，后两者有局限性。clear:both：若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷overflow:hidden：这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷

题 23：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景结构：

display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击

opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击继承：display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。

visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大

visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容

opacity: 0 ：修改元素会造成重绘，性能消耗较少联系：它们都能让元素不可见

题 24：css sprite 是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。

优点：

减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

题 25：link 与 @import 的区别

link是 HTML 方式， @import是 CSS 方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

题 26：容器包含若干浮动元素时如何清理浮动

容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文(见块级可视化上下文部分)
设置容器元素伪元素进行清理推荐的清理浮动方法

题 27：display,float,position 的关系

如果display为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框。
否则，如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整。
否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整。
否则，如果元素是根元素，display 根据下表进行调整。
其他情况下 display 的值为指定值总结起来：绝对定位、浮动、根元素都需要调整display。

题 28：JS 的四种设计模式

工厂模式：简单的工厂模式可以理解为解决多个相似的问题；

单例模式：只能被实例化(构造函数给实例添加属性与方法)一次；

沙箱模式：将一些函数放到自执行函数里面，但要用闭包暴露接口，用变量接收暴露的接口，再调用里面的值，否则无法使用里面的值；

发布者订阅模式：就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送，代码实现逻辑是用数组存储订阅者, 发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组。

题 29：下面代码的输出是什么?

 const obj = { 1: "a", 2: "b", 3: "c" }; const set = new Set([1, 2, 3, 4, 5]);  obj.hasOwnProperty("1"); obj.hasOwnProperty(1); set.has("1"); set.has(1);

truetruefalsetrue所有对象键(不包括Symbols)都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么obj.hasOwnProperty('1')也返回true。上面的说法不适用于Set。在我们的Set中没有“1”：set.has('1')返回false。它有数字类型1，set.has(1)返回true。

题 30：下面代码的输出是什么？

 // example 1 var a={}, b='123', c=123; a[b]='b'; a[c]='c'; console.log(a[b]);  --------------------- // example 2 var a={}, b=Symbol('123'), c=Symbol('123'); a[b]='b'; a[c]='c'; console.log(a[b]);  --------------------- // example 3 var a={}, b={key:'123'}, c={key:'456'}; a[b]='b'; a[c]='c'; console.log(a[b]);

这题考察的是对象的键名的转换。

对象的键名只能是字符串和 Symbol 类型。
其他类型的键名会被转换成字符串类型。
对象转字符串默认会调用 toString 方法。

 // example 1 var a={}, b='123', c=123; a[b]='b'; // c 的键名会被转换成字符串'123'，这里会把 b 覆盖掉。 a[c]='c'; // 输出 c console.log(a[b]);   // example 2 var a={}, b=Symbol('123'), c=Symbol('123'); // b 是 Symbol 类型，不需要转换。 a[b]='b'; // c 是 Symbol 类型，不需要转换。任何一个 Symbol 类型的值都是不相等的，所以不会覆盖掉 b。 a[c]='c'; // 输出 b console.log(a[b]);   // example 3 var a={}, b={key:'123'}, c={key:'456'}; // b 不是字符串也不是 Symbol 类型，需要转换成字符串。 // 对象类型会调用 toString 方法转换成字符串 [object Object]。 a[b]='b'; // c 不是字符串也不是 Symbol 类型，需要转换成字符串。 // 对象类型会调用 toString 方法转换成字符串 [object Object]。这里会把 b 覆盖掉。 a[c]='c'; // 输出 c console.log(a[b]);

这里小编是一个有着5年工作经验的前端工程师，关于web前端有许多的技术干货，包括但不限于各大厂的最新面试题系列、游戏项目源码、最新前端路线等。需要的伙伴可以私信我，

发送【前端资料】

就可以获取领取地址，免费送给大家。对于学习web前端有任何问题(学习方法，学习效率，如何就业)都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！