---
title: 網路性能
slug: Web/Performance
tags:
  - API
  - HTML
  - Mobile Performance
  - Performance
translation_of: Web/Performance
original_slug: Web/性能
---
<p>Web性能是負載時間和運行時的客觀度量和用戶體驗。Web性能是指站點加載、交互和回應所需的時間，以及用戶交互過程中內容的流暢程度——滾動是否流暢?按鈕可點擊嗎?彈出窗口加載和顯示的速度是否很快?它們的動畫是否流暢?Web性能包括加載時間、每秒幀數和交互時間等客觀度量，以及加載內容所需時間的主觀體驗。</p>

<p>一個站點的回應時間越長，就會有越多的用戶放棄這個站點。重要的是最小化加載和回應時間，並添加額外的特性來隱藏延遲，使體驗盡可能快地可用並具有交互性，同時非同步地加載體驗的較長尾部分。</p>







<p>有一些工具、api和最佳實踐可以幫助我們度量和改進web性能。我們將在本節介紹它們:</p>

<h2 id="在這一節中">在這一節中</h2>

<p>{{LandingPageListSubpages}}</p>

<div class="cleared topicpage-table">
<div class="section">
<h2 id="選定的教程">選定的教程</h2>

<p>MDN網路性能學習領域包含現代的、最新的教程，涵蓋性能要點:</p>







<p>什麼是網路性能</p>



<p>本文首先介紹了性能實際上是什麼—包括在考慮性能時需要考慮的工具、指標、api、網路和人員組，以及如何將性能作為web開發工作流的一部分。</p>



<p>網路性能基本知識</p>



<p>除了HTML、CSS、JavaScript和媒體檔的前端組件外，還有一些特性可以使應用程式變慢，也有一些特性可以使應用程式主觀上和客觀上變得更快。與web性能相關的api、開發工具、最佳實踐和不良實踐有很多。在這裏，我們將介紹許多基本級別的特性，並提供到更深層次的鏈接，以提高每個主題的性能。</p>



<p>用戶如何看待性能?</p>



<p>比你的網站在幾毫秒內有多快更重要的是你的用戶認為你的網站有多快。頁面加載時間、空閒時間、對用戶交互的回應以及滾動和其他動畫的流暢性都會影響這些感知。在本文中，我們將討論各種加載指標、動畫和回應性指標，以及改進用戶感知的最佳實踐(如果不是實際計時本身)。</p>







<p>多媒體:圖像和視頻</p>



<p>通常，媒體優化是web性能的最低掛果。根據每個用戶代理的功能、大小和像素密度提供不同的媒體檔是可能的。額外的技巧，比如從背景圖像中刪除音軌，可以進一步提高性能。在本文中，我們將討論視頻、音頻和圖像內容對性能的影響，以及確保影響盡可能小的方法。</p>



<p>CSS性能特性</p>



<p>對於改進性能，CSS可能不是很重要的優化重點，但是有一些CSS特性對性能的影響更大。在本文中，我們將介紹一些影響性能的CSS屬性，並介紹一些處理樣式的方法，以確保不會對性能造成負面影響。</p>

<dl>
</dl>
</div>

<div class="section">
<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">使用性能api</h2>

<dl>
 <dt>
 <p>性能的API</p>



 <p>本指南描述了如何使用高解析度時間標準中定義的性能介面。</p>



 <p>資源時機API</p>



 <p>資源加載和這些資源的加載計時，包括管理資源緩衝區和處理CORS</p>



 <p>表演時間</p>



 <p>性能時間軸標準定義了對性能介面的擴展，以支持應用程式中的客戶端延遲測量。這些介面可以一起用來幫助確定應用程式的性能瓶頸。</p>



 <p>用戶時間API</p>



 <p>使用用戶計時API的“標記”和“度量”條目類型來創建特定於應用程式的時間戳——這是流覽器性能時間表的一部分。</p>



 <p>幀定時API</p>



 <p>PerformanceFrameTiming介面提供有關流覽器事件迴圈的幀計時數據。</p>



 <p>燈塔API</p>



 <p>信標介面將非同步和非阻塞請求調度到web伺服器。</p>



 <p>十字路口觀察者API</p>



 <p>學習使用交集觀察者API對元素的可見性進行計時，並在感興趣的元素變得可見時得到非同步通知。</p>
 </dt>
</dl>

<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">其他文檔</h2>

<dl>
 <dt>
 <p>開發工具性能特性</p>



 <p>本節提供有關如何使用和理解開發人員工具(包括瀑布圖、調用樹圖和火焰圖)中的性能特性的資訊。</p>



 <p>理解延遲</p>



 <p>延遲是指從流覽器請求資源到流覽器返回請求的資源的第一個位元組之間所花費的時間。本文將解釋延遲是什麼、它如何影響性能、如何度量延遲以及如何減少延遲。</p>
 </dt>
</dl>
</div>
</div>

<h2 id="術語表">術語表</h2>

