100道最常见的校招前端面试题（更新中）

末蓝、 2022-05-15 06:42 1222阅读 0赞

1.  **Http协议中Post和Get方法的区别？**  
    ![在这里插入图片描述][70]  
    Get请求比Post执行更有效率，是因为浏览器在发送Post请求时，会先将请求头发送给服务器确认，服务器返回100 continue响应后，浏览器才开始发送数据。
2.  **如何利用CSS实现三角形？**  
    将一个div的宽度和高度，都设置为0，设置div四个边框的宽度，并利用transparent属性隐藏三个边框，只留下一个边框，就可得到一个三角形？如果是直角三角形，则隐藏2个相邻的边框，剩下2个相邻的边框就拼成了一个直角三角形。
3.  **常见的跨域技术有哪些？**  
    通过img标签的src属性  
    通过JSONP动态插入script标签，执行回调函数  
    通过跨域资源共享（CORS）发送AJAX请求，普通跨域请求只需在服务端设置`Access-Control-Allow-Origin`即可。而带有cookie的跨域请求，还需在服务端设置`Access-Control-Allow-Credentials`，且前端设置xhr对象的`withCredentials`属性为`true`。  
    通过配置代理服务器，如nginx反向代理proxy\_pass字段，nodejs中间件，webpackserver的proxy属性等。  
    通过websocket进行跨域  
    通过HTML5API PostMessage实现多页面，多窗口以及iframe之间的的通信
4.  **如何利用CSS2实现元素水平垂直居中？**  
    利用绝对定位 + `margin: auto`实现，设置top left bottom right为0  
    利用绝对定位，设置top left为50%，并设置`transform： translate（-50%，-50%）`实现  
    行内元素，使用text-align: center，并将`line-height`值设置为父元素高度  
    利用flex进行布局，设置`align-items: center;` `justify-content: center;`实现居中  
    将元素设置为table-cell，使用`vertical-align: middle` 以及`text-align: center`实现居中
5.  **rem和em的区别？**  
    rem是根据html根元素的字体大小进行换算的，而em是根据父元素的字体大小进行换算的
6.  **闭包是什么？有什么用？**  
    闭包是指有权访问另一函数作用域中变量的函数，创建闭包的常用方式就是在一个函数内部定义另一个函数。  
    闭包可以创建私有变量和方法，为setTimeout等方法传递参数等  
    闭包的缺点是，其让变量一直保存在内存中，容易造成内存泄露
7.  **图像懒加载的原理是什么？**  
    页面加载时，将图片加载的链接，保存在img标签的自定义属性中，src属性为空，并监听窗口的scroll事件。当img标签出现在视口中时，利用js将图片加载编写填写至src属性中，实现动态加载图片。
8.  **git pull 和 git fetch方法的区别？**  
    `git fetch origin master:tmp`是从远程仓库获取最新数据到本地，但其不会主动合并，需要你调用`git merge`命令才会与当前分支合并，在此之前你可以调用`git diff`查看其与当前分支的差异，选择是否合并  
    而`git pull`是获取数据后，直接将其合并到当前分支
9.  **Https的主要特点？**  
    https = http + 完整性保护（报文摘要） + 认证 + 加密  
    HTTPS只是HTTP通信接口部分用SSL或TLS等协议代替而已。当通信时，HTTP先与SSL通信，再由SSL和TCP进行通信。  
    https使用混合加密机制，首先使用非对称加密换取对称加密密钥，再使用对称加密传输数据信息  
    https使用数字证书认证机构（CA）和其相关机构颁发的公开密钥证书，可以使客户端验证服务器公开密钥的真实性。  
    https在发送数据时，会附加MAC报文摘要，从而防止报文在传输过程中遭遇篡改
10. **position属性有哪些？**  
    static: 默认值，位于文档流之中，正常布局  
    relative：位于文档流之中，可以使用top和left等属性，使其相对于原位置进行偏移  
    absolute：绝对定位，元素脱离文档流，相对于其包含块定位（第一个非static值的父元素）  
    fixed：与absolute类似，不过其包含块为页面。  
    inherit：从父元素那继承position属性  
    initial：默认样式  
    unset：未设置，若该样式可继承，则相当于inherit，若不可继承，则相当于initial
