理解异步~相关知识

官方图解：Chrome 快是有原因的，现代浏览器的多进程架构！	[译]官方图解：Chrome 快是有原因的，现代浏览器的多进程架构！（Part 1） - 掘金	学习这篇文章可以了解浏览器的架构以及每个模块负责的工作，宏观上了解浏览器的工作原理。
进程与线程的一个简单解释	进程与线程的一个简单解释 - 阮一峰的网络日志	文章生动形象的比喻了进程和线程，将抽象的概念形象化了
浏览器进程？线程？傻傻分不清楚！	https://imweb.io/topic/58e3bfa845e5c13468f567d5	重点讲解线程、进程的区别，以及浏览器内核的多线程
定时器标准	HTML Standard	规范对定时器的说明

同步与异步

同步：调用之后得到结果，再干别的任务

// 同步执行
const test = () => {
  let t = +new Date();
  while (true) {
    if (+new Date() - t >= 2000) {
      break;
    }
  }
};
console.log(1);
test();
console.log(2);
console.log(3);

异步：调用之后先不管结果，继续干别的任务

// 异步执行
console.log(1);
setTimeout(() => {
  console.log(2);
}, 2000);
console.log(3);
const test = () => {
  let t = +new Date();
  while (true) {
    if (+new Date() - t >= 5000) {
      break;
    }
  }
};
setTimeout(() => {
  console.log(2);
}, 2000);
test();

 

Linux 提供的查看进程的命令

• ps（process status）
• top(table of processes)

JavaScript单线程

通过【浏览器内核多线程】实现异步

 

渲染进程

1. GUI线程：渲染布局
2. JS引擎线程：（V8引擎）解析、执行JS，与GUI互斥线程
3. 定时触发器线程：setTimeout延时异步执行，setInterval定时循环执行
4. 事件触发线程：将满足触发条件的事件放入任务队列；
5. 异步HTTP请求线程：XHR所在线程，ajax异步请求，当请求完成时，有回调函数返回，就会通知事件触发线程往任务队列添加事件

异步场景：

• 定时器
• 网络请求
• 事件绑定
• ES6 Promise

定时器

定时器存在的问题

1. 定时任务可能不会按时执行（会等前面正在执行的同步任务执行完成，才会调用执行定时任务）
2. 定时器嵌套5次之后最小间隔不能低于4ms（不同浏览器最小间隔也可能不同）

定时器应用场景：防抖，节流，倒计时，动画（存在丢帧问题）

// 作用域问题 //log打印时for已经执行完毕打印出10个"11"
for (var i = 1; i <= 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000 * i);
}

// 每次循环，立刻取当前i值执行setTimeout
for (var i = 1; i <= 10; i++) {
  (function (x) {
    setTimeout(function () {
      console.log(x);
    }, 1000 * i);
  })(i);
}
// 立刻执行
for (var i = 1; i <= 10; i++) {
  var f = function (i) {
    setTimeout(function () {
      console.log(i);
    }, 1000 * i);
  };
  f(i);
}

// 作用域let，取到正确i值
for(let i = 1;i<=10;i++){
    setTimeout(function(){
    	console.log(i)
    },i*1000)
}

1.浏览器采用多进程架构有什么优势和劣势？

答：首先多进程架构是说浏览器的每一个网页都是一个进程。

优势：

• 因为现在一个网页中内容很多，很丰富，会占用很多资源；如果多网页用同一个进程，打开的网页一多，就会让所有的网页变得卡顿，影响操作的响应速度。
• 假设是单进程浏览器；打开多个tab页，如果某一tab网页因为内存溢出、写了个死循环之类等原因导致网页崩溃了，那么因为大家用的是一个进程，那崩溃就一起崩咯，单进程网站的这种缺点，我们就可以用多进程的方法解决，崩了一个页面、一个插件等独立进程的功能我们可以关掉它，重新打开一个tab页，不会影响其它的tab页，解决了问题，这就是我们的优点。
• 单进程浏览器中因为大家的网站都在一个进程里，线程之间是可以读取、改变私有数据的，私有数据就容易被盗取，存在很多安全隐患。而我们改用多进程，进程之间就不会共享资源和地址空间。所有安全问题是有一些保障的。
• 相对于比较占内存的缺点，关掉一个tab网页，就会释放这个网页的进程占用的内存。

劣势：

• 首先就是你的浏览器应用会占用你比较多的CPU内存
• 如果一个浏览器有很多的tab页，那么这个浏览器就会有很多的进程，对于配置稍低些的机器，就会让系统变慢，长时间浏览甚至会失去响应。

2.requestAnimationFrame实现动画比定时器有哪些优势？

答：requestAnimationFrame是请求动画帧，比较专业，就是做这个的。定时器函数的执行是有多方面影响的，在JavaScript中，定时函数在异步线程中，会优先执行主线程任务。如在建立定时器线程到触发执行函数这个间隔有同步执行函数，就会影响动画的播放，定时器的执行时间是固定的，而屏幕分辨率是不同的。

requestAnimationFrame优势：

• 它是跟随系统执行的，在屏幕每次刷新间隔都会执行获取动画帧的回调函数，这样的情况下，它不会像定时器函数那样发生丢帧、动画卡顿的问题。如刷新率是75Hz，那么时间间隔就变成了1000/75=13.3ms，时间间隔是会随着屏幕刷新率变化的。
• 它会比较节省CPU，当页面隐藏或者最小话，由于页面不可见，或者不可用，那此时它的屏幕刷新任务会被系统暂停，停止渲染，当页面再次显示出来，就会接着上次暂停的地方继续执行，而定时函数不会这样，它会继续执行，此时就完全没有必要了，我都看不到了，你动起来给谁看呢。完全就是浪费宝贵的CPU资源。
• 定时函数为了不丢帧，那么间隔请求的时间就会特别短，这样就需要在屏幕的刷新间隔至少执行一次，而屏幕一次刷新间隔中多次执行，就没有必要浪费这个CPU了，你执行好几遍，我就刷一遍出来，你多余的执行操作都浪费了呀。用requestAnimationFrame多节省CPU呀。

3.整理定时器的思维导图。