css動畫好在哪裏,你能清晰的知道js的執行順序嗎

• 頁面的加載過程
• 重排 重繪,爲何css動畫比js動畫性能更好
• js的執行過程
• v8的垃圾回收機制
• 事件循環中微任務宏任務和延遲任務的關係

頁面的加載過程

預解析資源(css/js) =>

parseHtml: 遇到js中止解析等待js資源放回並執行,js資源放回需等待css資源所有放回纔會執行

關係: html 與 css相互不阻塞;

html 與 js相互阻塞;

js 需等待 css 完成才能執行;

不考慮js阻塞時的完整渲染流程:

html=>css=>layout=>layer=>paint=>composite layers

重排 重繪,爲何css動畫比js動畫性能更好

• 重排

  修改了觸發從新佈局的屬性好比 width

  css => layout => layer => paint => composite layers

• 重繪

  修改了只觸發繪製的屬性, 好比color

  css => layer => paint => composite layers

• css動畫(合成)

  css動畫生產了獨立圖層擁有獨立圖層看似修改了佈局,卻不在一個圖層中,全部沒有卻觸發layout,同時越過paint直接進入到合成線程

  css => layer => composite layers

js的執行過程

v8的垃圾回收機制

v8 分爲新老生代 新生代: 8m左右: 平分兩個區域 老生代: 新生代兩次回收還還存在的進入老生代,佔用內存大的直接進入老生代

新生代 一個區域滿後,查詢stack,查找到還在引用的數據,進入另外一個區域,原來區域中的數據所有清理.因此不會產生碎片空間

老生代 清理時只將失效的清理,因此產生碎片空間,當進入的數據佔用的內存過大,碎片空間中沒有能知足的,就會觸發整理碎片機制

事件循環中微任務宏任務和延遲任務的關係

你們都聽過消息隊列,消息隊列裏所有時宏任務

每一個宏任務中還維護這微任務

延遲任務進入延遲任務列表中

消息隊列中的任務所有執行完畢,會去延遲任務中查找全部到期任務,並按照過時時間排序進去消息隊列執行

function callback(){
    console.log(1)
}
setTimeout(callback,0)

new Promise((resolve, reject)=>{
    console.log(2)
    resolve()
    console.log(3)
}).then(()=>{
    console.log(4)
})

function cons (){
    console.log(5)
}

cons()

複製代碼