11. **xss和csrf是什么？各有什么防御手段？**  
    xss为跨站脚本攻击，攻击者向web网页中恶意植入代码，用户访问该页面时，就会受到攻击。防御手段：对输入(和URL参数)进行过滤并对输出进行编码，例如单双引号、反斜线、大于和小于号。如果`script`、`img`、`link`以及`background`等标签或属性为动态内容，要确保这些url是安全的。在服务端对cookie设置`http only`，防止攻击者窃取cookie值。使用内容安全策略（CSP）。  
    csrf为跨站请求伪造，指攻击者通过设置好的陷阱，强制对已完成认证的用户进行非预期的个人信息或设定信息等某些状态更新。防御手段：验证HTTP Refer（缺点：老版的浏览器可可以篡改Refer），toke验证（在http请求中加入随机产生的toke，服务端进行合法性验证，缺点对每个请求都加入token比较麻烦，且token可能会被refer属性暴露），自定义HTTP属性头（通过XMLHttpRequest这个类，给http请求加上属性头，缺点为只限于ajax）。通过cookie的sameSite字段。
12. **说一下vue实例的生命周期？**  
    `new Vue()` > 初始化事件和生命周期 > `beforeCreate` > 数据绑定 > `created` > 如果有`el`属性，则编译模板 > `beforeMount` > 添加`$el`属性，并替换掉挂载的DOM元素 > `mounted` > 数据更新 > `beforeUpdate` > 重新编译模板并渲染DOM > `updated` > 调用`$destoryed` > `beforeDestory` > 销毁vue实例 > `destroyed`
13. **react中props和state有什么区别？**  
    react是单向数据流，props是一个父组件传递给子组件的数据流接口，可以一直的被传递到子孙组件中，在组件内部的props是只读的。而state是组件内部私有的状态，通过修改state会触发组件的重新渲染。
14. **如何解决float属性引起的父元素塌陷问题？**  
    给父元素设置`overflow: hidden`属性  
    给父元素添加一个高度  
    通过伪类，给这个伪类添加`clear: both` 和 `display: block`
15. **实现一个防抖函数和节流函数？**  
    函数节流: 频繁触发,但只在特定的时间内才执行一次代码  
    函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

//防抖函数
    function debounce(fn, time){ 
    	return function(){ 
    		var context = this;
    		clearTimeout(timeId);
    		timeId = setTimeout(function(){ 
    			fn.apply(context, arguements);
    		}, time);
    	};
    }
    
    //节流函数
    function throttle(fn,time){ 
    	var last = 0;
    	return function(){ 
    		var context = this;
    		var now = Date.now();
    		if (now - last >= time){ 
    			fn.apply(this, arguments);
    			last = now;
    		}
    	};
    }

1.  **Js中常见的对象继承方式？**

//原型链继承
    SubType.prototype = new SuperType();
    
    //构造函数继承
    function SubType(){ 
    	SuperType.call(this);
    }

原型链继承的缺点在于，当父类存在引用型属性时，该属性会被所有实例共享，因此修改某个实例的该属性，会影响到其他实例。而构造函数的缺点在于，每次调用构造函数，对象方法都会被创建一次，无法达到函数复用。因此在实际工作中，是结合两者进行使用，原型链继承方法，而构造函数继承属性。

1.  **new操作符做了哪些事情？**

const a = new Foo();
    //以下为new 操作符干的事情
    var o = new Object();  //新建一个空对象
    o.__proto__ = Foo.prototype;   //将该空对象的原型指向构造函数的原型对象
    Foo.call(o);    //在空对象上调用构造函数
    a = o;    //赋值给变量

1.  **说一说Js事件循环？**  
    https://www.jianshu.com/p/12b9f73c5a4f  
    https://www.cnblogs.com/cangqinglang/p/8967268.html  
    https://www.cnblogs.com/jasonxuli/p/6074231.html
2.  **promise的原理是什么？**  
    https://blog.csdn.net/zjw\_python/article/details/108059154
