前端常见面试题-简答版

• 1.什么是 MVVM？
  • MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化我们的开发效率。
  • 单页应用往往一个路由页面对应一个脚本文件，一旦项目变得复杂，那么整个文件就会变得混乱。
  • MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 Model 负责存储页面的业务数据，View 负责页面的显示逻辑以及操作。Controller 层是 View 层和 Model 层的纽带，当用户与页面产生交互的时候，Controller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对数据的修改，然后 Model 层再去通知 View 层更新。
  • MVP 模式与 MVC 唯一不同的在于 Presenter 和 Controller。在 MVC 模式中我们使用观察者模式，来实现当 Model 层数据发生变化的时候，通知 View 层的更新。这样 View 层和 Model 层耦合在一起。
  • MVP 使用 Presenter 来实现对 View 层和 Model 层的解耦。MVC 中的Controller 只知道 Model 的接口，因此它没有办法控制 View 层的更新，MVP 模式中，View 层的接口暴露给了 Presenter 因此我们可以在 Presenter 中将 Model 的变化和 View 的变化绑定在一起，以此来实现 View 和 Model 的同步更新。这样就实现了对 View 和 Model 的解耦。
  • MVVM 模式中的 VM，指的是 ViewModel，它和 MVP 的思想其实是相同的，不过它通过双向的数据绑定，将 View 和 Model 的同步更新给自动化了。当 Model 发生变化的时候，ViewModel 就会自动更新；ViewModel 变化了，View 也会更新。这样就将 Presenter 中的工作给自动化了。
• 2.nexttick是如何实现的？
  • https://blog.csdn.net/weixin_43392489/article/details/108984307
• 3.vue生命周期？
  • http://doc.cms.liulongbin.top/#/md/day2?id=vue%e5%ae%9e%e4%be%8b%e7%9a%84%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
• 4.vue双向绑定原理？
  • https://zhuanlan.zhihu.com/p/78276361
• 5.什么是状态管理？什么是vuex？
  • https://www.jb51.net/article/163008.htm
  • http://doc.cms.liulongbin.top/#/md/day9?id=vuex
• 6.vue组件通信的方式有？
  • https://www.cnblogs.com/zhaoduoduo/archive/2020/08/06/13444879.html
• 7.VirtualDOM是什么？Diff算法原理？
  • https://www.cnblogs.com/webcabana/p/11099013.html
  • https://segmentfault.com/a/1190000008782928?utm_source=tag-newest
• 8.vue中watch和computed原理？
  • https://www.bilibili.com/video/BV1vp4y1179g?p=90
• 9.执行上下文？
  • https://juejin.cn/post/6844903682283143181
• 10.作用域和作用域链？
  • 作用域就是变量与函数的可访问范围，作用域链保证变量和函数的有序访问。（与原型链区别是作用域链是查找是否有这个对象而原型链是查找这个对象是否有某个属性）
• 11.闭包？
  • 闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。
• 12.this指向？如何改变指向？
  • this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。
    • a.如果是一般函数,this指向全局对象window;
    • b.在严格模式下"use strict",为undefined.
    • c.对象的方法里调用,this指向调用该方法的对象.
    • d.构造函数里的this,指向创建出来的实例.
  • 1.局部变量来代替this指针（var that = this）
  • 2. call()和apply()和bind()
• 13.如何实现call，apply，bind？
  • https://www.bilibili.com/video/BV1m54y1q7hc
• 14.原型？
  • 在 js 中我们是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性值，这个属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当我们使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说我们是不应该能够获取到这个值的，但是现在浏览器中都实现了 proto 属性来让我们访问这个属性，但是我们最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，我们可以通过这个方法来获取对象的原型。
  • 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是我们新建的对象为什么能够使用 toString() 等方法的原因。
  • 特点：JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
• 15.promise？
  • Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。有三种状态：
    • pending: 初始状态，不是成功或失败状态。
    • fulfilled: 意味着操作成功完成。
    • rejected: 意味着操作失败。
  • 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
  • 有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
• 16.深浅拷贝？
  • 针对数据类型中的引用数据类型
  • 浅拷贝只复制指向某个对象的指针而不复制对象本身，新旧对象还是共享同一块内存。
  • 但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
• 17.事件执行机制？
  • https://juejin.cn/post/6844903512845860872
• 18.event loop？
  • https://www.bilibili.com/video/BV1kf4y1U7Ln?from=search&seid=5041436031916773357
• 19.js中微任务和宏任务的区别?
  • https://blog.csdn.net/namechenfl/article/details/99623700
• 20.函数式编程？
  • http://www.ruanyifeng.com/blog/2012/04/functional_programming.html
• 21.service worker？
  • 一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。
• 22.web worker？
  • Javascript是运行在单线程环境中，也就是说无法同时运行多个脚本。假设用户点击一个按钮，触发了一段用于计算的Javascript代码，那么在这段代码执行完毕之前，页面是无法响应用户操作的。但是，如果将这段代码交给Web Worker去运行的话，那么情况就不一样了：浏览器会在后台启动一个独立的worker线程来专门负责这段代码的运行，因此，页面在这段Javascript代码运行期间依然可以响应用户的其他操作。
