瀏覽器在渲染時，Render Tree 會在計算 Layout﹑Paint 後，
產生各個堆疊環境 ( 類似圖層 ) 而後將 堆疊環境 合成。
其中的 Layout﹑Paint 的計算會發生在各自的堆疊環境中。
整理-前端三十
閱讀時間約 4 分鐘
HTML
async & defer
傳統 HTML 在解讀時，到了 <script> 便會暫停並執行 JS 直到完成後繼續解析。
為了避免這一情況發生，最簡單暴力的方式就是把 JS 連結放置在最下方。
而後來為了避免這種卡住的狀況，
HTML 4 新增了 defer 屬性
HTML 5 新增了 async 屬性
為了避免這一情況發生，最簡單暴力的方式就是把 JS 連結放置在最下方。
而後來為了避免這種卡住的狀況，
HTML 4 新增了 defer 屬性
HTML 5 新增了 async 屬性
defer = true
當瀏覽器解析到 JS 連結時，defer 屬性會讓瀏覽器繼續執行同時下載所需資源，最後解析結束後才會依序執行 JS。
async = true
async 雖然跟 defer 一樣會同時下載所需資源，但不同的是 async 會在下載完成時立刻暫停 HTML 的解析，開始執行 JS ，結束後繼續 HTML 的解析。
type = "module"
主流現代瀏覽器中還能透過 type = "moudule" 來聲明此 JS 是獨立模組，這時這個 JS 的解析行為會像 defer 一樣，背景下載，等待解析完成才執行 JS 。
可以更改 async 屬性。
defer 會無法生效。
可以更改 async 屬性。
defer 會無法生效。
CSS
Reflow & Repaint
Reflow & Repaint 是 CSS中影響效能的兩個因素
以下的行為會觸發 Reflow
- 設定CSS屬性
大小﹑浮動﹑定位 等等... - 使用者進行互動
調整視窗大小﹑輸入框的內容變更 - JavaScript
DOM操作﹑動態載入CSS﹑獲取元素的 Layout 相關屬性
Repaint 為渲染行為，Layout 計算完畢後，會執行 Paint 。
只要是螢幕上的實際像素產生變化便會觸發 Repaint。
只要是螢幕上的實際像素產生變化便會觸發 Repaint。
瀏覽器是如何優化效能的
因為 Layout 的計算相當花費資源，所以設計者設下規則，當 Reflow 時，瀏覽器會自動批次執行。
而當 DOM 元素被觸發變化時，瀏覽器會自動根據變化省略不需要的步驟。
EX.
EX.
- width 變化 : 先 Reflow 後 Repaint
- color 變化 : 跳過 Reflow，直接進入 Repaint
常見的優化方法如下
屬性替換
- 用 translate 代替 top﹑right等定位屬性
- 表格的物理屬性會互相影響，進而觸發 Reflow，所以避免使用 table 進行排版
批次修改
使用 JS 修改 CSS 時，盡量設定為批次修改
- 替換 class name 或修改 cssText，而不是對 DOM 的 style 屬性逐條設定
- 透過 el.cloneNode() 複製一份 DOM，複製的 DOM 修改樣式後，替換原本的 DOM
- 透過 document.createDocumentFragment() 建立 Docment Fragments，編輯 DOM 後再加回 DOM tree 中
減少影響範圍
- 避免 DOM﹑CSSOM tree 的層級過深，加快 Layout 計算
- 透過 JS 取得 DOM 屬性時，先暫存起來，不要重複觸發 Reflow
- 變化頻繁的地方建立單獨的圖層( Stacking Context )，降低 Reflow 計算複雜度
z-index & Stacking Context
當 postition 屬性變動時就會產生一個新的 CSS 堆疊環境 ( Stacking Context )而堆疊環境內 CSS 樣式改變時，不會觸發其他堆疊環境的 Reflow 。
z-index 也是在堆疊環境中計算的，所以 z-index 無法影響其他堆疊環境。
會建立堆疊環境的行為
- 根元素 <html></html>
- position 設置為 firxed or sticky
- postition 設置為 relative or absolute && 有設置 z-index
- 有設置 transform 屬性
- opacity < 1
另外 DevTools 中的 Layers 頁籤可以確認目前頁面的圖層
元素選取器的運作
CSSOM Tree
JS
FE
BE
WEB
0會員
2內容數
留言0
查看全部
你可能也想看
創作者要怎麼好好休息 + 避免工作過量？《黑貓創作報#4》午安，最近累不累？
這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。
是的，我們這篇講怎麼補充能量，也就是怎麼休息。
2024-06-29
防曬產品係數測試報告彙整(2024年)從2014年起，自己對於市售防曬產品的效能產生了濃厚的興趣。因為當時候發現不少產品的防曬係數其實標示是有問題的，像是原本應該是人體測試的SPF與PA數值，實際上沒有做，只用機器測試的數據來充當，但這兩者卻有很大的差異。像是防曬係數其實有強度、廣度與平均度三個面向需要一起判斷，但多數廠商並沒有完整標示
2023-04-27
什麼是攝類學？學佛教辯論(攝類學)的五大好處攝類學，源自古印度，不僅用於解析佛教經典，更是一種強化邏輯和辯證技能的學問。透過嚴謹的邏輯分析，這門學問不限於佛教徒，對任何尋求提高思考能力的人都是一種寶貴的訓練。它幫助學習者精確分析信息，提升表達和問題解決能力，適用於各個學科和職業領域，是提升智慧和深度思考的理想工具。
2024-06-15
《整理想法的技術》書看過就忘?先整理以前考試最愛買參考書，參考書的編排通常是重點精華+題目+詳解。
不愛讀課本，只看重點精華就去做題目，以為這樣可以節省時間，做題目的時候模模糊糊，A好像也對，C看起來也很像...，根本沒搞清楚基本原理，又要重頭念一次。
才發現重點要自己整理，整理的過程是釐清內容和鞏固記憶最重要的環節。
整理是一
2024-06-05
整理舊東西 Day 1~22024.5.29
今天整理了一些舊東西—CD、書法字練習。
CD收藏品已經是好久以前收藏的了，當時喜好跟現在已經不一樣，現在想想該收拾好，清空空間的時候了，所以就拍照留念，記錄在方格子上，把物品處理掉。
首先是無印良品解散時發行的紀念專輯，記得這好像是我哥買的，後來送給我，當時一聽就很喜歡他
2024-05-29
Factset美股財報前瞻：金融業 (Q1 2024) AI整理與分析【Factset美股財報前瞻：金融業 (Q1 2024) AI整理與分析】看起來美股銀行業到2025年會好一些，金融業也是整體經濟重要的一環，可能等降息後，存款利息的壓力小一些獲利才會改善。
原文參考連結
---
█整理:
▌總體展望
金融業將是未來兩周市場關注的焦點，
2024-05-24
整理不再半途而廢！7個方法，幫你找到堅持整理的動力萬事起頭難，能下定決心開始整理，跨出第一步，真的很不容易。
但是，如何讓自己有堅持下去的動力，直到整理完畢，達到理想的狀態呢？
如果你是個容易半途而廢的人，或是常常做事三分鐘熱度，那麼這篇文章將會給你很大的幫助。
以下是我根據自身的斷捨離經驗，和這幾年來練習極簡生活的體悟，得出7個讓你獲得動力
2024-05-03
2022-01-25
【書選閱讀#021】韓國企劃女神CCC思考整理術：三個步驟，用圖像將想法植入對方的大腦中說不清楚的，就用圖解讓人一看就懂。這是我在《高產出的本事》中提到的一個觀點。比起美感、技巧，視覺化圖解更重要的是你有沒有想法？然後，我們需要的是將你的想法轉化為具體可見的技巧。而這本《韓國企劃女神CCC思考整理術》就是在告訴我們這項技巧，透過三個步驟，九張圖解工具，就能將想法變現、讓人秒懂！
2021-12-02