3.  **CommonJS，AMD，CMD以及ES6 import的区别是什么？**  
    CommonJS是运行时加载，ES6是编译时输出接口  
    CommonJS是输出的一个值的复制，而ES6输出的是值的引用  
    AMD 异步模块定义，通过define函数声明依赖模块（数组）和回调函数，特点是依赖前置，其加载模块完成后就会执行该模块，所有模块都加载执行完后会进入回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行。  
    CMD 同样为异步加载，区别在于其为就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，其加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。
4.  **说一下TCP的3次握手连接和4次挥手断开连接，为什么一个是3次，一个是4次？**  
    三次握手：客户端向服务端发送一个SYN报文，服务端收到报文确认后，发送一个SYN-ACK报文，客户端收到服务器的报文后，返回一个ACK报文，连接建立。  
    四次挥手：客户端向服务端发送一个FIN报文，服务端收到报文后，立即发送一个ACK报文，随即通知本地服务启动清理工作，当清理完成时，发送一个FIN报文给客户端，客户端收到后返回一个ACK报文，连接关闭。  
    https://blog.csdn.net/zjw\_python/article/details/79207185  
    由于服务端接受到客户端关闭连接请求时，可能一些数据还没有发送完成，因此不能立刻关闭连接，因此多了一次挥手。
5.  **DNS的解析过程是什么？什么是DNS劫持攻击？**  
    首先检查浏览器缓存中以及操作系统缓存中有没有对应的已解析过的结果（hosts文件），若没有则请求本地域名服务器（LDNS）来解析这个域名，若未成功解析，则跳转到根域名服务器，根域名服务器给予一个主域名服务器地址，然后本地域名服务器再去请求主域名服务器地址，接着主域名服务器会返回网站注册域名的服务器Name server的地址，本地服务器又去访问Name server，最终找到ip地址并返回给本地域名服务器，然后缓存该ip地址，解析结束。  
    DNS劫持：又被称为域名劫持，DNS重定向（DNS direaction）,是一种DNS攻击方式。即是DNS查询没有得到正确的解析，以致引导user访问到恶意的网站，从而窃取用户隐私，或者进行某些恶意的操作（修改本地hosts文件，缓存、侵入到路由管理员账号中，修改路由器的默认配置、感染dns服务器的缓存）。https://juejin.im/post/6844903863623876622
6.  **CSS各选择器的优先级？**  
    !important > 行内样式>ID选择器 > 类选择器/属性/伪类 > 标签 > 通配符 > 继承 > 浏览器默认属性
7.  **说一下浏览器从发起请求到呈现页面的整个过程？**  
    DNS解析ip地址 > TCP三次握手连接 > 发送HTTP请求 > 服务器处理，返回HTTP响应 > 浏览器解析响应 > 构建DOM树、CSSrule树，合并生成render树，计算布局并绘制
8.  **高阶函数是什么？有什么用？**  
    一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。  
    高阶函数广泛应用于js中，例如map、sort、setTimeout等
9.  **说一下meta标签有什么用？**  
    元素可提供有关页面的元信息（meta-information），比如针对搜索引擎、更新频度、cookie的描述和关键词。元数据总是以名称/值对的形式表示，名称有两种类型：`name`和`http-equiv`。其中当名称为`http-equiv`，会将值关联到HTTP头部。常见的类型如下

1.  **HTML文档有哪几种文档类型？为什么要进行类型声明？**  
    严格型（strict）、过渡型（transitional）和框架型（Frameset）  
    严格型不包括框架集、一些废弃的元素标签，过渡型包含废弃的元素标签，但不允许框架集。而框架型等同于过渡型，且允许框架。  
    作用：只有进行正确的类型声明，浏览器才能正确的解析html文档。
2.  **bootstrap栅格系统的原理是什么？**  
    媒体查询 + 百分比宽度

@media (min-width: 768px) { /*当宽度大于768px时触发*/
      .container { 
        width: 750px;
      }
    }
    @media (min-width: 992px) { /*当宽度大于992px时触发*/
      .container { 
        width: 970px;
      }
    }
    @media (min-width: 1200px) { /*当宽度大于1200px时触发*/
      .container { 
        width: 1170px;
      }
    }

1.  **vue的数据绑定是怎么实现的？**  
    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过`Object.defineProperty()`来劫持各个属性的`setter`，`getter`，在数据变动时发布消息给订阅者，触发相应的监听回调。  
    https://segmentfault.com/a/1190000006599500
