https://takao.blog/zh/tags/html/Recent content in Html on Commentary of TakaoHugo -- gohugo.iozhCommentary of TakaoWed, 15 Jul 2026 22:01:08 +0900https://takao.blog/zh/web/performance-critical-rendering-path-optimizations/Sat, 20 Dec 2025 00:00:00 +0900https://takao.blog/zh/web/performance-critical-rendering-path-optimizations/<img src="https://takao.blog/img/thumbnail/performance-critical-rendering-path-optimizations-zh.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/web/css-popover-api/Tue, 20 Aug 2024 00:00:00 +0900https://takao.blog/zh/web/css-popover-api/<img src="https://takao.blog/img/thumbnail/css-popover-api-zh.png" alt="Featured image of post CSS Popover API：无需 JavaScript 的原生覆盖" /><h2 id="介绍">介绍 </h2><p>传统上，构建工具提示、下拉菜单和模式等叠加层需要大量 JavaScript。开发人员依赖 CSS <code>position: absolute</code> 进行手动坐标计算、ARIA 属性以实现可访问性，以及特定于框架的解决方案（例如 React 门户或浮动 UI）。 CSS Popover API 改变了这一点，它提供了一种原生的声明性方式来创建覆盖层，无需任何 JavaScript 即可处理定位、显示/隐藏切换、焦点管理和灯光关闭。</p>