前言
最近参加了几次面试，积累了一些高频笔试题。 我把笔试题分为两类。 一是基础试卷：主要测试后端技术基础是否扎实，后端知识体系能否串联。 一是开放式问题：考察业务积累，是否有自己的想法和思考问题的方式。 此类问题没有标准答案。
基本问题
问题的答案提供了思考的方向。 答案可能不正确和全面。 如有错误，请在评论中指出，共同进步。
如何设计组件包
组件封装的目的是为了复用，提高开发效率和代码质量。
低耦合、单一责任、可重用、可维护
后端组件设计思路
js异步加载方法
渲染引擎遇到script标签就会停止，等待脚本执行完毕，继续向上渲染。
Defer的意思是“渲染后执行”，async的意思是“下载后执行”。 如果有多个 defer 脚本，它们将按照它们在页面上出现的顺序加载。 多个异步脚本无法保证加载顺序。
加载es6模块时，设置type=module。 异步加载不会阻塞浏览器。 页面在执行之前呈现。 可以同时添加async属性来异步执行脚本（借助顶楼的句型点“this”等于undefined，可以检测当前代码是否在ES6模块中）
css动画和js动画的区别
代码复杂度，js动画代码比较复杂
动画运行时，达到对动画的控制程度，只有js可以允许动画暂停、取消、中止。 CSS动画不能添加干扰。
再看动画性能，js动画多了一个js解析过程，性能不如css动画。
两种跨站攻击，XSS和CSRF
XSS跨站脚本攻击主要发生在后端层面。 用户在输入级别插入攻击脚本来更改页面的显示，或窃取网站cookie。 防治方法：不信任用户的所有操作，对用户的输入使用通配符。 不允许js读写cookie
CSRF跨站请求伪造、以您的名义发送恶意请求、通过cookie和参数进行过滤等。
我们无法完全避免锣攻击webpack内存泄漏，只能提高锣攻击的门槛
冯波委托、目的、作用、写作方法
将一个元素或一组元素的效果委托给其父元素或内部元素
优点：减少显存消耗，动态绑定暴风雨
target是触发storm的最具体的元素，currenttarget是绑定storm的元素（通常等于函数中的this）
JavaScript故障解读及调试
线程、进程
线程是最小的执行单元，进程是最小的资源管理单元。
一个线程只能属于一个进程，一个进程可以有多个线程，但至少有一个线程
负载均衡
当系统面临大量用户访问而负载过低时，一般会减少服务器数量进行垂直扩展，并采用集群和负载均衡的方式来提高整个系统的处理能力。
服务器集群负载均衡的原理是什么？
什么是 CDN 缓存
CDN是一种部署策略，像nginx一样按照不同的地域部署服务，并缓存静态资源。后端在优化项目的时候，习惯上会对平台资源添加一个hash值，每次更新的时候都会改变hash值。 当哈希值发生变化时，服务将重新获取资源。
CDN（CDN）是一个战略部署的整体系统，包括分布式存储、负载均衡、网络请求重定向和内容管理四个要素。
CDN_百度百科
如何写闭包、闭包的作用、闭包的缺点
使用闭包的目的是隐藏变量、间接访问变量以及在定义函数的词法范围之外调用函数。
闭包的视频内存泄漏是IE中的一个bug。 使用闭包后，无法恢复对闭包的引用，从而导致显存泄漏。
《每日问答》JS中的闭包有哪些？
闭包导致视频内存泄漏的实验
跨域问题，谁限制跨域，如何解决
浏览器同源策略导致跨域
隔离潜在恶意文件的重要安全机制
[jsonp，允许脚本加载第三方资源]
nginx反向代理（nginx服务内部配置Access-Control-Allow-Origin*）
cors前后端协作设置request back、Access-Control-Allow-Origin等大脑信息
iframe嵌套通信、postmessage
javascript中常见的内存泄漏陷阱
视频内存泄漏会导致一系列问题，例如运行缓慢、崩溃、高延迟等。
显存泄漏是指您无法使用（无法访问）的变量仍然占用显存空间并且无法再次使用。
意外的全局变量，那些是不会被回收的变量（除非设置为空或重新参数化），特别是那些用来临时存储大量信息的变量。
周期函数仍在运行，处理函数不会被回收。 jq在移除节点之前会移除风暴窃听。
js代码中有对DOM节点的引用。 当 DOM 节点被删除时，引用仍然保留。
JavaScript 中 4 个常见的视频内存泄漏陷阱
babel 将 ES6 转换为 ES5 或 ES3 的原理是什么？
它是一个编译器，输入语言是ES6+，编译后的目标语言是ES5
babel官方工作原理
解析：将代码串解析成具体的句子树
变换：变换具体句型树
重构：根据变换后的具体句型树重新生成码串
Promise 模拟已中止
当新对象保持“pending”状态时，原来的Promise链将终止执行。
returnnewPromise(()=>{});//返回“pending”状态的Promise对象
我们先来说一下如何停止Promise链（promise内存泄漏问题）
将 Promise 放在 trycatch 上会产生什么结果？
Promise对象的错误具有冒泡性质，仍然会向后传递，直到被捕获。 换句话说，错误总是会被下一个catch语句捕获。
当 Promise 链中抛出错误时，错误信息会沿着链向后传递，直到被捕获。
网站性能优化
在http请求方面，减少请求数量和请求量。 对应的方法是对项目资源进行压缩，控制项目资源的DNS解析为2~4个域名，提取发布格式、公共组件、精灵、缓存资源。
压缩资源、提取公共资源压缩、提取css、js公共方法
不缩放图像，使用精灵图像，使用字体图表（阿里巴巴矢量库）
使用 CDN 并抛弃无用的 cookie
减少重绘和重排，CSS属性读写分离，最好不要用js改变样式，dom离线更新，渲染前指定图片大小
js代码层面的优化，减少字符串估计，合理使用闭包，顶部首屏加载js资源
js自定义风暴实现
Native提供了3种方式来实现自定义风暴
createEvent，设置风暴类型，是HTML风暴还是键盘风暴
initEvent初始化风暴、风暴名称、是否允许冒泡、是否禁止自定义风暴
dispatchEvent触发storm
Angular单向数据绑定和vue data单向数据绑定
两者都是MVVM模式开发的典型代表
Angular 是通过脏检查来实现的。 Angular会将UI扰动、请求扰动、settimeout等延迟对象加载到扰动检测的脏队列中。 当数据发生变化时，触发$diget方法更新数据，视图渲染
Vue是通过数据属性的数据绑架和发布订阅模型来实现的。 大致可以理解为由三个模块组成。 观察者完成数据的绑架，编译器完成模板片段的渲染，观察者充当连接两者的桥梁。 它订阅数据更改和更新视图
get通信和post通信的区别
Get请求可以被缓存，但是Post请求不能。
Post 比 Get 稍微安全一些，因为 Get 请求包含在 URL 中，会被浏览器保存在历史记录中，而 Post 则不会，在抓包的情况下也是一样的。
通过请求体，Post 可以比 Get 传输更多的数据。 Get没有这个技术。
URL有粗细限制，会影响Get请求。 但是，这个宽度限制是由浏览器规定的，而不是由 RFC 规定的。
Post支持更多的编码类型，并且对数据类型没有限制。
你研究过webpack的一些原理和机制以及如何实现吗？
解析webpack配置参数，将shell传入的参数与webpack.config.js文件中配置的参数合并，生成最终的配置结果。
注册所有配置的插件，以便插件可以监听webpack创建生命周期的storm节点并做出相应的响应。
从配置好的入口文件开始解析文件，构建AST句子树，找出每个文件所依赖的文件，继续递归下去。
在解析文件的递归过程中，根据文件类型和加载器配置找到合适的加载器来转换文件。
递归完成后，得到各个文件的最终结果，并根据入口配置生成代码块chunk。
将所有块输出到文件系统。
ES6模块和CommonJS模块的区别
CommonJs 模块输出该值的副本，ES6 模块输出对该值的引用。
CommonJS 模块在运行时加载，ES6 模块在编译时作为输出套接字。
ES6输入的模块变量只是一个符号链接，所以这个变量是只读的，重新参数化就会报错。
模块加载AMD、CMD、CommonJSModules/2.0规范
该规范的目的是为了 JavaScript 的模块化开发，特别是在浏览器端。
对于依赖模块，AMD 提前执行，CMD 延迟执行。
CMD 促进对最近位置的依赖，AMD 促进对后面的依赖。
Node Storm Loop、js Storm Loop区别
Node.js的风暴周期分为6个阶段
microtask任务队列的执行时机在浏览器和Node环境下是不同的。
递归调用process.nextTick()会导致I/Ostarving。 官方推荐使用setImmediate()
深拷贝和浅拷贝仅适用于Object、Array等复杂类型。
也就是说，a和b指向同一块显存，所以如果改变任何一个值，另一个值也会发生巨大的变化。 这是一个浅拷贝。
浅拷贝，“Object.assign()方法用于将一个或多个源对象的所有可枚举属性的值复制到目标对象。它会返回目标对象
深拷贝，JSON.parse()和JSON.stringify()给了我们一个基本的解决方案，并且函数无法正确处理
开放式问题
开放式题主要考察考生的业务积累以及是否有自己的思考问题的思路和方法。 没有标准答案。 但有些问题相当棘手，哈哈哈哈，例如：“你见过的最好的代码是什么？” 事实上，提前计划是好的。
我先自我介绍一下，说说项目的技术栈，以及项目中遇到的一些问题。
从整体来看，取决于你对项目的理解webpack内存泄漏，对框架的理解以及你自己的思考。
您在项目中遇到过什么困难以及如何解决的吗？
如果你是一家初创公司，如何从头开始（选择哪些框架，选择哪些构建工具）
告诉我们您在项目中使用的技术堆栈，您认为什么让您感到自豪和出色，什么让您头疼，以及您是如何解决的。
一个业务场景，如何应对不断的产品迭代和需求变化，以及具体技术方案的实施
你的学习来源是什么？
您认为哪个框架更好？ 它有什么好呢？
您认为最困难的技术难点是什么？
你见过的最好的代码是什么？