2.  **说一下diff算法？**  
    ![在这里插入图片描述][70 1]  
    首先比较旧结点和新结点的标签，属性是否相同，若不同，则没有可比性，直接全部替换。若相同，则比较开始比较子节点，若老结点没有子节点，新结点有，则创建子节点并插入到老结点中。若老结点有子节点，而新结点没有，则删除老结点的子节点。若两者都有子节点，则依次比较，比较方法如下  
    https://segmentfault.com/a/1190000008782928  
    简单来说老子结点和新子结点各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明老结点和新结点至少有一个已经遍历完了，就会结束比较。  
    四种情况包括：  
    1 、老子节点的StartIdx和新子节点的StartIdx可比，则不移动dom，StartIdx均加1。  
    2 、老子节点的EndIdx和新子节点的EndIdx可比，则不移动dom，EndIdx均减1  
    3 、老子节点的StartIdx和新子节点的EndIdx可比，则将老子节点StartIdx指向的元素移到老子节点EndIdx的后面，老子节点StartIdx加1，新子节点的EndIdx减1  
    4、 老子节点的EndIdx和新子节点的StartIdx可比，则将老子节点EndIdx指向的元素移到老子节点StartIdx的前面，老子节点EndIdx减1，新子节点的StartIdx加1
3.  **vh和vw单位是什么？**  
    vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）  
    vh：视窗高度的百分比  
    vmin：当前 vw 和 vh 中较小的一个值  
    vmax：当前 vw 和 vh 中较大的一个值
4.  **说一下圣杯和双飞翼布局？**  
    https://blog.csdn.net/zjw\_python/article/details/82597078
5.  **CSS可继承的属性**  
    不可继承的：`display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi`  
    所有元素可继承：`visibility和cursor`  
    内联元素可继承：`letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction`  
    块状元素可继承：`text-indent和text-align`  
    列表元素可继承：`list-style、list-style-type、list-style-position、list-style-image`  
    表格元素可继承：`border-collapse`
6.  **CSS选择器解析的方向是什么？为什么？**  
    从右往左解析，因为这样可以提前过滤掉大部分不符合规则的元素，效率更高  
    https://blog.csdn.net/jinboker/article/details/52126021
7.  **js对象的深拷贝？**

1.  **长轮询和短轮询是什么？**  
    短轮询指浏览器向服务器发送一个请求，询问是否有数据更新，服务里立刻返回响应。一段时间后浏览器又发起一个到服务器的新请求。  
    长轮询指浏览器向服务器发送一个请求，服务一直保持连接打开，直到有数据可发送，发送完数据后，浏览器关闭连接，随即又发起一个到服务器的新请求。（使用XHR对象和setTimeout()实现）
2.  **原生js读取和修改cookie？**

1.  **HTTP2有什么特点？**  
    HTTP/2采用二进制格式而非文本格式。  
    在应用层(HTTP/2)和传输层(TCP or UDP)之间增加一个二进制分帧层。在该二进制分帧层中，HTTP2.0将传输的消息划分为更小的消息和帧，并采用二进制编码。其中HTTP1.1的首部信息被封装到HEADER frame，而请求实体被封装到DATA frame中。  
    HTTP/2是完全多路复用的，而非有序并阻塞的——只需一个连接即可实现并行  
    使用报头压缩，HTTP/2降低了开销（采用了HPACK压缩算法）  
    HTTP/2让服务器可以将响应主动“推送”到客户端缓存中
2.  **实现一个两栏布局，左边固定宽度，右边自适应？**  
    https://www.cnblogs.com/wangzhenyu666/p/7904522.html
3.  **cookie、localStorage、sessionStorage的区别是什么？**  
    共同点：都是保存在浏览器端、且同源的  
    区别：  
    1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下  
    2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大  
    3、数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭  
    4、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的  
    5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者  
    6、web Storage的api接口使用更方便
4.  **分别列举几个HTTP请求头字段和响应头字段？**  
    https://blog.csdn.net/zjw\_python/article/details/79305173
5.  **call、apply、bind方法的区别是什么？**  
    三种方法都能在运行时改变this的指向，区别在于call，apply用于执行函数，bind用于返回一个新函数。call方法的参数项需要一个个列出来，而apply参数项则是一个列表，bind后面接的参数用于函数柯里化。