<div class="index">
<ul class="index">
 <li>{{glossary('Beacon')}}</li>
 <li>{{glossary('Brotli compression')}}</li>
 <li>{{glossary('Client hints')}}</li>
 <li>{{glossary('Code splitting')}}</li>
 <li>{{glossary('CSSOM')}}</li>
 <li>{{glossary('Domain sharding')}}</li>
 <li>{{glossary('Effective connection type')}}</li>
 <li>{{glossary('First contentful paint')}}</li>
 <li>{{glossary('First CPU idle')}}</li>
 <li>{{glossary('First input delay')}}</li>
 <li>{{glossary('First interactive')}}</li>
 <li>{{glossary('First meaningful paint')}}</li>
 <li>{{glossary('First paint')}}</li>
 <li>{{glossary('HTTP')}}</li>
 <li>{{glossary('HTTP_2', 'HTTP/2')}}</li>
 <li>{{glossary('Jank')}}</li>
 <li>{{glossary('Latency')}}</li>
 <li>{{glossary('Lazy load')}}</li>
 <li>{{glossary('Long task')}}</li>
 <li>{{glossary('Lossless compression')}}</li>
 <li>{{glossary('Lossy compression')}}</li>
 <li>{{glossary('Main thread')}}</li>
 <li>{{glossary('Minification')}}</li>
 <li>{{glossary('Network throttling')}}</li>
 <li>{{glossary('Packet')}}</li>
 <li>{{glossary('Page load time')}}</li>
 <li>{{glossary('Page prediction')}}</li>
 <li>{{glossary('Parse')}}</li>
 <li>{{glossary('Perceived performance')}}</li>
 <li>{{glossary('Prefetch')}}</li>
 <li>{{glossary('Prerender')}}</li>
 <li>{{glossary('QUIC')}}</li>
 <li>{{glossary('RAIL')}}</li>
 <li>{{glossary('Real User Monitoring')}}</li>
 <li>{{glossary('Resource Timing')}}</li>
 <li>{{glossary('Round Trip Time (RTT)')}}</li>
 <li>{{glossary('Server Timing')}}</li>
 <li>{{glossary('Speculative parsing')}}</li>
 <li>{{glossary('Speed index')}}</li>
 <li>{{glossary('SSL')}}</li>
 <li>{{glossary('Synthetic monitoring')}}</li>
 <li>{{glossary('TCP handshake')}}</li>
 <li>{{glossary('TCP slow start')}}</li>
 <li>{{glossary('Time to first byte')}}</li>
 <li>{{glossary('Time to interactive')}}</li>
 <li>{{glossary('TLS')}}</li>
 <li>{{glossary('TCP', 'Transmission Control Protocol (TCP)')}}</li>
 <li>{{glossary('Tree shaking')}}</li>
 <li>{{glossary('Web performance')}}</li>
</ul>
</div>

<h2 id="檔有待書寫">檔有待書寫</h2>

