Javascript基础知识点整理四：异步和单线程

IFE     2019年03月24日     分类：   前端知识体系     标签：   javascript     浏览量：   1937

1. 同步和异步

• 同步会阻塞代码执行，而异步不会
• js是单线程执行的语言，所以必须使用异步

2. 前端使用异步的场景

需要等待的地方，如：

• 定时任务：setTimeout,setInterval

console.log(100);
setTimeout(function () {
  console.log(200);
}, 0)
console.log(300);
setTimeout(function () {
  console.log(400);
}, 2000)
console.log(500);
// 100 300 500 200 400

var int = setInterval("clock()", 5000)
function clock () {
  var t = new Date()
  console.log(t);
}
clearInterval(int);
// 5秒后才打印

• 网络请求：ajax请求，动态img加载

// 异步加载图片
console.log('start');
var img = document.createElement('img');
img.onload = function () {
  console.log('loaded');
}
img.src = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2024577988,4224764056&fm=27&gp=0.jpg";
console.log('end');
// start
// end
// loaded

• 事件绑定

3. （扩展）浏览器的多线程

JS的运行通常是在浏览器中进行的，具体由JS引擎去解析和运行。浏览器是多进程的，每打开一个Tab页，就相当于创建了一个独立的浏览器进程。浏览器的渲染进程是多线程的。一个浏览器通常由以下几个常驻的线程：

• GUI渲染线程：顾名思义，该线程负责页面的渲染，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
• JS引擎线程：负责JS的解析和执行
• 定时触发器线程：处理定时事件，比如setTimeout, setInterval
• 事件触发线程：处理DOM事件
• 异步http请求线程：处理http请求

渲染线程和JS引擎线程是不能同时进行的。渲染线程在执行任务的时候，JS引擎线程会被挂起。因为JS可以操作DOM，若在渲染中JS处理了DOM，浏览器可能就不知所措了。

为什么js是单线程执行的语言？
因为浏览器在运行时只开启了一个JS引擎线程来解析和执行JS。为什么只有一个引擎线程？因为如果同时有多个线程去操作DOM，可能会发生冲突。

js引擎工作步骤：

• 词法分析：将源代码分解为有意义的分词
• 语法分析：用语法分析器将分词解析成语法树
• 代码生成：生成机器能运行的代码
• 代码执行

登陆后才可以评论