单线程 - 只有一个线程,只能做一件事
原因 - 避免 DOM 渲染的冲突
解决方案 - 异步
单线程
console.log('start') var i, sum = 0; for (i = 0; i < 1000000; i++) { sum++ } console.log(sum)
执行上述代码会发现浏览器一直在刷新,卡顿过后结束
alert点击过后才能继续执行代码
原因-
浏览器需要渲染 DOM
JS 可以修改 DOM 结构
JS 执行的时候,浏览器 DOM 渲染会暂停
两段 JS 也不能同时执行(都修改 DOM 就冲突了)
webworker 支持多线程,但是不能访问 DOM
简单的异步
setTimeout(function () { console.log(200) }, 1000) console.log(300) console.log(400) console.log(100) $.ajax({ url: './data.json', success: function (result) { console.log(result) } }) console.log(300) console.log(400)
异步的问题
问题一:没按照书写方式执行,可读性查
问题二:callback 中不容易模块化
eventLoop
事件轮询,JS 实现异步的具体解决方案
同步代码,直接执行
异步函数先放在 异步队列 中
待同步函数执行完毕,轮询执行 异步队列 的函数
详情见https://www.cnblogs.com/ccbest/p/10845536.html
工欲善其事,必先利其器