前端学习笔记（三）

1. script阻塞，defer，async属性

        js脚本执行过程中会中断页面加载，直到脚本执行完毕，此操作阻塞了页面的加载，造成性能问题。因此尽可能将js脚本文件放在body标签底部，以减少脚本阻塞对页面性能的影响。标记defer属性，即使js脚本写在header中，也不会阻塞页面的加载，但是其会先于document加载完之前，即defer脚本是在整个页面被解析完成之后，文档的DOMContentLoaded事件之前被执行。但是async属性会在自身脚本加载完成时开始执行依赖于该脚本的代码，即async脚本会在自身被下载完，window.load事件执行前被立刻执行。也就是说defer属性和async属性都是为了不阻塞页面内容的渲染，需要注意的是使用async属性时应在业务代码不相干的脚本中使用，避免发生脚本之间相互依赖的问题

        解决方案：①使用成组脚本加载，将多个js文件打包压缩为一个文件，从而提高加载效率。②使用模块化加载和按需加载方式。script标签添加使用defer属性，当script脚本放置在页面的任何位置，也不会阻塞页面其他资源的下载，即实现页面内容的并行加载，但加载完之后，代码不会立即执行，而是DOM完全加载结束后onload事件发生前被执行。③考虑浏览器兼容性的更加强大和灵活的脚本控制，需要引入按需加载。https://www.cnblogs.com/mrsunny/archive/2011/10/22/2221343.html js脚本阻塞与模块化加载

var script  = document.createElement("script");
script.type = "text/javascript";
script.src="file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

2.垃圾回收

        JS的内存管理是自动执行的，而且是不可见的。JS中内存管理的主要概念是可达性，即用某种方式可访问会可用的值，被存储在内存中。JS引擎中后台进程称为垃圾回收器，监视所有对象，并删除那些不可访问的对象。https://www.cnblogs.com/fundebug/p/javascript-memory-garbage-collection.html

        内部算法：基本垃圾回收算法为：“标记--清除”，定期执行以下垃圾回收步骤，垃圾回收器获取根并“标记”它们。分代回收：对象分为两组：“新对象”和“旧对象”，完成工作后就会迅速结束。增量回收：对很多对象进行垃圾回收分解，使用额外标记来跟踪变化。空间时间收集：垃圾回收器只在CPU空闲时间运行，以减少对执行的可能影响。

        垃圾回收算法（https://www.jianshu.com/p/a8a04fd00c3c）

        http://newhtml.net/v8-garbage-collection/

3.原型和原型链

        JavaScript有着七种数据类型String、Number、Boolean、Null、undefined、Symbol、Object前六种为基本数据类型，Object为引用类型。

        每个实例对象都有一个私有属性_proto_，指向它构造函数的原型对象(prototype)。原型对象也有自己的_proto_，层层向上直到一个对象的原型对象为null，这一层层原型就是原型链。

        创建对象的四种方法：

        ①字面量对象

                 let obj = { } ;

        ②构造函数创建，实现继承、多态、封装等特性；

function Animal(name) {
	this.name = name;
}
let cat = new Animal('Tom');

        ③class创建，其是基于原型和原型链的一个语法糖

class Animal {
  constructor(name) {
    this.name = name;
  }
}
let cat = new Animal('Tom');

扩展原型链的四种方法

①构造函数创建

function Animal(name) {
	this.name = name;
}
Animal.prototype = {
	run() {
        console.log('跑步');
	}
}
let cat = new Animal('Tom');
cat.__proto__ === Animal.prototype; // true
Animal.prototype.__proto__ === Object.prototype; // true

②对象创建Object.create

var a = {a: 1}; 
// a ---> Object.prototype ---> null
var b = Object.create(a);
b.__proto__ === a; // true

   ③Object.setPrototypeOf

        参数：obj：要设置其原型的对象；prototype：该对象的新原型。

var a = { n: 1 };
var b = { m : 2 };
Object.setPrototypeOf(a, b);
a.__proto__ === b; // true

④使用_proto_动态设置对象的原型

var a = { n: 1 };
var b = { m : 2 };
a.__proto__ = b;
a.__proto__ === b; // true

4.隐式转换

        当运算符在运算时，如果两边数据不统一，CPU无法计算则可将两边数据进行类型转换再计算。隐式转换的规则①转成string类型：+(字符串连接符)②转成number类型：++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !===(关系运算符)③转成boolean类型：！(逻辑非运算符)

（1）字符串连接符与算术运算符隐式转换规则混淆

console.log(1+"true");  //"1true"  将其他数据类型调用String()方法转成字符串然后拼接
console.log(1+true);  //