效能 on Kaisekukun

SEO 和核心網路生命線：揭秘和改進 INP

Tue, 05 May 2026 12:00:00 +0900

INP（與下一個繪製的互動）衡量網頁對使用者互動的回應能力。本文揭開了 Google 的 Core Web Vitals 指標的神秘面紗，探討了它與已棄用的 FID 指標的不同之處，並概述瞭如何優化 JavaScript 執行路徑以獲得「良好」分數。

1.什麼是與下一個繪畫的互動（INP）？

INP 追蹤使用者造訪頁面期間所有使用者互動（點擊、敲擊和鍵盤輸入）的延遲。它測量使用者啟動操作和瀏覽器繪製顯示視覺更新的下一幀之間的持續時間。

它與 FID（首次輸入延遲）有何不同

FID 是 Google 之前的回應指標，但它有一些局限性，很容易被繞過：

首次互動偏差：FID 僅監控第一次使用者互動。由導航選單或點擊過濾器引起的任何後續延遲都將被忽略。
忽略腳本執行：FID 僅計算輸入延遲（瀏覽器接收事件所需的時間）。它忽略了執行實際 JavaScript 事件處理程序和繪製更新的 UI 所需的時間。

INP 透過追蹤會話整個生命週期中的所有交互作用、報告表現最差的交互作用（排除異常值）來解決這些限制。

INP 評分閾值

良好（通過）：200 毫秒或更短
需要改進：200ms 至 500ms
差：超過 500 毫秒

2. INP成績不佳的主要原因

INP 分數低的核心罪魁禍首是主線程阻塞。

由於瀏覽器在單一主執行緒上處理 UI 渲染和 JavaScript 執行，因此啟動複雜的腳本邏輯會立即阻止瀏覽器更新視窗。如果按一下觸發需要 300 毫秒的任務，則螢幕會在該視窗期間凍結，從而提高您的 INP 分數。

3. 優化 INP 的技術

1）任務產出（分解長任務）

任何運行時間超過 50 毫秒的 JavaScript 函數都會被標記為「長任務」。若要解決此問題，請將長時間運行的任務分解為模組化步驟，並將主執行緒傳回瀏覽器以處理 UI 框架。

// ✕ Bad: Continuous loop blocking the main thread
function processArray(items) {
 for (let item of items) {
 calculateComplexResult(item); // Freezes the browser
 }
}

// ◯ Good: Yielding control periodically using async timeouts
async function processArrayOptimized(items) {
 for (let i = 0; i < items.length; i++) {
 calculateComplexResult(items[i]);

 // Yield every 50 items to let the browser paint
 if (i % 50 === 0) {
 await yieldToMainThread();
 }
 }
}

function yieldToMainThread() {
 // Use scheduler.yield if supported, otherwise fallback to setTimeout
 if ('scheduler' in window && 'yield' in window.scheduler) {
 return window.scheduler.yield();
 }
 return new Promise(resolve => setTimeout(resolve, 0));
}

2）優化使用者回饋循環

如果您必須執行繁重的邏輯，請確保在繁重的處理腳本開始之前**使用「載入微調器」或活動按鈕狀態更新 UI。

面向 Web 開發人員的 PostgreSQL 效能調優

Mon, 20 Apr 2026 12:00:00 +0900

透過使用 EXPLAIN 分析 PostgreSQL 中的資料庫查詢來優化效能緩慢的應用程式。緩慢的查詢是大多數 Web 應用程式中最大的瓶頸。本指南將引導您了解基本的索引優化指南、如何閱讀執行計劃以及自託管或託管資料庫的關鍵配置參數調整。

1. 設計有效的指標

現代資料庫的主要瓶頸是磁碟 I/O（從儲存中讀取區塊檔案）。新增索引可以讓PostgreSQL直接查詢資料記錄，而不是掃描整個表。

1）B樹索引預設值

標準 B 樹索引支援多種運算符類別：

直接匹配和範圍（=、<、>、BETWEEN）
連接條件 (JOIN ON ...)
排序操作 (ORDER BY)

2）複合索引的列順序規則

建立複合索引（組合多個欄位）時，PostgreSQL 從左到右解析列。訂單事宜：

-- Create a composite index
CREATE INDEX idx_users_status_created ON users (status, created_at);

-- ◯ Index will be used (leftmost column "status" is present in the query)
SELECT * FROM users WHERE status = 'active' AND created_at > '2026-01-01';
SELECT * FROM users WHERE status = 'active';

-- ✕ Index will NOT be used efficiently (leftmost column "status" is missing)
SELECT * FROM users WHERE created_at > '2026-01-01';

2. 使用 `EXPLAIN ANALYZE` 分析執行計劃

若要診斷慢速查詢，請將 EXPLAIN ANALYZE 新增至您的 SQL 語句中並在控制台中執行它：

必備 Vite Config for Faster Builds

Tue, 24 Feb 2026 15:00:00 +0900

Vite has earned its reputation as a fast frontend build tool, especially when it comes to dev server startup. This article breaks down why Vite is fast and explores configuration tweaks to push build performance even further.

Why Vite Is Fast

The key difference between Vite and traditional bundlers like Webpack is that Vite uses different strategies for development and production.

Dev: Native ES Module Serving

During development, Vite skips bundling entirely. It leverages the browser’s native ES Module 支援, transforming and serving only the files that are requested. This means dev server startup remains instant no matter how large your project grows.