• 23.重绘和回流？
  • https://blog.csdn.net/xiao_yu_liu/article/details/102475784
• 24.webpack？
  • 使用 webpack 的一个最主要原因是为了简化页面依赖的管理，并且通过将其打包为一个文件来降低页面加载时请求的资源数。
  • 我认为 webpack 的主要原理是，它将所有的资源都看成是一个模块，并且把页面逻辑当作一个整体，通过一个给定的入口文件，webpack 从这个文件开始，找到所有的依赖文件，将各个依赖文件模块通过 loader 和 plugins 处理后，然后打包在一起，最后输出一个浏览器可识别的 JS 文件。
  • Webpack 具有四个核心的概念，分别是 Entry（入口）、Output（输出）、loader 和 Plugins（插件）。
  • Entry 是 webpack 的入口起点，它指示 webpack 应该从哪个模块开始着手，来作为其构建内部依赖图的开始。
  • Output 属性告诉 webpack 在哪里输出它所创建的打包文件，也可指定打包文件的名称，默认位置为 ./dist。
  • loader 可以理解为 webpack 的编译器，它使得 webpack 可以处理一些非 JavaScript 文件。在对 loader 进行配置的时候，test 属性，标志有哪些后缀的文件应该被处理，是一个正则表达式。use 属性，指定 test 类型的文件应该使用哪个 loader 进行预处理。常用的 loader 有 css-loader、style-loader 等。
  • 插件可以用于执行范围更广的任务，包括打包、优化、压缩、搭建服务器等等，要使用一个插件，一般是先使用 npm 包管理器进行安装，然后在配置文件中引入，最后将其实例化后传递给 plugins 数组属性。
  • 使用 webpack 的确能够提供我们对于项目的管理，但是它的缺点就是调试和配置起来太麻烦了。但现在 webpack4.0 的免配置一定程度上解决了这个问题。但是我感觉就是对我来说，就是一个黑盒，很多时候出现了问题，没有办法很好的定位。
• 25.Babel原理？
  • https://zhuanlan.zhihu.com/p/85915575
  • Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。Babel 本质上就是在操作 AST（抽象语法树） 来完成代码的转译。
  • 工作过程可以分为三部分：
    • Parse(解析)：将源代码转换成更加抽象的表示方法（例如抽象语法树）
    • Transform(转换)：对（抽象语法树）做一些特殊处理，让它符合编译器的期望
    • Generate(代码生成)：将第二步经过转换过的（抽象语法树）生成新的代码
• 26.模板引擎？
  • 模板的诞生是为了将显示与数据分离，模板技术多种多样，但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码。模板引擎就是利用正则表达式识别模板标识，并利用数据替换其中的标识符。
  • https://www.cnblogs.com/dojo-lzz/p/5518474.html
• 27.性能优化
  • 打包优化
    • webpack
  • 网络优化
    • dns
      • 域名系统（英文：Domain Name System，缩写：DNS），将域名和IP地址相互映射
      • 每个电脑里面都设置了本地DNS服务器（LDNS），需要的时候，就向LDNS发出请求，LDNS在网上问权威DNS得到答案
    • cdn
      • CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
      • 原理
        • 1.首先经过本地的dns解析，请求cname指向的那台cdn专用的dns服务器。
        • 2.dns服务器返回全局负载均衡的服务器ip给用户
        • 3.用户请求全局负载均衡服务器，服务器根据ip返回所在区域的负载均衡服务器ip给用户
        • 4.用户请求区域负载均衡服务器，负载均衡服务器根据用户ip选择距离近的，并且存在用户所需内容的，负载比较合适的一台缓存服务器ip给用户。当没有对应内容的时候，会去上一级缓存服务器去找，直到找到资源所在的源站服务器，并且缓存在缓存服务器中。用户下一次在请求该资源，就可以就近拿缓存了
    • 缓存
      • https://blog.csdn.net/qq_37674616/article/details/94414002
  • 代码优化
• 28.状态码
  • https://blog.csdn.net/weixin_44478378/article/details/107423488
• 29.TCP三次握手四次挥手
  • 简单https://www.jianshu.com/p/d3725391af59
  • 详解https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc
  • 视频https://www.bilibili.com/video/BV1bi4y1x7m5?from=search&seid=4605568815054818491
• 30.https工作原理
  • https://segmentfault.com/a/1190000018992153
• 31.从输入URL到页面加载发生了什么？
  • https://segmentfault.com/a/1190000006879700
  • 联系三次握手四次挥手https://juejin.cn/post/6844903782015303693#heading-0
• 32.js设计模式
  • https://juejin.cn/post/6844903474535071752#heading-6
• 33.XSS和CSRF攻击
  • https://juejin.cn/post/6844903781704925191
• 34.跨域
  • https://juejin.cn/post/6844903781079990285#heading-0
• 35.节流、防抖
  • https://juejin.cn/post/6844903781079973895#heading-5
• 36.nodejs