https://takao.blog/zh/tags/browser/Recent content in Browser on Commentary of TakaoHugo -- gohugo.iozhCommentary of TakaoWed, 15 Jul 2026 22:01:08 +0900https://takao.blog/zh/web/webgpu-native-browser-graphics-generation/Sun, 05 Apr 2026 00:00:00 +0900https://takao.blog/zh/web/webgpu-native-browser-graphics-generation/<img src="https://takao.blog/img/thumbnail/webgpu-native-browser-graphics-generation-zh.png" alt="Featured image of post 从 WebGL 过渡到 WebGPU 以获得更快的图形速度" /><h2 id="从-webgl-过渡到-webgpu-以获得更快的图形速度">从 WebGL 过渡到 WebGPU 以获得更快的图形速度 </h2><p>十多年来，<strong>WebGL</strong> 一直是浏览器中硬件加速 3D 图形的唯一标准。它基于 OpenGL ES 构建，公开了一个在其时代运行良好的状态机 API，但会带来大量 CPU 开销，并且缺乏对现代 GPU 功能的直接访问。输入 <strong>WebGPU</strong> — 专为现代 GPU 架构全新设计的下一代图形和计算 API。</p>https://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>