干货|Web前端工程师中级面试题!(内附答案)

最近有小伙伴在问可不可以分享一些现在企业前端的

中级或者高级面试题！

所以

朗妹儿专门去请教了我们前端技术大神

今天就给大家分享几个Web前端中级面试题及答案

小伙伴们可以收藏起来哟~

Q：浅拷贝和深拷贝的问题？

A：1. 深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的

2. 也就是说a和b指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝3. 浅拷贝， ”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象4. 深拷贝，JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。但是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 会在转换过程中被忽略.解决办法是递归函数

Q：Node 事件循环，js 事件循环差异？

A：1. Node.js 的事件循环分为6个阶段

2. 浏览器和Node 环境下，microtask 任务队列的执行时机不同

3. Node.js中，microtask 在事件循环的各个阶段之间执行

4. 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行

5. 递归的调用process.nextTick()会导致I/O starving，官方推荐使用setImmediate()

Q：ES6模块与CommonJS模块的差异？

A：1. CommonJs 模块输出的是一个值的拷贝，ES6模块输出的是一个值的引用

2. CommonJS 模块是运行时加载，ES6模块是编译时输出接口

3. ES6输入的模块变量，只是一个符号链接，所以这个变量是只读的，对它进行重新赋值就会报错

Q：有没有去研究webpack的一些原理和机制，怎么实现的？

A：1. 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。

2. 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。

3. 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。

4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。

5. 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。

6. 输出所有chunk到文件系统。

Q：网站性能优化？

A：1. http 请求方面，减少请求数量，请求体积，对应的做法是，对项目资源进行压缩，控制项目资源的 dns 解析在2到4个域名，提取公告的样式，公共的组件，雪碧图，缓存资源，

2. 压缩资源，提取公共资源压缩，提取 css ，js 公共方法

3. 不要缩放图片，使用雪碧图，使用字体图表（阿里矢量图库）

4. 使用 CDN，抛开无用的 cookie

5. 减少重绘重排，CSS属性读写分离，最好不要用js 修改样式，dom 离线更新，渲染前指定图片的大小

6. js 代码层面的优化，减少对字符串的计算，合理使用闭包，首屏的js 资源加载放在最底部

Q： promise 放在try catch里面有什么结果？

A：1. Promise 对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止，也即是说，错误总会被下一个catch语句捕获

2. 当Promise链中抛出一个错误时，错误信息沿着链路向后传递，直至被捕获

Q： 跨域问题，谁限制的跨域，怎么解决？

A：1. 浏览器的同源策略导致了跨域

2. 用于隔离潜在恶意文件的重要安全机制

3. jsonp ，允许 script 加载第三方资源

4. nginx 反向代理（nginx 服务内部配置 Access-Control-Allow-Origin *）

5. cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息

6. iframe 嵌套通讯，postmessage

Q： javascript 中常见的内存泄露陷阱？

A：1. 内存泄露会导致一系列问题，比如：运行缓慢，崩溃，高延迟

2. 内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来

3. 意外的全局变量，这些都是不会被回收的变量（除非设置 null 或者被重新赋值），特别是那些用来临时存储大量信息的变量

4. 周期函数一直在运行，处理函数并不会被回收，jq 在移除节点前都会，将事件监听移除

5. js 代码中有对 DOM 节点的引用，dom 节点被移除的时候，引用还维持

6. JavaScript 中 4 种常见的内存泄露陷阱

Q：什么是Web Workers?为什么我们需要他们？

A：1.Web Workers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法。

2.解决客户端JavaScript无法多线程的问题,

3.模拟多线程(说出JavaScript单线程的缺陷，ajax为什么要异步)

Q：谈一谈闭包，闭包里的this指向谁？对页面的影响还是什么，为什么使用它,?什么时候闭包中的参数会销毁、什么时候不会？

A：1.什么是闭包：要说清楚闭包，必须要先说函数的作用域，函数在声明时就确定了其作用域，而其内部声明的变量是其私有变量，私有变量在函数外部一般情况下是不能访问的。然后再说函数的作用域链，函数在调用变量的时候，会优先在其自身的作用域范围内查找是否声明了该变量，如果有就调用，没有就向其上一级作用域查找，直到查找到全局，如果没有就是undefined.现在可以说明闭包了，在函数外部不能直接访问函数内部的私有变量，就需要通过在函数内部返回一个函数来获得这个私有变量，这就形成了一个闭包

2.销毁问题：在形成了闭包后，该函数会绑定其上下文环境，只要一直保持着对该变量的引用，就不会释放，一旦引用消除，就会释放掉绑定的上下文环境，这个时候闭包就消除了，闭包销毁后，会被浏览器垃圾回收机制GBC不定时的清除掉。

3.性能问题，闭包执行时会绑定上下文环境，会消耗不少的内存

以上就是今天的分享，

后续朗妹儿会给大家分享更多的面试题

如果大家对面试题有问题想要了解

或者想了解更多技术干货知识

可以私信发送【微信】加朗妹儿微信了解更多哟~