关于前端:万字总结熬夜总结50个JS的高级知识点全都会你就是神

前言

大家好，我是林三心，根底是进阶的前提，上一篇，我给大家分享了我这一年来平时记录的工作中碰到的 50 个 JS 根底知识点，明天就给大家分享一下，我这一年来，工作中遇到的 50 个 JS 高级知识点吧！！！

知识点

1、undeclared 与 undefined 的区别？

• undefined：申明了变量，然而没有赋值
• undeclared：没有申明变量就间接应用

var a; //undefined
b;    // b is not defined

2、let & const 与 var 的区别？

• var 存在变量晋升，可反复申明同一变量，申明的变量均可改
• let 没有变量晋升，不可反复申明同一变量，申明的变量均可改
• const 没有变量晋升，不可反复申明同一变量，申明的根本数据类型不可改，援用类型可改属性，不可只申明变量而不赋值

3、暂时性死区问题

var a = 100;

if(1){
    a = 10;
    // 在以后块作用域中存在 a 应用 let/const 申明的状况下，给 a 赋值 10 时，只会在以后作用域找变量 a，// 而这时，还未到申明时候，所以控制台 Error:a is not defined
    let a = 1;
}

4、获取 DOM 元素有哪些办法

5、操作 DOM 元素有哪些办法

6、DOM 的类型有哪几种？

12 种

元素节点              Node.ELEMENT_NODE(1)
属性节点              Node.ATTRIBUTE_NODE(2)
文本节点              Node.TEXT_NODE(3)
CDATA 节点             Node.CDATA_SECTION_NODE(4)
实体援用名称节点       Node.ENTRY_REFERENCE_NODE(5)
实体名称节点          Node.ENTITY_NODE(6)
解决指令节点          Node.PROCESSING_INSTRUCTION_NODE(7)
正文节点              Node.COMMENT_NODE(8)
文档节点              Node.DOCUMENT_NODE(9)
文档类型节点          Node.DOCUMENT_TYPE_NODE(10)
文档片段节点          Node.DOCUMENT_FRAGMENT_NODE(11)
DTD 申明节点            Node.NOTATION_NODE(12)

7、JS 的作用域及作用域链

什么是作用域呢？

在 Javascript 中，作用域分为 全局作用域  和  函数作用域

• 全局作用域：代码在程序任何中央都能拜访，window 对象的内置属性都属于全局作用域
• 函数作用域：在固定的代码片段能力被拜访

作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创立的。如上，fn 作用域下创立了 bar 函数，那么“fn 作用域”就是“bar 作用域”的下级。

作用域最大的用途就是隔离变量，不同作用域下同名变量不会有抵触。

什么是作用域链？

个别状况下，变量取值到 创立 这个变量 的函数的作用域中取值

然而如果在以后作用域中没有查到值，就会向下级作用域去查，直到查到全局作用域，这么一个查找过程造成的链条就叫做作用域链

var x = 10;

function fn(){console.log(x);
}

