共计 2892 个字符，预计需要花费 8 分钟才能阅读完成。
springboot 实战电商我的项目 mall4j（https://gitee.com/gz-yami/mall4j)
java 商城零碎源码
1. 介绍
工作一段时间了，明天在这总结一下浏览器执行 JS 工作机制。在自己日常工作中，做的最多的两点，别离是
1. 对设计图进行 HTML CSS 的编写
2. 对接口申请来的数据进行页面渲染
对申请回来的数据进行解决时会波及到异步函数，而 JS 执行代码的时候会先执行同步工作，再执行异步工作。
这时要是执行同步工作外面须要用到一个异步工作的外面值就会抛出谬误，为什么会这样了，上面就从根本的
开始解说了。
2. 浏览器内核
浏览器内核是多线程的，具体有那些呢如下图所示
## 2.1 GUI 渲染线程
次要是负责渲染和解析 HTML，CSS，构建 DOM 树，当对 HTML 标签进行 v -if v-show 等诸如此类的操作时会触发界面的重绘和重排
此时该线程就会执行。
在 JS 引擎执行时会处于休眠状态 会放到另一个工作队列中，当 JS 对 DOM，CSS 等进行操作时，会保留更新状态等到 JS 引擎闲暇时
就会被立刻执行。
2.2 JS 引擎线程
次要负责解决 JavaScript 脚本程序，JS 引擎在解决完主线程的工作时，会始终期待工作队列的工作到来，直到无工作可执行，此时就会
波及到一个问题，因为 JS 是能够对 Dom 进行操作的，这样就有可能会呈现渲染出错的一系列问题，所以浏览器是不容许两者同时执行的
GUI 线程会等到 JS 线程执行完后才会执行期间做出的 GUI 更新会保存起来。
2.3 异步 http 申请线程
在进行网络申请时，会开拓一个新过程，避免阻塞 JS 引擎执行，当状态发生变化时会从工作队列中调回 JS 主线程中，如申请后果是 400，200 这些状态时
2.4 定时器触发线程
JS 代码中 setTimeout 和 setInterval，这两个定时器触发时为了不影响其准确性，浏览器也会新开个线程，来搁置，当计时完结时会先放到
事件线程中 而后在等 JS 引擎闲暇时执行
2.5 事件触发线程
JS 中的点击 触摸等事件触发该线程时 会把事件增加到待处理队列的队尾，期待 JS 引擎的解决
3. 宏工作和微工作
绝对于浏览器的多线程，JS 引擎则是单线程的，其中的历史起因就不细讲了。正因是单线程，JS 执行代码时从上而下执行时，会有 HTTP 申请，定时器等，不可能等到他们执行完才进行下一步，这样会影响用户体验，这时就须要工作队列的帮忙了，上面画了张图便于了解
当主线程的工作执行完后，会向工作队列查问有无可执行的工作，有就拉到主过程执行，没有就不停进行轮询，直到主过程和工作队列都没有有工作了就会停下来。
上图我画了两个工作队列是因为在 JS 中有分宏工作和微工作两种，宏工作执行完后会执行微工作 微工作执行完后会执行宏工作，而主线程算作一个宏工作，所以当主线程的工作执行完后，就会从微工作里查问有无工作可执行，没有就返回宏工作寻找。
宏工作最常见的两个是 setTimeout 和 setInterval，(主线程也是宏工作)，而微任最常见的则是 Promise.then() 外面的内容。
setTimeout(()=>{console.log('宏工作')
},500)
Promise.resolve().then(value=>{console.log('微工作')
})
console.log('已在主过程中, 筹备执行的工作')
JS 工作执行是主过程工作执行完了再执行微工作再宏工作，所以不论你宏工作的定时器设置的有多快都得等到主工作的和微工作执行完能力轮到你执行。
setTimeout(()=>{console.log('等到花都谢了')
},5)
Promise.resolve().then(value=>{for (var i = 0; i<999999999; i++) {console.log('等我跑完')
}
})
console.log('已走完')
当然定时器也不会傻傻的等到同步工作执行完后才开始计时，下面说到的定时器触发线程就是为此筹备的，当代码执行到定时器的时候会把它扔到定时器线程进行计时，当计时结束后就会按快慢来顺次放到宏工作队列里边，雷同工夫则会按先后顺序执行。
setTimeout(()=>{console.log('明明是我先进去的')
},1000)
setTimeout(()=>{console.log('谁叫我速度比你快')
},500)
console.log('坐等')
面试题很喜爱考的一个就是 promise 里嵌套 setTimeout，setTimeout 里嵌套 promise 只有记住一点就不必怕就是
当主线程里没有工作执行了就会先去微工作队列里把工作一个个找进去执行等执行完了所有微工作，才会去宏工作外面找工作执行，就算在微工作外面发现定时器这些宏工作，也会把他们先放到别的工作队列里等这边队列执行完后再去执行。
在主线程中申明的全局变量，在宏工作或者微工作调用的时候是共用的就算定时器工夫相等也会按程序打出
var a = 0
for (var i = 0; i<100; i++) {setTimeout(()=>{console.log(++a)
},1000)
}
当然要是只用思考这些工作队列就简略了，但咱们对这些数据进行解决后须要把他们渲染到页面的时候就又有另一种状况了
由浏览器来决定渲染刷新的频率，这个频率通常跟用户的显示屏率无关，60hz 的话即每秒刷新 60 次，因为每秒渲染是次数固定的，但一旦一个工作执行了成千上万次的 CSS 的扭转就会影响下一次的渲染，过程上的工作会按程序来执行，但抛到每帧渲染的时候就不会按程序来了，像模块挪动的越来越快，屏幕闪屏。所以再编写代码时能够调用 requestAnimationFrame 这个回调函数来限度，
function callback() {moveBox() // 扭转 css 款式的函数
reuquestAnimationFrame(callback)
} // 稳步前进
function callback() {moveBox() // 扭转 css 款式的函数
setTimeout(callback,100)
} // 越来越快 闪屏
js 执行工作时要是遇到代码谬误就会阻塞运行，卡在一处，不论浏览器怎么督促波及到页面渲染的操作都执行不了，也就呈现了页面卡死点击没反馈的状况
4.Promise
promise 对于解决回调天堂和简洁咱们的代码具备很大的作用，promise 有三种状态，pending 期待，另外两个是 resolve 决定和 reject 回绝，初始 new 一个 promise 实例时要是不发送告诉的话前面的.then() 外面的代码是不会执行的
new Promise((resolve,reject)=>{console.log()
// 必须得有 resolve() 或 reject() 其中之一
}).then(value=>{console.log("坐等")
})
// 满足条件后.then() 里的执行代码就会被送去微工作队列了，此时再也无奈扭转 promis 的状态了
springboot 实战电商我的项目 mall4j（https://gitee.com/gz-yami/mall4j)
java 商城零碎源码