<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on Commentary of Takao</title><link>https://takao.blog/zh/tags/web/</link><description>Recent content in Web on Commentary of Takao</description><generator>Hugo -- gohugo.io</generator><language>zh</language><copyright>Commentary of Takao</copyright><lastBuildDate>Wed, 15 Jul 2026 22:01:08 +0900</lastBuildDate><atom:link href="https://takao.blog/zh/tags/web/index.xml" rel="self" type="application/rss+xml"/><item><title>2026 年 Web 性能监控工具比较</title><link>https://takao.blog/zh/web/web-performance-monitoring-tools-2026/</link><pubDate>Wed, 08 Jul 2026 10:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/web-performance-monitoring-tools-2026/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/web-performance-monitoring-tools-2026-zh.png" alt="Featured image of post 2026 年 Web 性能监控工具比较" /&gt;&lt;h2 id="为什么灯塔还不够"&gt;为什么灯塔还不够
&lt;/h2&gt;&lt;p&gt;Lighthouse 是一个优秀的诊断工具，但它只测量实验室数据，而不是真实的用户体验。 2026 年的标准实践将实验室测量与真实用户监控 (RUM) 相结合。&lt;/p&gt;
&lt;h2 id="1-web-vitals--chrome-ux-报告和-crux-api"&gt;1. Web Vitals — Chrome UX 报告和 CrUX API
&lt;/h2&gt;&lt;p&gt;Google 的 Chrome 用户体验报告汇总了来自真实 Chrome 用户的现场数据。您可以通过 API 查询它来分析您自己和竞争对手的网站。&lt;/p&gt;</description></item><item><title>React 19 新功能：开发人员需要了解的内容</title><link>https://takao.blog/zh/web/react-19-new-features/</link><pubDate>Wed, 08 Jul 2026 10:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/react-19-new-features/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/react-19-new-features-zh.png" alt="Featured image of post React 19 新功能：开发人员需要了解的内容" /&gt;&lt;h2 id="react-19-发生了什么变化"&gt;React 19 发生了什么变化
&lt;/h2&gt;&lt;p&gt;React 19 不是一个小更新，而是一个范式转变。稳定的服务器组件、新的钩子和 React 编译器从根本上改变了开发人员编写应用程序的方式。&lt;/p&gt;
&lt;h2 id="稳定的服务器组件"&gt;稳定的服务器组件
&lt;/h2&gt;&lt;p&gt;React 服务器组件 (RSC) 现已投入生产。通过在服务器上渲染并将 HTML 发送到客户端，它们可以显着减小包的大小。&lt;/p&gt;</description></item><item><title>Google I/O 2025：集成网络技术和人工智能</title><link>https://takao.blog/zh/web/google-io-2025-web-updates/</link><pubDate>Mon, 05 May 2025 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/google-io-2025-web-updates/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/google-io-2025-web-updates-zh.png" alt="Featured image of post Google I/O 2025：集成网络技术和人工智能" /&gt;&lt;h2 id="介绍"&gt;介绍
&lt;/h2&gt;&lt;p&gt;在 Google 年度开发者大会 &lt;strong&gt;Google I/O 2025&lt;/strong&gt; 上，重大公告强调了人工智能和网络平台的融合。&lt;/p&gt;
&lt;p&gt;对于 Web 开发人员来说，关注点已经扩展到云托管模型端点之外。业界正在向&lt;strong&gt;设备上人工智能执行&lt;/strong&gt;转变，允许开发人员直接在客户端浏览器内运行轻量级法学硕士。&lt;/p&gt;</description></item><item><title>Web开发中XSS的防御原则</title><link>https://takao.blog/zh/web/security-basics-xss-prevention/</link><pubDate>Tue, 25 Feb 2025 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/security-basics-xss-prevention/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/security-basics-xss-prevention-zh.png" alt="Featured image of post Web开发中XSS的防御原则" /&gt;&lt;h2 id="介绍"&gt;介绍
&lt;/h2&gt;&lt;p&gt;在网络安全中，&lt;strong&gt;跨站脚本 (XSS)&lt;/strong&gt; 是最古老、最持久的漏洞之一。&lt;/p&gt;
&lt;p&gt;如果恶意脚本在受害者的浏览器上运行，它们可能会破坏整个会话、窃取会话令牌 (cookie)、劫持帐户或动态更改页面内容以获取敏感凭据。&lt;/p&gt;</description></item><item><title>CSS 锚点定位简介和示例</title><link>https://takao.blog/zh/web/css-anchor-positioning-guide/</link><pubDate>Mon, 10 Feb 2025 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/css-anchor-positioning-guide/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/css-anchor-positioning-guide-zh.png" alt="Featured image of post CSS 锚点定位简介和示例" /&gt;&lt;h2 id="介绍"&gt;介绍
&lt;/h2&gt;&lt;p&gt;在 Web 开发中，相对于特定参考元素（锚点）定位浮动元素（例如工具提示、弹出窗口、下拉菜单和悬停卡）历来是一项复杂的挑战。&lt;/p&gt;
&lt;p&gt;为了使浮动元素在窗口大小调整或页面滚动时跟随锚点，开发人员传统上依靠连续的 JavaScript 坐标计算（使用 &lt;code&gt;getBoundingClientRect()&lt;/code&gt;）来动态更改内联样式。因此，像 Popper.js 或 Floating UI 这样的库成为了行业标准。但是，在滚动事件期间在主线程上执行脚本循环经常会导致渲染延迟和卡顿，尤其是在移动设备上。&lt;/p&gt;</description></item><item><title>适合初学者的任务管理工具：选择正确的工具</title><link>https://takao.blog/zh/web/task-managenemt/</link><pubDate>Tue, 14 Jan 2025 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/task-managenemt/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/task-management-zh.png" alt="Featured image of post 适合初学者的任务管理工具：选择正确的工具" /&gt;&lt;p&gt;你好！今天，我将向您介绍“如何选择任务管理工具”，以更有效地管理您的日常任务。在日常生活中安排“要做的事情”非常重要，无论是工作、学业还是家务。但找到适合您的工具可能有点困难。因此，这里为初学者提供一些提示，帮助您毫不犹豫地选择合适的！&lt;/p&gt;</description></item><item><title>Cloudflare Pages：静态站点托管指南</title><link>https://takao.blog/zh/web/cloudflare-pages/</link><pubDate>Tue, 28 Nov 2023 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/cloudflare-pages/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/how-to-cloudflare-pages-zh.png" alt="Featured image of post Cloudflare Pages：静态站点托管指南" /&gt;&lt;h1 id="cloudflare-pages现代网站的静态站点托管"&gt;Cloudflare Pages：现代网站的静态站点托管
&lt;/h1&gt;&lt;h2 id="介绍"&gt;介绍
&lt;/h2&gt;&lt;p&gt;Cloudflare Pages 是一个构建在 Cloudflare 全球网络基础设施之上的静态站点托管平台。它将世界级 CDN 的速度与直观的部署管道结合在一起，使其成为想要专注于构建而不是配置服务器的开发人员的绝佳选择。从投资组合网站到功能齐全的 Web 应用程序，Cloudflare Pages 可以处理内容交付、SSL 终止和扩展的繁重工作 - 所有这些都提供慷慨的免费套餐。本指南逐步介绍在 Cloudflare Pages 上设置和优化站点的每一步。&lt;/p&gt;</description></item><item><title>Cloudflare 设置指南：安全性和性能</title><link>https://takao.blog/zh/web/cloudflare/</link><pubDate>Tue, 28 Nov 2023 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/cloudflare/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/how-to-cloudflare-zh.png" alt="Featured image of post Cloudflare 设置指南：安全性和性能" /&gt;&lt;h1 id="cloudflare-设置提高网站安全性和性能"&gt;Cloudflare 设置：提高网站安全性和性能
&lt;/h1&gt;&lt;h2 id="介绍"&gt;介绍
&lt;/h2&gt;&lt;p&gt;对于任何网站所有者来说，安全性和速度是同一枚硬币的两个方面。缓慢的网站会让访问者感到沮丧并损害转化率；不安全的网站会使数据和声誉面临风险。 Cloudflare 通过位于访问者和源服务器之间的集成平台解决了这两个问题，该平台同时充当反向代理、内容交付网络和安全网关。本指南逐步介绍如何配置 Cloudflare 的核心功能（从基本 DNS 设置到高级安全规则），以便您可以放心地保护和加速您的网站。&lt;/p&gt;</description></item><item><title>Google Analytics：实施和分析指南</title><link>https://takao.blog/zh/web/google-analytics/</link><pubDate>Fri, 20 Oct 2023 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/google-analytics/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/how-to-google-analytics-zh.png" alt="Featured image of post Google Analytics：实施和分析指南" /&gt;&lt;h1 id="google-analytics实施和分析指南"&gt;Google Analytics：实施和分析指南
&lt;/h1&gt;&lt;p&gt;了解访问者如何与您的网站互动对于发展至关重要。 Google Analytics (GA) 是网络分析的行业标准，可提供对流量来源、用户行为和转化性能的深入洞察。本指南介绍了从帐户创建到高级优化的完整实施过程，以便您可以自信地开始做出数据驱动的决策。&lt;/p&gt;</description></item><item><title>OWASP ZAP：Web 应用程序安全测试指南</title><link>https://takao.blog/zh/web/owasp-zap/</link><pubDate>Fri, 20 Oct 2023 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/owasp-zap/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/how-to-owasp-zap-zh.png" alt="Featured image of post OWASP ZAP：Web 应用程序安全测试指南" /&gt;&lt;h1 id="owasp-zapweb-应用程序安全测试指南"&gt;OWASP ZAP：Web 应用程序安全测试指南
&lt;/h1&gt;&lt;p&gt;Web 应用程序安全性不再是可选的 — 它是保护用户数据和维护信任的基本要求。 OWASP ZAP（Zed Attack Proxy）是最流行的开源安全测试工具之一。它通过自动扫描和手动测试功能帮助开发人员和安全专业人员识别 Web 应用程序中的漏洞。本指南涵盖了从安装到修复的完整工作流程。&lt;/p&gt;</description></item><item><title>时光机：探索互联网档案馆</title><link>https://takao.blog/zh/web/waybackmachine/</link><pubDate>Mon, 11 Sep 2023 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/waybackmachine/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/wayback-machine-zh.png" alt="Featured image of post 时光机：探索互联网档案馆" /&gt;&lt;h1 id="时光机探索互联网档案馆"&gt;时光机：探索互联网档案馆
&lt;/h1&gt;&lt;p&gt;Wayback Machine 是万维网的数字时间胶囊。它由成立于 1996 年的非营利组织互联网档案馆 (Internet Archive) 运营，保存了数十年的网页快照，让任何人都能回到过去，看看网站几年前的样子。无论您是在进行研究、恢复丢失的内容，还是只是对互联网的历史感到好奇，Wayback Machine 都是一个不可或缺的工具。&lt;/p&gt;</description></item><item><title>如何设置 Hugo：初学者完整指南</title><link>https://takao.blog/zh/web/hugo-setup/</link><pubDate>Wed, 23 Aug 2023 00:00:00 +0900</pubDate><guid>https://takao.blog/zh/web/hugo-setup/</guid><description>&lt;img src="https://takao.blog/img/thumbnail/hugo-setup-zh.png" alt="Featured image of post 如何设置 Hugo：初学者完整指南" /&gt;&lt;h1 id="如何安装-hugo---静态站点生成器安装说明"&gt;如何安装 Hugo - 静态站点生成器安装说明
&lt;/h1&gt;&lt;p&gt;Hugo 是一个快速、简单的静态站点生成器和工具，可以轻松构建网站。本文详细介绍了安装 Hugo 的步骤。&lt;/p&gt;
&lt;h2 id="第1步下载hugo"&gt;第1步：下载Hugo
&lt;/h2&gt;&lt;p&gt;要安装 Hugo，首先从官方下载页面下载适当版本的 Hugo 二进制文件。&lt;/p&gt;</description></item></channel></rss>