function show(f){
    var x = 20;
    f();    // 10}

show(fn);

8、数组的 splice 与 slice 的区别？

9、substr 和 substring 的区别？

10、includes 比 indexOf 好在哪？

includes 能够检测 NaN ，indexOf 不能检测 NaN ，includes 外部应用了 Number.isNaN 对 NaN 进行了匹配

11、上面代码输入的后果？

for(var i = 0; i < 3; i++){setTimeout(function(){console.log(i);   
  },0); 
};

答案：3，3，3

解决办法

for(let i = 0; i < 3; i++){setTimeout(function(){console.log(i);   
  },0); 
};
// 0 1 2

for (var i = 0; i < 3; i++) {(function(i) {setTimeout(function () {console.log(i);
    }, 0, i)
  })(i)
};
// 0 1 2

12、什么是 Promise？解决了什么问题？

有什么用呢？

• 1、解决回调天堂问题
• 2、代码可读性进步
• 3、你能够信赖 Promise，它的状态只会扭转一次并且不可逆

举荐浏览

• 是什么：举荐阮一峰大佬的文章 Promise 对象
• 原理：举荐我这篇手写 Promise 原理，最通俗易懂的版本！！！【浏览：1.2w，点赞：466】

13、什么是 async/await？解决了什么问题？

对于 async/await，我总结为一句话async/await 是 generator + Promise 的语法糖，它用同步形式执行异步代码

举荐浏览

• async/await 的用法：阮一峰大佬的文章 async 和 await

• async/await 的原理：举荐我的这篇 7 张图，20 分钟就能搞定的 async/await 原理！为什么要拖那么久？【浏览：2.1w，点赞：630】

  14、罕用的正则表达式有哪些？

  看我这篇文章有了这 25 个正则表达式，代码效率进步 80%【浏览：1.6w 点赞：830】

  15、JS 提早加载的办法有哪些？

• 1、<script async src="script.js"></script>：给 script 标签加 async 属性，则加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）
• 2、<script defer src="script.js"></script>：给 script 标签加 defer 属性，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），然而 script.js 的执行要在所有元素解析实现之后，DOMContentLoaded 事件触发之前实现
• 3、动态创建 script 标签：等到DOMContentLoaded 事件触发时，生成一个 script 标签，渲染到页面上上

• 4、setTimeout 定时器提早代码执行

  16、new 操作符为什么能创立一个实例对象？

  剖析一下 new 的整个过程：

• 1、创立一个空对象
• 2、继承构造函数的原型
• 3、this 指向 obj，并调用构造函数
• 4、返回对象

简略实现一下 new：

function myNew (fn, ...args) {
    // 第一步：创立一个空对象
    const obj = {}

    // 第二步：继承构造函数的原型
    obj.__proto__ =  fn.prototype

    // 第三步：this 指向 obj，并调用构造函数
    fn.apply(obj, args)


    // 第四步：返回对象
    return obj
}

17、什么是文档碎片？

• 是什么：一个容器，用于临时寄存创立的 dom 元素，应用 document.createDocumentFragment() 创立

• 有什么用：将须要增加的大量元素 先增加到文档碎片 中，再将文档碎片增加到须要插入的地位，大大减少 dom 操作，进步性能
  例子

  var oFragmeng = document.createDocumentFragment(); 
  
  
  for(var i=0;i<10000;i++)
  
  {var op = document.createElement("span"); 
  
    var oText = document.createTextNode(i); 
  
    op.appendChild(oText); 
  
    // 先附加在文档碎片中
  
    oFragmeng.appendChild(op);  
  
  } 
  
  
  // 最初一次性增加到 document 中
  
  document.body.appendChild(oFragmeng); 

  18、async/await 如何检测报错？

举荐这篇 async await 更优雅的错误处理【浏览量：1.5w，点赞：210】

19、宏工作与微工作有哪些？

宏工作

微工作

20、宏工作与微工作的执行程序？说说 EventLoop？

看看我这篇 setTimeout+Promise+Async 输入程序？很简略呀！

21、Object.defineProperty(target, key, options)，options 可传什么参数？

• value：给 target[key]设置初始值
• get：调用 target[key]时触发
• set：设置 target[key]时触发
• writable：规定 target[key]是否可被重写，默认 false
• enumerable：规定了 key 是否会呈现在 target 的枚举属性中，默认为 false

• configurable：规定了是否扭转 options，以及删除 key 属性，默认 false，具体具体请看 Object.defineProperty 函数的 configurable 配置

  22、什么是防抖？什么是节流？

23、什么是高阶函数？简略实现一个？

高阶函数：英文叫 Higher-order function。JavaScript 的函数其实都指向某个变量。既然变量能够指向函数，函数的参数能接管变量，那么一个函数就能够接管另一个函数作为参数，这种函数就称之为高阶函数。

// 简略的高阶函数
function add(x, y, f) {return f(x) + f(y);
}

// 用代码验证一下：add(-5, 6, Math.abs); // 11

像数组的 map、reduce、filter 这些都是高阶函数

24、什么是函数柯里化？简略实现一个？

柯里化，英语：Currying(果然是满满的英译中的既视感)，是把承受多个参数的函数变换成承受一个繁多参数（最后函数的第一个参数）的函数，并且返回承受余下的参数而且返回后果的新函数的技术。

// 一般的 add 函数
function add(x, y) {return x + y}

// Currying 后
function curryingAdd(x) {return function (y) {return x + y}
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

益处

• 1、参数复用

  // 失常正则验证字符串 reg.test(txt)
  
  // 一般状况
  function check(reg, txt) {return reg.test(txt)
  }
  
  check(/\d+/g, 'test')       //false
  check(/[a-z]+/g, 'test')    //true
  
  // Currying 后
  function curryingCheck(reg) {return function(txt) {return reg.test(txt)
    }
  }
  
  var hasNumber = curryingCheck(/\d+/g)
  var hasLetter = curryingCheck(/[a-z]+/g)
  
  hasNumber('test1')      // true
  hasNumber('testtest')   // false
  hasLetter('21212')      // false

• 2、提早执行
  其实 Function.prototype.bind 就是科里化的实现例子

  function sayKey(key) {console.log(this[key])
  }
  const person = {
  name: 'Sunshine_Lin',
  age: 23
  }
  // call 不是科里化
  sayKey.call(person, 'name') // 立刻输入 Sunshine_Lin
  sayKey.call(person, 'age') // 立刻输入 23
  
  // bind 是科里化
  const say = sayKey.bind(person) // 不执行
  // 想执行再执行
  say('name') // Sunshine_Lin
  say('age') // 23

  25、什么是 compose？简略实现一个？

  简略的 compose 函数

  const compose = (a , b) => c => a(b( c) );

  例子：统计单词个数

  // 一般写法
  console.log(len(space('i am linsanxin'))) // 3
  console.log(len(space('i am 23 year old'))) // 6
  console.log(len(space('i am a author in juejin'))) // 7
  
  
  // compose 写法
  const compose = (...fn) => value => {return fn.reduce((value, fn) => {return fn(value)
  }, value)
  }
  const computedWord = compose(space, len)
  console.log(computedWord('i am linsanxin')) // 3
  console.log(computedWord('i am 23 year old')) // 6
  console.log(computedWord('i am a author in juejin')) // 7

  26、箭头函数与一般函数的区别？

• 1、箭头函数不可作为构造函数，不能应用 new
• 2、箭头函数没有本人的 this
• 3、箭头函数没有 arguments 对象

• 4、箭头函数没有原型对象

  27、Symbol 的利用场景？

  利用场景 1：应用 Symbol 来作为对象属性名

  平时咱们对象的属性都是字符串

  const obj = {
  name: 'Sunshine_Lin',
  age: 23
  }
  console.log(obj['name']) // 'Sunshine_Lin'
  console.log(obj['age']) // 23

  其实也能够用 Symbol 来当做属性名

  const gender = Symbol('gender')
  const obj = {
  name: 'Sunshine_Lin',
  age: 23,
  [gender]: '男'
  }
  console.log(obj['name']) // 'Sunshine_Lin'
  console.log(obj['age']) // 23
  console.log(obj[gender]) // 男

  然而 Symbol 作为属性的属性不会被枚举进去，这也是 JSON.stringfy(obj) 时，Symbol 属性会被排除在外的起因

  console.log(Object.keys(obj)) // ['name', 'age']
  for(const key in obj) {console.log(key) // name age
  }
  console.log(JSON.stringify(obj)) // {"name":"Sunshine_Lin","age":23}

  其实想获取 Symbol 属性也不是没方法。

  // 办法一
  console.log(Object.getOwnPropertySymbols(obj)) // [Symbol(gender) ]
  // 办法二
  console.log(Reflect.ownKeys(obj)) // ['name', 'age', Symbol(gender) ]

利用场景 2：应用 Symbol 来代替常量

有以下场景

// 赋值
const one = 'oneXin'
const two = 'twoXin'

function fun(key) {switch (key) {
    case one:
        return 'one'
      break;
    case two:
        return 'two'
      break;
  }
}

如果变量少的话还好，然而变量多的时候，赋值命名很烦，能够利用 Symbol 的唯一性

const one = Symbol()
const two = Symbol()

利用场景 3：应用 Symbol 定义类的公有属性

以下例子，PASSWORD 属性无奈在实例里获取到

class Login {constructor(username, password) {const PASSWORD = Symbol()
    this.username = username
    this[PASSWORD] = password
  }
  checkPassword(pwd) {return this[PASSWORD] === pwd }
}

const login = new Login('123456', 'hahah')

console.log(login.PASSWORD) // 报错
console.log(login[PASSWORD]) // 报错
console.log(login[PASSWORD]) // 报错

28、AMD 和 CMD 的区别？

29、Commonjs 和 ES6 Module 的区别

取自 阿里巴巴淘系技术前端团队 的答复：

• 1、Commonjs 是拷贝输入，ES6 模块化是援用输入
• 2、Commonjs 是运行时加载，ES6 模块化是编译时输入接口
• 3、Commonjs 是单个值导出，ES6 模块化能够多个值导出
• 4、Commonjs 是动静语法可写在函数体中，ES6 模块化动态语法只能写在顶层

• 5、Commonjs 的 this 是以后模块化，ES6 模块化的 this 是 undefined
  举荐文章 CommonJS 模块与 ES6 模块的区别

  30、为什么 Commonjs 不适用于浏览器

  var math = require('math');
  
  math.add(2, 3);

  第二行 math.add(2, 3)，在第一行 require(‘math’)之后运行，因而必须等 math.js 加载实现。也就是说，如果加载工夫很长，整个利用就会停在那里等。

这对服务器端不是一个问题，因为所有的模块都寄存在本地硬盘，能够同步加载实现，等待时间就是硬盘的读取工夫。然而，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于 ” 假死 ” 状态。

因而，浏览器端的模块，不能采纳 ” 同步加载 ”（synchronous），只能采纳 ” 异步加载 ”（asynchronous）。这就是 AMD 标准诞生的背景。

31、罕用的 ES6-ES12 的语法有哪些？

请看我这篇文章根底很好？总结了 38 个 ES6-ES12 的开发技巧，倒要看看你能拿几分？【浏览量：4w，点赞：1.8k】

32、(a == 1 && a == 2 && a == 3) 有可能是 true 吗？

请看我这篇文章(a == 1 && a == 2 && a == 3) 有可能是 true 吗？

33、函数的 length 是多少？

请看我这篇文章 95% 的人都答复不上来的问题：函数的 length 是多少？

35、JS 中的 MUL 函数

MUL 示意数的简略乘法。在这种技术中，将一个值作为参数传递给一个函数，而该函数将返回另一个函数，将第二个值传递给该函数，而后反复持续。例如:xy z 能够示意为

const mul = x => y => z => x * y * z

console.log(mul(1)(2)(3)) // 6

36、深度遍历广度遍历的区别？

对于算法来说 无非就是工夫换空间 空间换工夫

• 1、深度优先不须要记住所有的节点, 所以占用空间小, 而广度优先须要先记录所有的节点占用空间大
• 2、深度优先有回溯的操作 (没有路走了须要回头) 所以相对而言工夫会长一点
• 3、深度优先采纳的是堆栈的模式, 即先进后出

• 4、广度优先则采纳的是队列的模式, 即先进先出

  37、JS 中的设计模式有哪些？

  举荐这篇文章：JavaScript 设计模式【浏览：4.4w，点赞：1250】

  38、forEach 如何跳出循环？

  forEach 是不能通过 break 或者 return 来实现跳出循环的，为什么呢？实现过 forEach 的同学应该都晓得，forEach 的的回调函数造成了一个作用域，在外面应用 return 并不会跳出，只会被当做 continue

那怎么跳出循环呢？能够利用 try catch

  function getItemById(arr, id) {
        var item = null;
        try {arr.forEach(function (curItem, i) {if (curItem.id == id) {
                    item = curItem;
                    throw Error();}
            })
        } catch (e) { }
        return item;
    }

39、JS 中如何将页面重定向到另一个页面？

• 1、应用 location.href：window.location.href =“https://www.onlineinterviewqu…”

• 2、应用 location.replace：window.location.replace(” https://www.onlineinterviewqu…;”);

  40、实现一遍罕用的 JS 原生办法？

  举荐我这篇：3 小时实现了这 30 个 JS 原生办法【浏览：1.2w，点赞：488】

41、鼠标事件有哪些？

注明：鼠标左中右键看 event 对象上的 button 属性，对应 1、2、3
| 事件 | 阐明 |

42、键盘事件有哪些？

注明： event 对象上的 keyCode 属性，是按下的按键的 ASCLL 值 ，通过这个值可分别是按下哪个按键。 ASCLL 表在此 ASCII 码一览表，ASCII 码对照表
| 事件 | 阐明 |

43、JS 中鼠标事件的各个坐标？

44、JS 中元素视图的各个尺寸？

45、Window 视图的各个尺寸？

46、Document 文档视图的各个尺寸？

9 个高级的 JavaScript 办法

1. getBoundingClientRect

1.1 是什么

Element.getBoundingClientRect()  办法返回元素的大小及其绝对于视口的地位。返回的是一个对象，对象里有这 8 个属性：left，right，top，bottom，width，height，x，y

1.2 兼容性

根本在每一个浏览器都能够应用getBoundingClientRect

1.3 判断元素是否在可视区域

这是 getBoundingClientRect 最常利用的场景了，判断一个元素是否残缺呈现在视口里

// html

<div id="box"></div>

body {
       height: 3000px;
       width: 3000px;
      }

#box {
       width: 300px;
       height: 300px;
       background-color: red;
       margin-top: 300px;
       margin-left: 300px;
    }
    
// js

const box = document.getElementById('box')
        window.onscroll = function () {
            // box 残缺呈现在视口里才会输入 true，否则为 false
            console.log(checkInView(box))
        }

function checkInView(dom) {const { top, left, bottom, right} = dom.getBoundingClientRect()
        console.log(top, left, bottom, right)
        console.log(window.innerHeight, window.innerWidth)
        return top >= 0 &&
                left >= 0 &&
                bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                right <= (window.innerWidth || document.documentElement.clientWidth)
        }

依据这个用途，咱们能够实现：懒加载和有限滚动

1.4 毛病？

• 1、每次 scroll 都得从新计算，性能消耗大
• 2、引起 重绘回流

2. IntersectionObserver

2.1 是什么

IntersectionObserver接口 提供了一种异步察看指标元素与其先人元素或顶级文档视窗(viewport) 穿插状态的办法。先人元素与视窗 (viewport) 被称为 根(root)

艰深点说就是：IntersectionObserver是用来监听 某个元素与视口 的穿插状态 的。穿插状态是什么呢？请看下图，一开始整个元素都在视口内，那么元素与视口的穿插状态就是100%，而我往下滚动，元素只有一半显示在视口里，那么元素与视口的穿插状态为50%：

2.2 用法

// 接管两个参数 callback  option
var io = new IntersectionObserver(callback, option);

// 开始察看(可察看多个元素)
io.observe(document.getElementById('example1'));
io.observe(document.getElementById('example2'));

// 进行察看某个元素
io.unobserve(element);

// 敞开观察器
io.disconnect();

2.3 callback

callback个别有两种触发状况。一种是指标元素刚刚进入视口（可见），另一种是齐全来到视口（不可见）。

var io = new IntersectionObserver(
  entries => {console.log(entries);
  }
);

callback函数的参数（entries）是一个数组，每个成员都是一个 IntersectionObserverEntry 对象。举例来说，如果同时有两个被察看的对象的可见性发生变化，entries数组就会有两个成员。

2.4 IntersectionObserverEntry 对象

{
  time: 3893.92,
  rootBounds: ClientRect {
    bottom: 920,
    height: 1024,
    left: 0,
    right: 1024,
    top: 0,
    width: 920
  },
  boundingClientRect: ClientRect {// ...},
  intersectionRect: ClientRect {// ...},
  intersectionRatio: 0.54,
  target: element
}

属性解析：

• time：可见性发生变化的工夫，是一个高精度工夫戳，单位为毫秒
• target：被察看的指标元素，是一个 DOM 节点对象
• rootBounds：根元素的矩形区域的信息，getBoundingClientRect()办法的返回值，如果没有根元素（即间接绝对于视口滚动），则返回null
• boundingClientRect：指标元素的矩形区域的信息
• intersectionRect：指标元素与视口（或根元素）的穿插区域的信息
• intersectionRatio：指标元素的可见比例，即 intersectionRect 占boundingClientRect的比例，齐全可见时为1，齐全不可见时小于等于0

2.5 option

讲讲第二个参数 option 里比拟重要的两个属性：threshold 和 root

首先讲讲threshold：

threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为 [0]，即穿插比例（intersectionRatio）达到0 时触发回调函数。

new IntersectionObserver(entries => {/* ... */}, 
  {threshold: [0, 0.25, 0.5, 0.75, 1]
  }
);

用户能够自定义这个数组。比方，[0, 0.25, 0.5, 0.75, 1]就示意当指标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。

再说说root：

IntersectionObserver API 反对容器内滚动。root属性指定指标元素所在的容器节点（即根元素）。留神，容器元素必须是指标元素的先人节点。

new IntersectionObserver(entries => {/* ... */}, 
  {threshold: [0, 0.25, 0.5, 0.75, 1],
    root: document.getElementById('#container')
  }
);

2.6 残缺例子

body {
            height: 3000px;
            width: 3000px;
        }

#box1 {
            width: 300px;
            height: 300px;
            background-color: red;
            margin-top: 100px;
            margin-left: 300px;
        }
#box2 {
            width: 300px;
            height: 300px;
            background-color: red;
            margin-top: 100px;
            margin-left: 300px;
        }
<div id="box1"></div>
<div id="box2"></div>

const io = new IntersectionObserver(entries => {console.log(entries)
        }, {threshold: [0, 0.25, 0.5, 0.75, 1]
            // root: xxxxxxxxx
        })
io.observe(document.getElementById('box1'))
io.observe(document.getElementById('box2'))

2.7 应用场景

• 1、能够像 getBoundingClientRect 那样判断元素是否在视口里，并且益处是，不会引起重绘回流
• 2、同理，有了第一点性能，就能够做 懒加载和有限滚动 性能了

2.8 毛病

想兼容 IE 的就别思考这个 API 了。。。

3. createNodeIterator

3.1 结识这个 API

我是怎么意识这个 API 的呢？我面试的时候被问到了：说一说，如何遍历输入页面中的所有元素。我第一工夫必定想到应用循环递归去输入。面试官：行吧，回家等音讯吧。

起初我回家一查，才晓得了 createNodeIterator 这个 API

3.2 解题

那如何应用 createNodeIterator 对页面中所有元素进行遍历输入呢？

const body = document.getElementsByTagName('body')[0]
    const it = document.createNodeIterator(body)
    let root = it.nextNode()
    while(root) {console.log(root)
        root = it.nextNode()}

找个网站测试下：

3.3 具体参数

具体参数能够看这里，讲的很具体

3.4 兼容性

一片绿啊，大胆放心使用吧！

4. getComputedStyle

4.1 是什么

Window.getComputedStyle()办法返回一个对象，该对象在利用流动样式表并解析这些值可能蕴含的任何根本计算后报告元素的所有 CSS 属性的值。公有的 CSS 属性值能够通过对象提供的 API 或通过简略地应用 CSS 属性名称进行索引来拜访。

window.getComputedStyle(element, pseudoElement)

• element: 必须，要获取款式的元素。
• pseudoElement: 可选，伪类元素，当不查问伪类元素的时候能够疏忽或者传入 null。

4.2 应用

搭配 getPropertyValue 能够获取到具体款式

// html
#box {
            width: 300px;
            height: 300px;
            background-color: yellow;
    }
    
<div id="box"></div>

const box = document.getElementById('box')
const styles = window.getComputedStyle(box)
// 搭配 getPropertyValue 能够获取到具体款式
const height = styles.getPropertyValue("height")
const width = styles.getPropertyValue("width")
console.log(height, width) //’300px‘'300px'

4.3 兼容性

一片绿油油。放心使用。

5. requestAnimationFrame

这篇文章讲的不错，介绍，用法，兼容性，都说的明明白白：requestAnimationFrame 了解与实际

6. requestIdleCallback

这篇文章讲的不错，介绍，用法，兼容性，都说的明明白白：你应该晓得的 requestIdleCallback

7. DOMContentLoaded

7.1 是什么

当初始的 HTML 文档被齐全加载和解析实现之后，DOMContentLoaded 事件被触发，而无需期待样式表、图像和子框架的齐全加载。

这时问题又来了，“HTML 文档被加载和解析实现”是什么意思呢？或者说，HTML 文档被加载和解析实现之前，浏览器做了哪些事件呢？那咱们须要从浏览器渲染原理来谈谈。

浏览器向服务器申请到了 HTML 文档后便开始解析，产物是 DOM（文档对象模型），到这里 HTML 文档就被加载和解析实现了。如果有 CSS 的会依据 CSS 生成 CSSOM（CSS 对象模型），而后再由 DOM 和 CSSOM 合并产生渲染树。有了渲染树，晓得了所有节点的款式，上面便依据这些节点以及款式计算它们在浏览器中确切的大小和地位，这就是布局阶段。有了以上这些信息，上面就把节点绘制到浏览器上。所有的过程如下图所示：

当初你可能理解 HTML 文档被加载和解析实现前浏览器大略做了哪些工作，但还没完，因为咱们还没有思考当初前端的配角之一 JavaScript。

JavaScript 能够阻塞 DOM 的生成，也就是说当浏览器在解析 HTML 文档时，如果遇到 <script>，便会停下对 HTML 文档的解析，转而去解决脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，而后执行。在解决完脚本之后，浏览器便持续解析 HTML 文档。看上面的例子：

<body>
  <script type="text/javascript">
  console.log(document.getElementById('ele')); // null
  </script>

  <div id="ele"></div>

  <script type="text/javascript">
  console.log(document.getElementById('ele')); // <div id="ele"></div>
  </script>
</body>

另外，因为 JavaScript 能够查问任意对象的款式，所以意味着在 CSS 解析实现，也就是 CSSOM 生成之后，JavaScript 才能够被执行。

到这里，咱们能够总结一下。当文档中没有脚本时，浏览器解析完文档便能触发 DOMContentLoaded 事件；如果文档中蕴含脚本，则脚本会阻塞文档的解析，而脚本须要等 CSSOM 构建实现能力执行。在任何状况下，DOMContentLoaded 的触发不须要期待图片等其余资源加载实现。

7.2 异步脚本

咱们到这里始终在说同步脚本对网页渲染的影响，如果咱们想让页面尽快显示，那咱们能够应用异步脚本。HTML5 中定义了两个定义异步脚本的办法：defer 和 async。咱们来看一看他们的区别。

同步脚本（标签中不含 async 或 defer）：<script src=”***.js” charset=”utf-8″></script>

当 HTML 文档被解析时如果遇见（同步）脚本，则进行解析，先去加载脚本，而后执行，执行完结后持续解析 HTML 文档。过程如下图：

defer 脚本：<script src=”***.js” charset=”utf-8″ defer></script>

当 HTML 文档被解析时如果遇见 defer 脚本，则在后盾加载脚本，文档解析过程不中断，而等文档解析完结之后，defer 脚本执行。另外，defer 脚本的执行程序与定义时的地位无关。过程如下图：

async 脚本：<script src=”***.js” charset=”utf-8″ async></script>

当 HTML 文档被解析时如果遇见 async 脚本，则在后盾加载脚本，文档解析过程不中断。脚本加载实现后，文档进行解析，脚本执行，执行完结后文档持续解析。过程如下图：

如果你 Google “async 和 defer 的区别 ”，你可能会发现一堆相似下面的文章或图片，而在这里，我想跟你分享的是 async 和 defer 对 DOMContentLoaded 事件触发的影响。

defer 与 DOMContentLoaded

如果 script 标签中蕴含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析实现后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行完结后才会被触发。所以这意味着什么呢？HTML 文档解析不受影响，等 DOM 构建实现之后 defer 脚本执行，但脚本执行之前须要期待 CSSOM 构建实现。在 DOM、CSSOM 构建结束，defer 脚本执行实现之后，DOMContentLoaded 事件触发。

async 与 DOMContentLoaded

如果 script 标签中蕴含 async，则 HTML 文档构建不受影响，解析结束后，DOMContentLoaded 触发，而不须要期待 async 脚本执行、样式表加载等等。

7.3 DOMContentLoaded 与 load

在回头看第一张图：

与标记 1 的蓝线平行的还有一条红线，红线就代表 load 事件触发的工夫，对应的，在最上面的概览局部，还有一个用红色标记的 “Load:1.60s”，形容了 load 事件触发的具体工夫。

这两个事件有啥区别呢？点击这个网页你就能明确：https://testdrive-archive.azu…

解释一下，当 HTML 文档解析实现就会触发 DOMContentLoaded，而所有资源加载实现之后，load 事件才会被触发。

另外须要提一下的是，咱们在 jQuery 中常常应用的 $(document).ready(function() {// … 代码 …}); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() {// … 代码 …}); 监听的是 load 事件。

7.4 应用

document.addEventListener("DOMContentLoaded", function(event) {console.log("DOM fully loaded and parsed");
  });

7.5 兼容性

绿油油一片，放心使用

8. MutationObserver

8.1 是什么

MutationObserver 是一个内建对象，它察看 DOM 元素，并在检测到更改时触发回调。

8.2 用法

// 抉择须要察看变动的节点
const targetNode = document.getElementById('some-id');

// 观察器的配置（须要察看什么变动）const config = {attributes: true, childList: true, subtree: true};

// 当察看到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {if (mutation.type === 'childList') {console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {console.log('The' + mutation.attributeName + 'attribute was modified.');
        }
    }
};