6.  **ES6 map和对象的区别？**  
    map的键可以是任意数据结构，而对象只能是字符串。  
    map可以通过size属性，无需遍历，即可获取键值对的个数。
7.  **HTTP强缓存和协商缓存是什么？**  
    https://www.cnblogs.com/wonyun/p/5524617.html  
    对于某些js，css文件后面会看到版本号，目的是为了浏览器不使用强缓存，而向源服务器发送请求新的资源
8.  **webworker的作用以及使用方式？**  
    https://blog.csdn.net/zjw\_python/article/details/80277375
9.  **如何计算首屏和白屏时间**  
    http://www.bubuko.com/infodetail-2265464.html
10. **前端页面如何优化？**  
    1、减少HTTP请求次数  
    2、使用缓存、内容分发网络CDN（使用多个不同的域名存储资源，突破浏览器的并发限制，老版IE6并发连接为2个，而现代浏览器大多为6次）  
    3、图片懒加载、css spirte（background-position，background-image）  
    4、使用事件委托、防抖节流等技术  
    5、尽可能使用CSS动画  
    6、压缩css、js、图片等文件  
    7、避免DOM深层次嵌套，减少对DOM的访问次数  
    8、将外部脚本置底  
    9、减少重绘和回流次数
11. **DPR是什么？**  
    dpr为屏幕单方向物理像素和逻辑像素比，在移动端适配时，可以通过meta viewport标签，设置缩放比例为1/dpr，此时一屏幕逻辑像素等于物理像素。meta标签里面width改变的是布局视口的大小，而scale改变的是视觉视口的大小（scale约大，视觉视口约小，显示的元素看起来越大，会出现滚动条）  
    https://blog.csdn.net/letterTiger/article/details/81536104  
    https://www.cnblogs.com/2050/p/3877280.html  
    https://github.com/willson-wang/Blog/issues/84
12. **伪类和伪元素的区别？**  
    https://segmentfault.com/a/1190000000484493
13. **写一个匹配邮箱的正则表达式？**

/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-])*\.[a-zA-Z0-9]{2,6}$/
    /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/

1.  **js中null和undefined的区别是什么？**  
    Undefined类型只有一个值，即`undefined`。当声明的变量还未被初始化时，变量的默认值为undefined。  
    Null类型也只有一个值，即`null`。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。从逻辑角度看，null值表示一个空对象指针
2.  **请列举几种确定js数据类型的方法？**  
    1、typeof 可能的值为`number`, `boolean`, `string`, `undefined`, `object`, `function`  
    2、instanceof 后接可能的数据类型，如 `Number`，`String`，`Object`，`Array`，`Date`，`Function`，`RegExp`  
    3、使用constructor属性，例如`obj.constructor === Array`  
    4、使用prototype，例如`Object.prototype.toString.call(a) === '[object String]')`  
    https://www.cnblogs.com/dushao/p/5999563.html
3.  **webpack的工作流程是什么？**  
    1、合并`shell`和`webpack.config.js`中的配置参数，并将其传入webpack对象的构造函数中，**对应`entry-option`阶段**  
    2、在构造函数内部会初始化`compiler`对象，其具有一个`run`方法，是webpack的实际入口。调用该方法，会构建出`compilation`对象，该对象内部包含了每个构建环节和输出环节中所需要的方法，例如`addEntry()` , `_addModuleChain()` , `buildModule()` , `seal()` , `createChunkAssets()`等，**对应`compile`阶段**  
    3、通过调用`addEntry()` 方法，会根据`Entry`字段寻找入口js文件，并调用私有方法 `_addModuleChain`开始构建模块，**对应`make`阶段**  
    4、构建过程中利用各种`loader`整合资源，生成`js module`，利用`acorn`将`js module`转换为抽象语法树AST，并遍历AST，将 `require()` 中的模块通过 `addDependency()` 添加到数组中，当前模块构建完成后，webpack 调用 `processModuleDependencies()` 开始递归处理依赖的 module，**对应`build-module`阶段**  
    5、在所有模块及其依赖模块构建完成后，webpack 会监听 `seal` 事件调用各插件对构建后的结果进行封装，并逐次对每个 module 和 chunk 进行整理，生成编译后的源码，合并，拆分，生成 hash ，**对应`seal`阶段**  
    6、webpack 会调用 `Compilation` 中的 `createChunkAssets` 方法根据template进行打包后代码的生成，在此过程中会将源代码里的`require()`调用替换成webpack模块加载代码，**对应`emit`阶段**。最后一步，webpack 调用 Compiler 中的 `emitAssets()` ，按照 output 中的配置项将文件输出到了对应的 path 中，从而 webpack 整个打包过程结束。  
    https://github.com/youngwind/blog/issues/99  
    https://www.jianshu.com/p/e24ed38d89fd  
    https://segmentfault.com/a/1190000006814420  
    http://taobaofed.org/blog/2016/09/09/webpack-flow/  
    https://lihuanghe.github.io/2016/05/30/webpack-event.html  
    ![在这里插入图片描述][70 2]
