1、tree-shaking
Tree-Shaking 是用来在打包编译前消除 es6 module 中未使用的代码模块的功能。
打包工具用 webpack 和 rollup 来实现,只能对 export 导出的函数代码和模块进行优化。
相比 DCE Tree-Shaking 属于广义的 DCE,传统 DEC 只能清除单文件中不可执行不可到达的代码,Tree-Shaking 是跨文件依赖于 es6 module 导入静态分析的。
commonjs 规范属于动态导入,代码不执行到 require 是无法知道执行的结果的,es6 module 的 import 属于静态分析,通过导入的字面量即可分析模块代码。
2、CommonJs和ES6 module的区别是什么呢?
CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
CommonJs 是单个值导出,ES6 Module可以导出多个
CommonJs 是动态语法可以写在判断里,ES6 Module 静态语法只能写在顶层
CommonJs 的 this 是当前模块,ES6 Module的 this 是 undefined
3、set 和map的区别
Set是类似于数组的数据集合,Map是一个类似对象的数据结构
Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值)都可以作为一个键或一个值
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用
1、Map对象初始化的值为一个二维数组,Set对象初始化的值为一维数组
2、Map对象和Set对象都不允许键重复(可以将Set对象的键想象成值)
3、Map对象的键是不能改的,但是值能改,Set对象只能通过迭代器来更改值
使用场景:
set 去重
可以使用Map对象建立一个请求状态码对象字典,因为状态码是数字类型,所以使用Map对象很合适
4、DOM 节点的获取
getElementById
getElementsByTagName
getElementsByClassName
querySelectorAll
5、原型
js创建对象是适应构造函数来创建,每一个构造函数中有一个prototype 属性,这个属性值是一个对象,这个对象包含构造函数中所有的实例和方法。
所有构造函数创建对象后,对象内部会包含一个指针,这个指针指向构造函数中的prototype属性对应的值,Es5中这个指针就成为原型。
一般来说获取不到这个值,但是浏览器中都实现了proto 属性来访问这个属性,最好不要只用这个属性获取原型,因为它不是规范中规定的。可以使用Es5中的getPrototypeOf()方法来获取原型。
6、原型链
当访问一个对象中的属性,如果对象中没有这个属性,就会去这个对象的原型对象查找,这个原型对象又有自己的原型,这样一直查找下去,这就是原型链。
原型链的尽头一般都是Object.prototype。 null
继承: 通过某种方式让对象可以访问另一个对象中的方法和属性
7、闭包
闭包是指有权访问另一个函数作用域中变量的函数。常用的就是在一个函数中创建另一个函数,创建的函数可以访问当前函数的变量。
用途:
1.可以函数外部访问到函数内部变量。通过闭包可以在外部调用闭包函数访问到函数内部的变量。可以使用这种方法创建私有变量
2.使已经运行结束的闭包函数上下文中的变量继续留在内存中,闭包函数保存了这个变量对象的引用,这个对象不会被回收。
8、微任务和宏任务的区别
JS是单线程执行的语言,在同一个时间只能做一件事情。
这就导致后面的任务需要等到前面的任务完成才能执行,如果前面的任务很耗时就会造成后面的任务一直等待。
为了解决这个问题JS中出现了同步任务和异步任务。
在主线程上排队执行的任务只有前一个任务执行完毕,才能执行后一个任务,形成一个执行栈。、
不进入主线程,而是进入任务队列,当主线程中的任务执行完毕,就从任务队列中取出任务放进主线程中来进行执行。
由于主线程不断重复的获得任务、执行任务、再获取再执行,所以者种机制被叫做事件循环
异步任务主要分为宏任务与微任务两种
宏任务与微任务之间的执行顺序(同步任务->微任务->宏任务)
宏任务 :
setTimeout ✅ ✅
setInterval ✅ ✅
setImmediate ❌ ✅
requestAnimationFrame ✅ ✅
process.nextTick ❌ ✅
MutationObserver ✅ ❌
Promise.then catch finally ✅ ✅
9、Vue和react 不同和相同之处
相同:
1、都将注意力保持在核心库,将其他功能和全局状态管理交给其他库;
2、都有自己的构建工具,能得到最佳实际设置模板
3、都使用了虚拟DOM
4、都有props概念,允许组件之间传值
5、都鼓励组件化,将应用拆出一个一个组件,提高复用
不同:
1、数据流(都是单向数据流)但是Vue默认支持双向数据绑定
2、虚拟DOM
Vue在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树,
react 中状态被改变时,全部子应用组件都会重新渲染
3、组件化
Vue:鼓励使用HTML模板,只是多了一些属性
react:推荐的是JavaScript 的JSX模板
4、监听数据变化是实现原理不同
Vue: 通过get、set已经一些函数的劫持,能精确知道数据变化
react: 通过比较引用的方式进行的