https://takao.blog/zh-tw/tags/html/Recent content in HTML on Commentary of TakaoHugo -- gohugo.iozh-TWCommentary of TakaoWed, 15 Jul 2026 22:01:08 +0900https://takao.blog/zh-tw/web/performance-critical-rendering-path-optimizations/Sat, 20 Dec 2025 00:00:00 +0900https://takao.blog/zh-tw/web/performance-critical-rendering-path-optimizations/<img src="https://takao.blog/img/thumbnail/performance-critical-rendering-path-optimizations-zh-tw.png" alt="Featured image of post 優化瀏覽器渲染管道（關鍵路徑）" /><h2 id="介紹">介紹 </h2><p><strong>關鍵渲染路徑 (CRP)</strong> 是瀏覽器執行的將 HTML、CSS 和 JavaScript 轉換為螢幕上可見像素的步驟序列。優化此管道直接影響<strong>第一內容繪製 (FCP)</strong> 和 <strong>最大內容繪製 (LCP)</strong>。本文詳細介紹了每個 CRP 階段——DOM 構建、CSSOM 構建、渲染樹、佈局、繪製和合成——並提供了可行的最佳化策略。</p>https://takao.blog/zh-tw/web/css-popover-api/Tue, 20 Aug 2024 00:00:00 +0900https://takao.blog/zh-tw/web/css-popover-api/<img src="https://takao.blog/img/thumbnail/css-popover-api-zh-tw.png" alt="Featured image of post CSS Popover API: Native Overlays 不需要 JavaScript" /><h2 id="introduction">Introduction </h2><p>Building overlays like tooltips, dropdown menus, and modals has traditionally required a significant amount of JavaScript. Developers have relied on CSS <code>position: absolute</code> with manual coordinate calculations, ARIA attributes for accessibility, and framework-specific solutions such as React portals or Floating UI. The CSS Popover API changes this by providing a native, declarative way to create overlays that handle positioning, show/hide toggling, focus management, and light dismiss without any JavaScript.</p>