4.  **说说webpack的插件系统**  
    webpack在构建过程中会创建complier和compliation对象，这两个类都是继承于Tapable类，在构建过程中，complier和compliation对象内部都有相应的钩子，例如complier的`entryOption`，`run`，`complie`，`make`，`emit`，`done`等和compliation的`buildModule`，`seal`，`afterOptimizeChunkAssets`等。  
    不同阶段的钩子类型页也不相同，具体有：
    
    1.  `SyncHook` 普通的同步钩子
    2.  `SyncBailHook` 如果在钩子函数序列中某个函数返回了一个非undefined的值，其之后的钩子函数不再执行
    3.  `SyncWaterfallHook` 在钩子函数序列中，当前函数的输入值是上个函数的返回值
    4.  `SyncLoopHook` 如果某个钩子函数返回值不是一个非undefined值，就会一直执行这个钩子函数
    5.  `AsyncParallelHook` 异步并行执行所有注册的钩子函数，当所有钩子函数都执行完毕后，会调用一个最终回调
    6.  `AsyncParallelBailHook` 如果在并行执行的钩子函数序列中某个函数返回了一个非undefined的值，就执行调用最终回调，但不会阻止还没有执行完的钩子函数
    7.  `AsyncSeriesHook` 异步串行执行钩子函数序列
    8.  `AsyncSeriesBailHook`、`AsyncSeriesWaterfallHook`  
        参考 https://juejin.im/post/6844903895584473096
5.  **说说OSI 7层模型及各层的作用？**  
    OSI模型，即开放式通信系统互联参考模型，是国际标准化组织提出的一个试图是各种计算机或者通信系统在世界范围内互联为网络的标准框架。整个模型分为七层，物理层，数据链路层，网络层，传输层，会话层，表示层，应用层。  
    https://blog.csdn.net/zhangyi\_1027/article/details/80022493
6.  **说一下CSS中的BFC是什么？有什么用？**  
    BFC即块状格式化上下文，BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。  
    创建BFC的方法：浮动元素 、绝对定位元素、display值为 inline-block | flex | inline-flex | table-cell 或 table-caption、overflow值为hidden，auto，scroll  
    用处：避免外边距折叠，包含浮动元素（防止高度塌陷），避免浮动元素覆盖（防止文字环绕）  
    https://segmentfault.com/a/1190000013647777  
    https://www.cnblogs.com/chen-cong/p/7862832.html
7.  **说一说基于字符串模板的数据绑定（Angular1）和基于`setter`访问器的数据绑定（Vue）区别，说说他们的优缺点？**  
    前者主要是基于**脏数据检查**的机制，当模板中被插入一条数据，就会有一个对应的`watcher`被插入`watchers`队列中，当绑定的数据发生变化后，执行`update`操作，就会循环遍历整个`watchers`队列，询问每个`watcher`其对应的数据有没有变化，如果有就记录下来，没有则跳过。当一轮循环后，再继续二次循环（可能在第一次循环中某个数据变化触发了其他数据的连锁更新），就这样一直循环（有最大循环次数限制），直到循环内没有任何数据变动。最后根据记录的结果，更新DOM。  
    后者主要是基于`setter`访问器来实现数据绑定，当绑定的数据`data`中某项数值发生变化时，对应的`setter`就会通知`watcher`，然后`watcher`再通知组件重新更新虚拟`DOM`，最后引起页面DOM的变化  
    https://www.cnblogs.com/zhoulujun/p/8881414.html  
    https://segmentfault.com/a/1190000006599500
