瀏覽器在渲染時，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
查看全部
你可能也想看
Google News 追蹤
在創作的路上真的很多人問我說
到底要怎麼做出符合自己期待
但又可以表現得很有美感的作品？🥹
這個問題真的應該是每個創作者都一直在學習的課題吧！
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
經過年末年初的大掃除，大家是否也好好整頓了自己的居家環境呢？身為家有幼童的媽媽，我也是歷經多次的練習，才調整到適合自己的清潔節奏，在此與大家分享我的清潔小撇步，每個習慣幾乎不超過5分鐘，就能換得一室乾淨，一起來看吧！
與老公交往12年邁入婚姻，婚前與老公看了二十多間房子，終於選定一棟透天厝，雖然是中古屋，但購入時，前有樹林，旁有稻田，風景十分優美，環境相當清幽。無奈市區土地有限，多年過去，樹林與稻田通通變成建地，我們也多了很多鄰居。同時，我和老公也從二人世界，變成一家四口，多了二個可愛的小寶貝。
跳進全職整理師之後，有幸跟著幾位前輩參與了幾場搬家上架案，想從新手整理師的角度分享關於『無痛搬家』服務的所見所聞提供給想成為整理師或是在觀望這項服務的朋友參考(*´Д`)つ))´∀`)
我們已完成個人財務管理系統的後端核心功能，並進行了中期驗收，確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證，確保後續的前端整合能順利進行。接下來，將實作身份驗證機制並開始Nuxt.js前端開發，提升系統的整體品質與安全性。
【Factset美股財報前瞻：金融業 (Q1 2024) AI整理與分析】看起來美股銀行業到2025年會好一些，金融業也是整體經濟重要的一環，可能等降息後，存款利息的壓力小一些獲利才會改善。
原文參考連結
---
█整理:
▌總體展望
金融業將是未來兩周市場關注的焦點，
※ Javascript和HTML的關係
當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：
解析 HTML / CSS 檔案，建立物件模型：
HTML → DOM (Document Object Model)。
CSS → CSSOM (CSS Obje
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
在創作的路上真的很多人問我說
到底要怎麼做出符合自己期待
但又可以表現得很有美感的作品？🥹
這個問題真的應該是每個創作者都一直在學習的課題吧！
提問的內容越是清晰，強者、聰明人越能在短時間內做判斷、給出精準的建議，他們會對你產生「好印象」，認定你是「積極」的人，有機會、好人脈會不自覺地想引薦給你
經過年末年初的大掃除，大家是否也好好整頓了自己的居家環境呢？身為家有幼童的媽媽，我也是歷經多次的練習，才調整到適合自己的清潔節奏，在此與大家分享我的清潔小撇步，每個習慣幾乎不超過5分鐘，就能換得一室乾淨，一起來看吧！
與老公交往12年邁入婚姻，婚前與老公看了二十多間房子，終於選定一棟透天厝，雖然是中古屋，但購入時，前有樹林，旁有稻田，風景十分優美，環境相當清幽。無奈市區土地有限，多年過去，樹林與稻田通通變成建地，我們也多了很多鄰居。同時，我和老公也從二人世界，變成一家四口，多了二個可愛的小寶貝。
跳進全職整理師之後，有幸跟著幾位前輩參與了幾場搬家上架案，想從新手整理師的角度分享關於『無痛搬家』服務的所見所聞提供給想成為整理師或是在觀望這項服務的朋友參考(*´Д`)つ))´∀`)
我們已完成個人財務管理系統的後端核心功能，並進行了中期驗收，確認API的正確性和需求的達成。通過Postman測試各個API並檢查資料驗證，確保後續的前端整合能順利進行。接下來，將實作身份驗證機制並開始Nuxt.js前端開發，提升系統的整體品質與安全性。
【Factset美股財報前瞻：金融業 (Q1 2024) AI整理與分析】看起來美股銀行業到2025年會好一些，金融業也是整體經濟重要的一環，可能等降息後，存款利息的壓力小一些獲利才會改善。
原文參考連結
---
█整理:
▌總體展望
金融業將是未來兩周市場關注的焦點，
※ Javascript和HTML的關係
當我們輸入新的網址或按下重新整理時，從解析檔案到畫面顯示出來，瀏覽器會進行以下流程：
解析 HTML / CSS 檔案，建立物件模型：
HTML → DOM (Document Object Model)。
CSS → CSSOM (CSS Obje
※ 非同步概念總複習
為什麼要使用 Promise？
在 JavaScript 開發中，處理非同步操作是常見需求，涉及如文件讀寫、數據庫查詢或網路請求等耗時任務。傳統的回調方式可能導致代碼結構混亂，稱為「回調地獄」，難以維護和理解。
Promise 是解決這問題的方法。它是一個物件(objec
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處