1-2-3（下）js性能优化

1.JSBench的使用
测试js执行效率的网站

只用一个标签也测试 ，
执行代码的时候停留在页面
多执行继承 取高概率事件

2.堆栈中的js执行过程
ESStack 执行环境栈
|AB1 堆

|	|																	function foo(b){'''}
|	...																	name : foo
|	...																	length : 1
|	EC(baz):函数开辟的全局上下文
		this window	
		<baz.ao,foo.ao,vo>
		AO:
			arguments:{0:3}
			c= 3 
			console.log(a+b+c)
			3+ 2 + 2 ===>7



|	EC(foo):函数开辟的全局上下文
|		this = window
|		<foo.ao,vo>													AB2 堆
|		AO:																function bac(c){'''}
|			arguments:{0:3}												name :bac
			b = 2
|			a = 2														length : 1
|			bac = AB2 [[scope]]foo.AO
|	
|	
|	EC：全局执行上下文					
|		VO：
|			a = 10
|			foo = AB1 
|			fn =AB2

		fn(3)
		
		
栈内存和堆内存 
	堆内存创建执行环境栈  存放不同的执行上下文 
	先创建全局执行上下文   全局作用域下面对参数进行声明和存放  
	基本数据类型 栈里面  引用 在堆内存  由gc控制处理  
	出栈  主线程执行      由是否产生闭包决定堆内存是否要释放掉 

3.减少判断层级
及时return 退出判断层级
可以减少非必要的空间使用的产生

if else 适合区间判断
switch case 适合枚举值  代码易懂  不代表效率高

4.减少作用域链查找层级
作用域内重新定义变量
在当前作用域里找不到 会依次寻找最接近的作用域
1.在最近的作用域对变量重新 赋值

2.在最近的作用域对变量重新  声明            快   但是会重新开辟空间单独存放新声明

查找层级越少 速度越快

多个函数会产生多个作用域上下文，自己的函数调用自己的作用域上下文   

5.减少数据读取次数
缓存 可以更快 但是消耗了空间 和上面类似方法
在当前作用域内重新声明变量

6.字面量与构造式
日期 数组的时候 得到的数据都是引用类型

字面量
	先创建对象 再各个属性赋值
	
	//   let obj = new Object()
	创建引用数据类型的时候 由于先开辟东西 再放东西 所以慢一些 

构造式
	创建对象的同时赋值
	
	var str2 = new String('zce说我为前端而活')
	创建基本数据类型 的时候  有原型链的一步跳转
	创建引用数据类型的时候 直接开辟空间放东西

7.减少循环体活动
1.循环体内做的事情越多 时间就越多 所以抽离不变部分代码到外面 重复使用 不改变的值 如循环数组的长度

8.减少声明及语句数

9.原型添加方法
Person.prototype.say()={}

这种方法当new多个对象的时候  因为say是调用同一个地址  所以这个效率更高


方法里面做一些访问属性的操作
person = {
	this.id = id;
	this.say = {
		
	}
}

这种方法调用次数少的时候  它每产生一个对象实际是开辟一个新的空间  每一个say都是独立的

10.微任务
微任务不算任务，没进任务栈

11.TS只是语言上的编译，只是语法上的编译
不使用第三方工具的情况下 需要手动Polyfill
Polyfill 垫片 补充
core-js
@babel/typescript 不作TS语法检查 只去掉注解
兼容性代码
if(!window.XMLHttpRequest) {
window.XMLHttpRequest = function () {…}
}

12.TS第三方模块的类型声明
第三方库
把自己的模块发到npm包

脚手架工具
引入第三方模块报错
express报错  caz正常使用

npm i express --save   轻量框架   
npm i caz	--save 

import caz form 'caz'

import express form 'express'
const app = express()
caz('')

package.json里面的字段控制的
	检查  *.d.ts文件存不存在 
	
由于历史关系有些第三方模块没有类型补充说明，所以需要自己加
	npm i @type/express  --save-dev   
	
本地新建 type.d.ts  
	declare module 'cors' {
	const fn:()=>()=>{}
		export default fn 
	}

13.Symbol类型应用场景
创建 私有成员
const key = Symbol(‘aaa’)
const obj ={
[Symbol()]:‘zzz’,
[key]:‘aaas’
}

取值的话 可以拿到Symbol()的变量 Symbol不能被迭代  

14.其他问题
…

15.关于this的问题
function foo(){
console.log(this)
}

this指向哪里得看怎么被调用
	
1.沿着作用域向上找最近的一个function(箭头函数不视为function)，看这个function是怎么执行的
2.this的指向取决于  function 怎么调用
3.function的调用
	1.作为函数调用 foo ()
		全局对象  则指向 global
	2.作为方法调用	obj.foo()
		指向调用方法的对象
	3.作为构造函数调用  new Foo()
		指向新对象
		
	4.特殊调用 foo.call()
		指向参数指定对象
		
	4.找不到function   就是全局对象
	5.全局模式下 指向全局的this  为undefined

多用JSBench 测试代码效率