<dl>
 <dt>
 <p>JavaScript性能最佳實踐</p>



 <p>如果使用得當，JavaScript可以提供互動式的、沉浸式的web體驗……或者它會嚴重影響下載時間、渲染時間、應用程式性能、電池壽命和用戶體驗。本文概述了一些JavaScript最佳實踐，這些實踐可以確保即使是複雜內容的性能也是最高的。</p>



 <p>手機的性能</p>



 <p>隨著移動設備上的web訪問變得如此流行，所有的移動平臺都有成熟的web流覽器，但是帶寬、CPU和電池壽命可能有限，因此考慮在這些平臺上web內容的性能非常重要。本文還討論了特定於移動設備的性能注意事項。</p>
 </dt>
 <dt>
 <p>性能瓶頸</p>







 <p>理解帶寬</p>



 <p>帶寬是每秒可以發送的以兆(Mb)或千比特(Kb)為單位的數據量。本文解釋了帶寬在富媒體internet應用程式中的作用，如何度量它，以及如何優化應用程式以最大限度地利用可用帶寬。</p>



 <p>HTTP / 2和你</p>



 <p>傳輸層(即HTTP)對web的功能至關重要，直到最近才以HTTP/2的形式出現重大更新。與它的前輩相比，HTTP/2提供了許多開箱即用的性能改進和優勢，但它也改變了環境。在本文中，您將瞭解HTTP/2為您做了什麼，以及如何對應用程式進行調優，使其更進一步。</p>







 <p>TLS在性能中的作用</p>



 <p>在創建安全的用戶體驗時，tlls(我們傾向於稱之為HTTPS)是至關重要的。雖然硬體已經減少了TLS對伺服器性能的負面影響，但它仍然占了我們等待流覽器連接到伺服器所用時間的很大一部分。本文解釋了TLS握手過程，並提供了一些減少這種時間的技巧，如OCSP裝訂、HSTS預加載頭，以及資源提示在掩蓋第三方TLS延遲方面的潛在作用。</p>







 <p>讀性能圖表</p>



 <p>開發人員工具提供有關性能、記憶體和網路請求的資訊。瞭解如何在流覽器開發人員工具中讀取瀑布圖、調用樹、跟蹤、火焰圖和分配，將有助於您在其他性能工具中理解瀑布圖和火焰圖。</p>



 <p>分析JavaScript包</p>



 <p>毫無疑問，JavaScript是現代web開發的重要組成部分。雖然您應該始終努力減少應用程式中使用的JavaScript的數量，但是很難知道從哪里開始。在本指南中，我們將向您展示如何分析應用程式的腳本包，以便您瞭解自己在使用什麼，以及如何檢測應用程式是否包含包之間的重複腳本。</p>



 <p>延遲加載</p>



 <p>在初始頁面加載時加載所有web應用程式資產並不總是必要的。延遲加載是將頁面上的資產(如腳本、圖像等)的加載延遲到以後的某個時間點。當這些資產確實需要的時候。</p>
 </dt>
 <dt>
 <p>使用import()延遲加載JavaScript</p>



 <p>術語“延遲加載”通常指加載時不需要的資產的延遲加載技術，例如僅在圖像滾動到視圖中時才加載折疊下麵的圖像。現在有了加載JavaScript的本地特性!在本指南中，我們將討論dynamic import()語句，這是一個較新的流覽器特性，可以根據需要加載JavaScript模組。</p>



 <p>使用資源提示控制資源交付</p>



 <p>當涉及到資源優先順序和交付時，流覽器通常比我們更清楚，但是他們離clairyovant還很遠。本地流覽器特性使我們能夠在流覽器連接到另一個伺服器時提示它，或者在流覽器知道它需要資源之前預加載資源。如果使用得當，這可以讓快速體驗看起來更快。在本文中，我們將介紹一些本地流覽器特性，如rel=preconnect、rel=dn -prefetch、rel=prefetch和rel=preload，以及如何充分利用它們。</p>



 <p>績效預算</p>



 <p>市場行銷、設計和銷售需求，以及開發人員的經驗，通常是廣告膨脹、第三方腳本和其他會降低web性能的特性。為了幫助設置優先順序，最好設置一個性能預算:一組在開發階段不能超過的限制。在本文中，我們將討論如何創建和堅持性能預算。</p>



 <p>網路性能檢查表</p>



 <p>在開發帶有如何實現每個特性的教程鏈接的應用程式時，需要考慮的特性性能檢查表，包括服務人員、診斷性能問題、字體加載最佳實踐、客戶端提示、創建性能動畫等。</p>



 <p>手機性能檢查表</p>



 <p>影響移動網路用戶在手持電池操作設備上的性能考慮的簡明清單。</p>
 </dt>
</dl>

<h3 id="應用程式的性能">應用程式的性能</h3>

<dl>
 <dt>
 <p>性能的基礎</p>



 <p>對Web應用程式性能的廣泛概述，它是什麼，流覽器如何幫助改進它，以及您可以使用什麼工具和流程來測試和進一步改進它。</p>



 <p>優化啟動性能</p>



 <p>在編寫新應用程式和將應用程式從其他平臺移植到Web上時，幫助您提高啟動性能的技巧和建議。</p>



 <p>使用內置的剖析器進行剖析</p>



 <p>瞭解如何使用Firefox的內置分析器分析應用程式性能。</p>



 <p>CSS和JavaScript動畫性能</p>



 <p>動畫是一個愉快的用戶體驗的關鍵。本文討論了CSS和基於javascript的動畫之間的性能差異</p>
 </dt>
 <dd>. </dd>
</dl>

<p><span class="alllinks"><a href="/en-US/docs/tag/Performance">View all articles about performance...</a></span></p>

<h2 id="See_also">See also</h2>

<p>HTML</p>

<ul>
 <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
 <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
 <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
 <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
  <ul>
   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
</ul>

<p>CSS</p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
 <li>GPU v CPU</li>
 <li>Measuring layout</li>
 <li>Font-loading best practices</li>
</ul>

<p>JavaScript</p>

<ul>
 <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
 <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
 <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
</ul>

<p>APIs</p>

<ul>
 <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
 <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
 <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
 <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
 <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
 <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
 <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
 <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
 <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
 <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
 <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
 <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
 <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
 <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
  <ul>
   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
 <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
 <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
 <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
</ul>

<p>Headers</p>

<ul>
 <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
 <li>HTTP/2</li>
 <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
 <li>Client Hints</li>
</ul>

<p>Tools</p>

<ul>
 <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
 <li>Flame charts</li>
 <li>The Network panel</li>
 <li>Waterfall charts</li>
</ul>

<p>Additional Metrics</p>

<ul>
 <li>Speed Index and Perceptual Speed Index</li>
</ul>

<p>Best Practices</p>

<ul>
 <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
 <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
  <ul>
   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
 <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
 <li>Content Delivery Networks (CDN)</li>
</ul>