8.  **说一说webpack的热更新原理**  
    webpack的热更新功能主要由`dev-server`（或自己创建的server）和`HotModuleReplacementPlugin`组合完成。  
    当启动`webpack`时，若配置了热更新，初始化`websocket`连接server和浏览器，并会给打包入口添加`'xxx/node_modules/webpack-dev-server/client/index.js?http://localhost:8080'`文件作为浏览器处理`websocket`的代码，还会通过`hook`监听`webpack`的`done`阶段。  
    每当文件系统变动时，依赖`webpack-dev-middleware`库监听触发`webpack`重新打包编译，生成新文件到内存中，触发`done-hook`使`server`将新的`hash`值通过`websocket`连接传给浏览器  
    浏览器接受到后，将对比本地的`hash`，若不同则通过`ajax`和`jsonp`请求变动的文件`chunkId`和`module`代码。随后通过`HotModuleReplacementPlugin`插件的apply方法更新本地`module`，通过`__webpack_require__`执行新代码。  
    https://juejin.im/post/6844904008432222215  
    https://segmentfault.com/a/1190000020310371
9.  **下面代码的输出是什么？**
    
        <button onclick="alert(this)">1</button>
        <button onclick="(function(){alert(this)})()"></button>
    
    第一个是当前`button`元素，第二个是`window`对象, 当用`addEventListener`进行事件绑定时，默认普通回调函数的`this`为绑定事件的元素
10. **说说jsbridge的实现原理**  
    JS调用Native，主要有**API注入**和**拦截URL SCHEME**两种方式：  
    前者主要原理是，通过 WebView 提供的接口，向 JavaScript 的 Context（window）中注入对象或者方法。  
    后者则是Web 端通过某种方式（例如 iframe.src）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL SCHEME（包括所带的参数）进行相关操作  
    Native调用JS，则是通过直接调用webview接口执行拼接的js字符串  
    https://segmentfault.com/a/1190000020303655  
    https://www.cnblogs.com/itgezhu/p/12843798.html
11. **说说redux的实现原理**
    
        // createStore.js
        // 调用applyMiddlemare返回的函数
         if (typeof enhancer !== 'undefined') { 
            if (typeof enhancer !== 'function') { 
              throw new Error('Expected the enhancer to be a function.')
            }
        
            return enhancer(createStore)(reducer, preloadedState)
          }
    
        // dispatch.js
        // 原始的dispatch函数，将action传入reducer中并依次调用注册的listener
        function dispatch(action) { 
            if (!isPlainObject(action)) { 
              throw new Error(
                'Actions must be plain objects. ' +
                  'Use custom middleware for async actions.'
              )
            }
        
            if (typeof action.type === 'undefined') { 
              throw new Error(
                'Actions may not have an undefined "type" property. ' +
                  'Have you misspelled a constant?'
              )
            }
        
            if (isDispatching) { 
              throw new Error('Reducers may not dispatch actions.')
            }
        
            try { 
              isDispatching = true
              currentState = currentReducer(currentState, action)
            } finally { 
              isDispatching = false
            }
        
            const listeners = (currentListeners = nextListeners)
            for (let i = 0; i < listeners.length; i++) { 
              const listener = listeners[i]
              listener()
            }
        
            return action
          }
    
        // applyMiddleware.js
        // 依次注册中间件，通过compose函数层层包装dispatch函数
        export default function applyMiddleware(...middlewares) { 
          return createStore => (...args) => { 
            const store = createStore(...args)
            let dispatch = () => { 
              throw new Error(
                `Dispatching while constructing your middleware is not allowed. ` +
                  `Other middleware would not be applied to this dispatch.`
              )
            }
        
            const middlewareAPI = { 
              getState: store.getState,
              dispatch: (...args) => dispatch(...args)
            }
            const chain = middlewares.map(middleware => middleware(middlewareAPI))
            dispatch = compose(...chain)(store.dispatch)
        
            return { 
              ...store,
              dispatch
            }
          }
        }
    
    https://segmentfault.com/a/1190000016460366
