好程式設計師web前端分享js引擎的執行機制，一、js是單執行緒語言。js的eventloop是js的執行機制。深入了解js的執行，就等於深入了解js裡的eventloop。
1、靈魂三問：js為什麼是單執行緒的?為什麼需要非同步?單執行緒又是如何實現非同步的呢?
技術的出現，都跟現實世界裡的應用場景密切相關的。同樣的，我們就結合現實場景，來回答這三個問題。
(1)js為什麼是單執行緒的?
js最初被設計用在瀏覽器中，那麼想象一下，如果瀏覽器中的js是多執行緒的。
場景描述：
那麼現在有2個程序，process1process2，由於是多程序的js，所以他們對同乙個dom，同時進行操作。process1刪除了該dom，而process2編輯了該dom，同時下達2個矛盾的命令，瀏覽器究竟該如何執行呢?
這樣想，js為什麼被設計成單執行緒應該就容易理解了吧。
(2)js為什麼需要非同步?
如果js中不存在非同步，只能自上而下執行，如果上一行解析時間很長，那麼下面的**就會被阻塞。對於使用者而言，阻塞就意味著"卡死"，這樣就導致了很差的使用者體驗。
所以，js中存在非同步執行。
(3)js單執行緒又是如何實現非同步的呢?
既然js是單執行緒的，只能在一條執行緒上執行，又是如何實現的非同步呢?
是通過的事件迴圈(eventloop)，理解了eventloop機制，就理解了js的執行機制。
2、js中的eventloop(1)
例1,觀察它的執行順序
console.log(1)settimeout(function(),0)console.log(3)
執行結果是：132
也就是說，settimeout裡的函式並沒有立即執行，而是延遲了一段時間，滿足一定條件後才去執行的，這類**，我們叫非同步**。
所以，這裡我們首先知道了js裡的一種分類方式，就是將任務分為：同步任務和非同步任務。
按照這種分類方式:js的執行機制是：
首先判斷js是同步還是非同步，同步就進入主程序，非同步就進入eventtable
非同步任務在eventtable中註冊函式，當滿足觸發條件後，被推入eventqueue
同步任務進入主線程後一直執行，直到主線程空閒時，才會去eventqueue中檢視是否有可執行的非同步任務，如果有就推入主程序中
以上三步迴圈執行，這就是eventloop。
所以上面的例子，你是否可以描述它的執行順序了呢?
console.log(1)是同步任務，放入主線程裡
settimeout()是非同步任務，被放入eventtable，0秒之後被推入eventqueue裡
console.log(3是同步任務，放到主線程裡
當1、3在控制條被列印後，主線程去eventqueue(事件佇列)裡檢視是否有可執行的函式，執行settimeout裡的函式。
3、js中的eventloop(2)
所以，上面關於eventloop就是我對js執行機制的理解，直到我遇到了下面這段**。
例2：settimeout(function());
newpromise(function(resolve)}).then(function());console.log('**執行結束');
嘗試按照，上文我們剛學到的js執行機制去分析：
settimeout是非同步任務，被放到eventtable
newpromise是同步任務，被放到主程序裡，直接執行列印console.log('馬上執行for迴圈啦')
.then裡的函式是非同步任務，被放到eventtable
console.log('**執行結束')是同步**，被放到主程序裡，直接執行
所以，結果是：馬上執行for迴圈啦---**執行結束---定時器開始啦---執行then函式啦嗎?
親自執行後，結果居然不是這樣，而是：馬上執行for迴圈啦---**執行結束---執行then函式啦---定時器開始啦
那麼，難道是非同步任務的執行順序，不是前後順序，而是另有規定?事實上，按照非同步和同步的劃分方式，並不準確。
而準確的劃分方式是：
macro-task(巨集任務)：包括整體**script，settimeout，setinterval
micro-task(微任務)：promise，process.nexttick
js引擎的執行機制
按照這種分類方式，js的執行機制是：
執行乙個巨集任務，過程中如果遇到微任務，就將其放到微任務的「事件佇列」裡
當前巨集任務執行完成後，會檢視微任務的「事件佇列」，並將裡面全部的微任務依次執行完
重複以上2步驟，結合eventloop(1)eventloop(2)，就是更為準確的js執行機制了
嘗試按照剛學的執行機制，去分析例2：
首先執行script下的巨集任務，遇到settimeout,將其放到巨集任務的「佇列」裡
遇到newpromise直接執行，列印"馬上執行for迴圈啦"
遇到then方法，是微任務，將其放到微任務的「佇列」裡。
列印"**執行結束"
本輪巨集任務執行完畢，檢視本輪的微任務，發現有乙個then方法裡的函式，列印"執行then函式啦"
到此,本輪的eventloop全部完成。
下一輪的迴圈裡，先執行乙個巨集任務，發現巨集任務的「佇列」裡有乙個settimeout裡的函式,執行列印"定時器開始啦"
所以最後的執行順序是：馬上執行for迴圈啦---**執行結束---執行then函式啦---定時器開始啦
4、談談settimeout
這段settimeout**什麼意思?我們一般說:3秒後,會執行settimeout裡的那個函式
settimeout(function(),3000)
但是這種說並不嚴謹，準確的解釋是：3秒後，settimeout裡的函式被會推入eventqueue，而eventqueue(事件佇列)裡的任務，只有在主線程空閒時才會執行。
好程式設計師web前端分享邏輯運算
一門計算機語言，程式設計的核心在於邏輯思想，當我們在編寫程式的時候，邏輯是否通順，是能否正確寫出程式的關鍵，可以說如果你掌握了邏輯，那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...
好程式設計師web前端分享CSS學習 HSLA顏色模式
好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度，值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣，只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...
好程式設計師web前端分享高度自適應
一 寬高自適應 網頁布局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是自適應。它能夠使網頁顯示更靈活，可以適應在不同裝置 不同視窗和不同解析度下顯示。1 寬度自適應 塊元素寬度預設為auto 2 高度自適應 元素 高度不寫 二 浮動元素父元素高度自適應 父...