iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

一個 JS 學習者的日常系列 第 14

一個 JS 學習者的日常 day13

要如何決定今天我們要製作一個移動的動畫,要用 translate 還是去改變 position 呢?
那我們就要了解一下重排(reflow)跟重繪(repaint)

五個步驟:

  1. HTML 轉換成 DOM
  2. CSS 轉換成 CSSOM
  3. 將兩個東西結合,生成一刻渲染樹 (包含每個節點的視覺訊息)
  4. 生成佈局(layout),即將所有渲染入的節點進行平面合成
  5. 將佈局繪製(paint)在平面上

而大致上網頁的變動都不斷在重複 4. 跟 5. 的動作,而效能選擇上的差異便在降低這兩項事情的發生。

需要重排跟重繪的狀況分為

  1. 修改DOM
  2. 修改樣式表
  3. 觸發事件

避免重新渲染,我們可以看看 CSStrigger 這個網站對於 transform 跟 position 的差異。就可以知道哪個選擇上比較合適。



參考資料:
阮一峰的网络日志
CSStrigger


上一篇
一個 JS 學習者的日常 day12
下一篇
一個 JS 學習者的日常 day14
系列文
一個 JS 學習者的日常30

尚未有邦友留言

立即登入留言