12. **说说async/await的实现原理**  
    https://www.jianshu.com/p/862ab6d1a2f6
13. **什么是内容安全策略（CSP）**  
    https://www.cnblogs.com/klsfct/p/9491339.html
14. **什么是HTTP简单请求和复杂请求，和OPTIONS方法有什么联系**  
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access\_control\_CORS  
    https://www.cnblogs.com/klsfct/p/9491339.html
15. **Https抓包为什么要安装证书，其通信过程是怎么样的？什么是中间人攻击，如何防范？**  
    https://www.jianshu.com/p/405f9d76f8c4  
    https://blog.fundebug.com/2019/09/17/mitm-for-https/  
    https://www.cnblogs.com/lulianqi/p/10558719.html\#\_label3  
    https://segmentfault.com/a/1190000013075736  
    为了解决这个问题，IETF（互联网工程任务小组）引入了一个策略，叫做 HSTS (HTTP Strict Transport Security, HTTP 严格传输安全)。HSTS 的作用是强制客户端与服务端建立安全的 HTTPS 连接，而非不安全的 HTTP 连接。如果一个站点启用了 HSTS 策略，那么客户端在第一次与该站点建立连接之后，在未来的一段时间内（由一个 HTTP 头部控制，这个头部为：`Strict-Transport-Security`），客户端与该站点的所有连接都会直接使用 HTTPS，即使客户端访问的是 HTTP，也会直接在客户端重定向到 HTTPS 连接。  
    假设 `https://example.com` 的响应头部含有 `Strict-Transport-Security: max-age=31536000; includeSubDomains`，这意味着：  
    在未来的 1 年时间里（即 31536000 秒中），只要浏览器向 example.com 或者其子域名发送请求，必须采用 HTTPS 来发起连接。即使用户在地址栏里写的是 http://example.com，那也直接重写为 https://example.com 并直接发起 HTTPS 连接。  
    在接下去的一年中，如果服务器提供的 HTTPS 证书无效（不论是域名对不上还是自签名还是不在有效期内），用户都无法访问该站点
16. **js如何通过不用中间变量，交换两个数的值**  
    https://blog.csdn.net/q1056843325/article/details/53223914
17. **正向代理和反向代理的区别**  
    https://www.cnblogs.com/xudong-bupt/p/8661523.html
18. **说说js垃圾回收机制**  
    https://segmentfault.com/a/1190000018605776?utm\_source=tag-newest
19. **rsa加密的原理是什么，签名和加密的区别又是什么**  
    http://www.ruanyifeng.com/blog/2013/07/rsa\_algorithm\_part\_two.html  
    https://www.cnblogs.com/pcheng/p/9629621.html  
    https://www.ruanyifeng.com/blog/2011/08/what\_is\_a\_digital\_signature.html
20. **说说io密集型和cpu密集型任务有什么区别**  
    https://www.cnblogs.com/onlywujun/articles/8379328.html
21. **并发和并行的区别**  
    https://www.cnblogs.com/onlywujun/articles/8379328.html
22. **你的优点和缺点是什么**  
    开放问题
23. **相比其他人，你的优势是什么**  
    开放问题
24. **工作中，你遇到最困难或最挫折一件事是什么**  
    开放问题
25. **工作中，你遇到最有成就或最自豪的事是什么**  
    开放问题
26. **你未来的职业规划是什么？**  
    https://www.zhihu.com/question/20054953
27. **前端发展的趋势和方向**  
    全栈化(node)、工程化(webpack)、跨端化（RN、Weex、Flutter）、可视化（webGL）、serverless（https://www.jianshu.com/p/92632d6c2269、https://blog.csdn.net/li1669852599/article/details/108795172、  
    https://blog.csdn.net/CharlesYooSky/article/details/103021510）

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[70]: /images/20220515/c0a7bab0dd1144b3a99d0664e483ec67.png
[70 1]: /images/20220515/8d83e6f890e24e5f8acf3ae867ec4c60.png
[70 2]: /images/20220515/1260fe368a51402281a804a837887c72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220515/b16d0820f957499093aba4d8077cc129.png