// 创立一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始察看指标节点
observer.observe(targetNode, config);

// 之后，可进行察看
observer.disconnect();

8.3 config

config 是一个具备布尔选项的对象，该布尔选项示意“将对哪些更改做出反馈”：

• childList —— node 的间接子节点的更改，
• subtree —— node 的所有后辈的更改，
• attributes —— node 的个性（attribute），
• attributeFilter —— 个性名称数组，只察看选定的个性。
• characterData —— 是否察看 node.data（文本内容）
  其余几个选项：
• attributeOldValue —— 如果为 true，则将个性的旧值和新值都传递给回调（参见下文），否则只传新值（须要 attributes 选项），

• characterDataOldValue —— 如果为 true，则将 node.data 的旧值和新值都传递给回调（参见下文），否则只传新值（须要 characterData 选项）。

  8.4 兼容性

  9. Promise.any

  9.1 是什么

  Promise.any() 接管一个 Promise 可迭代对象，只有其中的一个 promise 胜利，就返回那个曾经胜利的 promise。如果可迭代对象中没有一个 promise 胜利（即所有的 promises 都失败 / 回绝），就返回一个失败的 promise 和 AggregateError 类型的实例，它是 Error 的一个子类，用于把繁多的谬误汇合在一起。实质上，这个办法和 Promise.all() 是相同的。

9.2 用法（例子）

const promise1 = new Promise((resolve, reject) => {setTimeout(reject, 100, 'promise 1 rejected');
});

const promise2 = new Promise((resolve, reject) => {setTimeout(resolve, 400, 'promise 2 resolved at 400 ms');
});

const promise3 = new Promise((resolve, reject) => {setTimeout(resolve, 700, 'promise 3 resolved at 800 ms');
});

(async () => {
  try {let value = await Promise.any([promise1, promise2, promise3]);
    console.log(value);
  } catch (error) {console.log(error);
  }
})();

9.3 兼容性

结语

如果你感觉此文对你有一丁点帮忙，点个赞，激励一下林三心哈哈。或者能够退出我的摸鱼群
想进学习群，摸鱼群，请看我个人资料加我哦，我会定时直播模仿面试，答疑解惑

满分的连忙找我！！！或者评论区通知我哦~~~