前端面试自闭36问(二)_react 在 dom元素中添加一个对象标签,监听resize方法-CSDN博客

本文链接：https://blog.csdn.net/qq_44704740/article/details/108529734

1. this 的理解（使用 --为什么要用、实际使用、绑定（显式隐式）常见方法（call apply bind）作用域闭包变量提升实际使用、箭头函数与函数的区别）

函数调用模式：如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window。
方法调用模式：当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this指向被绑定到当前对象。
构造函数调用模式：如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。
上下文调用模式（借用方法模式）：上下文调用模式也叫方法借用模式，分为apply与call。可以改变this指向。bind也可以改变this指向，接受一个对象，返回一个新的函数，新函数中的this为参数中指定的对象。
作用域：
变量起作用的区域，也就是说：变量定义后，可以在哪个范围内使用该变量。
全局作用域、函数作用域、块级作用域(ES6)
阮一峰-块级作用域
作用域链：
只要是函数，就会形成一个作用域，如果这个函数被嵌套在其他函数中，那么外部函数也有自己的作用域，这个一直往上到全局环境，就形成了一个作用域链。
闭包:
至少两个函数，嵌套关系，内部函数需要访问外部函数的局部变量。
闭包的作用：

私有变量，保护数据安全
持久化维持数据
箭头函数：
ES6 允许使用“箭头”（=>）定义函数。
箭头函数有几个使用注意点：（区别）
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

2. 性能优化（垃圾回收机制、事件委托、 DOM 操作重棑重绘内存管理机制图片的性能优化、借助工具–webpack 等）

垃圾回收机制
由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。JavaScript 使用垃圾回收机制来自动管理内存。现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。
事件委托
事件冒泡的作用------事件委托
例：在网页中，有一个ul标签，ul中包括6个标签，点击li元素要实现某种效果，以前的做法是首先找到ul，然后找到ul里面所有的li，遍历所有的li标签，给它们逐个注册点击事件。
现在，有了事件冒泡，就不用给每一个li注册点击事件了。因为冒泡事件的作用，点击li元素的时候，点击事件可以传送到父元素上来，即本来该li做的事情，交给ul去做，再者就是事件委托。
DOM 操作

innerText、innerHTML
document.body、document.documentElement、document.head、document.title
document.getElementById(“id”)、document.getElementsByTagName(“tagName”)、box.getElementsByTagName(“tagName”)、document.getElementsByClassName(“class”)、document.getElementsByName(“aa”)(只适用于表单)、document.querySelector()、document.querySelectorAll()、document.getElementById(“box”)
box.getAttribute(name)、box.setAttribute(name, value)、box.removeAttribute(name)
offset、scroll、client

重棑重绘

reflow重绘：某些元素的外观被改变，例如：元素的填充颜色
repaints重排：重新生成布局，重新排列元素。

在页面的生命周期中，网页生成的时候，至少会渲染一次。在用户访问的过程中，还会不断触发重排(reflow)和重绘(repaint)，不管页面发生了重绘还是重排，都会影响性能，最可怕的是重排，会使我们付出高额的性能代价，所以我们应尽量避免。

重排比重绘大，重绘不一定导致重排，但重排一定会导致重绘。
下面情况会发生重排：

页面初始渲染，这是开销最大的一次重排
添加/删除可见的DOM元素
改变元素位置
改变元素尺寸，比如边距、填充、边框、宽度和高度等
改变元素内容，比如文字数量，图片大小等
改变元素字体大小
改变浏览器窗口尺寸，比如resize事件发生时
激活CSS伪类（例如：:hover）
设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

一下情况会发生重绘：

color
visibility
text-decoration
background
box-shadow

内存管理机制
JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。其中栈存放变量，堆存放复杂对象，池存放常量。
栈：先进后出
堆：先进先出
图片的性能优化

使用更小更快更强，新一代图片格式 WebP
图片懒加载

懒加载的原理是：将图片的url赋值给img的data-url（可自定义）属性，监听滚动事件，当图片进入可视区域时，将data-url的值赋值给img的url属性，这时才真正发出图片的http请求。具体实现可以参考

利用雪碧图减少http请求
base64编码内联小图片

Webpack性能优化

3.（必要）promise异步（是什么、事件回调 js引擎机制、promise的用法、语法糖、与axios的联系、如何创建、串联与相应多个）

Promise 是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。
有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
})

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});

js引擎机制
宏任务与微任务
axios:
axios 只是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，发送ajax的工具, 非常的轻量。

4. mvvm（什么是mvc mvvm ；为什么用这种模式、前后端分离、 vue、 react jquery等的区别、框架与库区别 cmd、amd的区别）

MVVM是前端视图层的分层开发思想，把每个页面分成M、V、VM三块，V是view视图、M是model数据、VM是M和V之间的调度者，提供双向数据绑定。
MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。
1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。
2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。
3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。
amd与cmd的区别：
区别：

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
CMD 推崇依赖就近，AMD 推崇依赖前置。