網絡性能技巧 - 超越基礎知識

>本文由New Relic贊助。感謝您支持使SitePoint成為可能的讚助商！ 多年來，我們在Sitepoint上進行了很多演出，我們相信現在是時候以一些更高級的方面來重新審視該主題了。本文中提到的方法與PHP無關，但是如果正確使用，您可以確定它們將使您的應用程序達到全新的水平。請注意，我們不會涵蓋通常的內容 - 對CS，JS和圖像的要求更少，這意味著更快的網站和類似的提示是常識。相反，我們將專注於一些鮮為人知/用過的升級。 >

鑰匙要點

>最大程度地減少HTML元素和不必要的標籤可以幫助提高Web性能。使用預取技術提前加載資源也可以增強速度和用戶體驗。

>使用CSSLINT和CSS諸如檢測錯誤和潛在性能問題的工具驗證您的CSS。使用CSS 2D翻譯以移動對象而不是頂部/左/左可以提高性能。

> Google的PagesPeed模塊可​​以自動實施網站優化的最佳實踐，改善靜態資源的服務，縮小和優化CSS和JavaScript，並降低圖像大小。
• >
使用Google的開源壓縮算法，Zopfli可以將壓縮增加3-8％，這對於向大量客戶提供靜態內容的網站可能會產生明顯的影響。
• >
小型性能修復程序可能會對網站的整體性能產生重大影響。利用HAR和DEV工具分析等工具來監視您的網站的性能並實施必要的改進。
html
• >
>刪除不必要的標籤

越少元素，越好。刪除不必要的html。

• vs.
  當然，

  不適用於所有情況，但是以一種使您可以刪除盡可能多的DOM元素的方式構建您的HTML。

  >您還可以通過省略一些不需要的標籤來減少HTML文檔的文件大小。這確實看起來往往相當駭人聽聞，並且似乎符合標準，因此只有在部署到生產時才能完成 - 這樣您就不會混淆其他從事相同代碼的開發人員。

  <span><span><span><div</span>></span>
  </span>    <span><span><span><div</span>></span>
  </span>        <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span><span><span><span></div</span>></span></span>

  預摘要

  <span><span><span><div</span>></span>
  </span>    <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span><span><span><span></div</span>></span></span>

  >預選是指您提前需要資源的瀏覽器。資源可以是域的IP（DNS預取），圖像或CSS文件等靜態資源，甚至是整個頁面。

  >當您期望用戶訪問您的網站後使用用戶到另一個域時，或者，例如，您將靜態資源託管在諸如images.example.com之類的子域上時，DNS預摘要可以幫助刪除它為刪除它所需的幾個miliseconds DNS服務器將images.example.com解析為IP地址。收益並不多，但積累，它可以削減一些不錯的加載時間，從您提出的用戶瀏覽器的要求。 DNS預摘要是在

  中使用進行的：，並在所有主要瀏覽器中支持。如果您有任何子域，您希望當前的訪問者使用當前的頁面完成後加載，沒有理由不使用DNS Prefetch。 >當您知道下一次訪問中需要一些資源時，您可以預摘要並將它們存儲在瀏覽器緩存中。例如，如果您有一個博客，並且在該博客上有一篇分為兩部分的文章，則可以確保預載第二部分中的靜態資源（即圖像）。這樣就這樣做了：。 Picasa Web專輯廣泛使用此圖表將2個以下圖像預先添加到您當前正在查看的圖像。在較舊的瀏覽器上，您可以通過在JavaScript中加載幻影映像元素來實現這一目標：

  <span><span><span><div</span>></span>
  </span>    <span><span><span><div</span>></span>
  </span>        <span><span><span><p</span>></span>Some of my<span><span><span</span>></span>text<span><span></span</span>></span>.<span><span></p</span>></span>
  </span>    <span><span><span></div</span>></span>
  </span><span><span><span></div</span>></span></span>

  這將圖像加載到緩存中，但在任何地方都不使用。不過，此方法對CSS和JS文件不起作用，因此，如果您希望它們在古代瀏覽器中預取，則必須對這些資源發揮創造力。 XMLHTTPREQUEST浮出水面 - 通過Ajax加載它們，不要在任何地方使用它們。請參閱此處有關如何實現這一目標的信息。
  >要注意的一件事是僅預取用我們確定或幾乎確定用戶需要的資源。如果用戶正在閱讀分頁的博客文章，請肯定，請先預取。如果用戶在表單提交屏幕上，請肯定會在提交後將其重定向到屏幕上可以預見的資源。不要將整個網站預摘要，也不要隨機預取 - 考慮帶寬，並謹慎使用預取，請牢記移動設備。移動設備通常在有限的帶寬上，預先載荷2MB映像可能不會非常用戶友好。您可以通過選擇性預取料來避免這些問題 - 檢測用戶何時在移動設備上或在有限的帶寬連接上，並且在這種情況下不要使用預取。更好的是，將設置添加到您的網站上，並要求人們同意預取用- 將他們的喜好保存到LocalStorage中，並使用用戶代理字符串將其放置，從而允許他們分別允許或不允許在每個設備上進行預取。

  >您還可以預摘要和predender整個頁面。預摘要頁面意味著獲取其DOM含量 - HTML。由於大多數內容實際上是JavaScript，CSS和圖像，因此通常不會提供太大的速度提升 - 頁面預取的內容未獲取內容。目前，這種類型的提取僅由Firefox完全支持。預處理是另一回事 - 預先啟動僅在Chrome中，它不僅可以在幕後獲取DOM，而且還以CSS，JS和圖像的形式獲取所有相關內容。實際上，它已經在背景中呈現整個頁面 - 該頁面坐在RAM中，完全打開和渲染，等待訪問。當用戶單擊Prerendered鏈接時，這可以立即進行更改，但引入了與上一段中所述的相同問題 - 帶寬可能會受到影響。此外，您的服務器將此Prerender註冊為訪問，因此，如果用戶實際上改變了主意並且最終不會打開Prerendered網站，則可能會得到一些偏斜的分析。 prerender語法為：。

  。 目前，只有一種適當的方法可以檢測您的頁面已被預先處理或預取，這就是頁面可見性API，目前在Android瀏覽器和Opera Mini以外的所有主要瀏覽器中都支持該頁面。您使用此API來確保該頁面實際上是在觀看，然後啟動您可能正在執行的任何分析。
  > css

> css lint

• >使用CSSLINT驗證您的CSS並指出錯誤和潛在的性能問題。閱讀並尊重CSSlint Wiki中規定的規則，以編寫最有效的CSS。
  > css解釋
  很像SQL在數據庫世界中解釋，也有一個漂亮的CSS解釋工具 - https：//github.com/josh/css-ecplain。您可以使用它來分析CSS選擇器。如果您想立即對其進行測試，請將此文件的內容粘貼到瀏覽器的控制台中，然後發出命令，例如cssexplain（'。item.subclass.anotherclass'）。

• 的目標是在1到10的比例下獲得最低的得分。您也可以在我的JSFiddle中嘗試一下。雖然結果不太認真（最好遵循CSSLINT建議），但他們仍然在解釋選擇器的複雜性方面做得很好，至少暗示了可能的問題。
  >翻譯與頂部/左

  >使用CSS 2D翻譯以移動對象而不是頂部/左/左。當保羅·愛爾蘭人和克里斯·科耶（Paul Irish）和克里斯·科耶（Chris Coyer）做得非常出色時，嘗試詳細解釋這一點是沒有意義的。確保您閱讀/觀看它們的材料，並在可能的情況下烘烤這些知識 -

  在可能的

  >。

• >平滑滾動

  您可能已經註意到，諸如Facebook和Google take 年齡之類的網站在打開它們時可以滾動。幾乎就像他們需要時間進行熱身。這是當今許多網站上的問題，也是一個巨大的UX Gutpunch。使您的頁面順利滾動並不像看起來那樣困難，尤其是當您知道要尋找什麼時。減少滾動滯後的關鍵是最大程度地減少油漆- 油漆是當屏幕上的內容從框架上變化時會發生什麼，並且瀏覽器需要在屏幕上重新粉刷它- 它需要計算新的外觀，並將這種新外觀拍打到渲染網站的其中一層包括。有關這些問題的更多信息，並了解如何診斷油漆問題，請參閱Paul Lewis的出色帖子。

  >服務器

>用一些簡單的獲勝來優化您的php

• >您可以做很多事情來從PHP側加速您的應用程序。有關一些簡單的勝利，請參閱弗雷德里克·米切爾（Fredric Mitchell）的最後一篇文章或SitePoint上的任何其他與績效有關的文章。

  >

  使用Google的PagesPeed模塊

  Google的PagesPeed模塊是一個模塊，您可以安裝到Nginx和Apache中，該模塊自動實現了一些最佳實踐以進行網站優化。該模塊評估客戶所感知的網站的性能，確保盡可能尊重所有規則，並特別改善靜態資源的服務。它將為您縮小，優化和壓縮CSS和JavaScript，通過刪除未使用的元數據來降低圖像大小，將標題正確設置為更好地利用瀏覽器緩存等等。最重要的是 - 它不需要您的架構更改。只需將其插入您的服務器即可。要安裝模塊，請按照以下說明進行操作 - 您需要從nginx的來源構建，但這僅是一對工作的命令。要正確介紹PagesPeed，請參見以下視頻 - 到目前為止，它已經有點舊了，但仍然是一個非常寶貴的資源：

  >

• 使用spdy

  在類似於PageSpeed的努力中，Google還領導了SPDY的發展。 MOD_SPDY是另一個旨在更快地為您的網站服務的Apache模塊。安裝它並不像人們喜歡的那樣簡單，並且還需要瀏覽器支持，但這一天看起來看起來更好。 SPDY實際上是一種協議（很像HTTP是一個協議），它可以在能夠的情況下攔截並替換HTTP請求，從而更快地為站點服務。有關更多信息，或者更好的是，此新手友好的細分，請參閱此高級概述。雖然使用SPDY可能會冒險，因為我們仍在等待更廣泛的採用，但到目前為止，收益似乎超過了風險。
• >

  使用WebP進行圖像

  WebP是一種旨在替換所有其他方法的圖像格式 - JPG，PNG和GIF。它支持α層（透明度），動畫，無損和有損壓縮等。瀏覽器的採用率非常慢，但是如今，使用可以自動化WebP轉換的工具，例如上述頁面pagespeed模塊（它可以自動將圖像自動轉換為webP）。有關WebP的深入介紹和討論，請參閱此綜合指南。 用zopfli

  壓縮

• >使用zopfli壓縮來預壓縮靜態資源。這是一種開源壓縮算法，再次由Google帶頭，與在線使用的通常壓縮方法相比，該算法將壓縮增加了3-8％。在較小的網站上，這幾乎沒有什麼不同，但是如果您正在擴展應用程序或將靜態內容提供給許多客戶，那麼這肯定會帶來明顯的不同，正如Google Web Fonts團隊所報導的：

結論

有很多方法可以改善應用程序的性能，並且與生活中通常一樣 - 整體大於零件的總和。實施我們在本文中提到的一些措施以及之前提到的措施，您將獲得一個不錯的，有形的改進。實現所有這些，您擁有一個如此快速，可以隨著時間的推移而運行的應用程序。監視您的應用程序，使用HAR，查看開發工具分析或註冊為您提供所有這些服務的服務 - 不要忽略網站的性能方面。雖然這些天大多數項目都是“做和離開”，但不要讓您的客戶不願為您感到驕傲的網站。 永遠不要低估您可以做的小問題 - 您永遠不知道哪一個將是卓越的轉折點！

在網絡性能技巧上經常詢問問題（常見問題解答）

> html中的DIV和跨度標籤之間有什麼區別？ DIV標籤是一個塊級元素，用於較大的代碼塊，而跨度標籤是一個內聯元素，用於一條線內的一小部分HTML。它們之間的主要區別是它們如何影響網頁的佈局。 Div元素創建了一條新線路並佔用全部寬度，而SPAN元素不會創建新線路，並且僅在必要時佔用盡可能多的寬度。

>

>如何提高網站的性能？最有效的方法之一是優化圖像。大型高分辨率圖像可以減慢您的網站，因此調整，壓縮和優化它們的大小很重要。另一種方法是縮小您的CSS和JavaScript文件，這可以減少文件的大小並加快網站的速度。您還可以使用內容交付網絡（CDN）更快地將內容交付給世界各地的用戶。

>網站性能對用戶體驗的影響是什麼？對用戶體驗的重大影響。緩慢加載的網站會使用戶感到沮喪並導致更高的跳出率。另一方面，快速加載的網站可以提高用戶滿意度，提高參與度並可能導致更高的轉化率。因此，優化網站的性能以提供最佳的用戶體驗至關重要。

> html如何影響網站的性能？

極大地影響了網站的性能。例如，不必要的標籤，過度使用表以及不當使用表單可以減慢您的網站。另一方面，乾淨，結構良好的HTML可以提高您的網站的加載速度和整體性能。

>

>有哪些高級的Web性能技巧？預加載以在後台加載資源，實現服務器推動為單個客戶端請求發送多個響應，並使用服務工作者來緩存資源並直接從緩存中提供它們。這些技術可以顯著改善您的網站的性能，但是它們需要對Web技術和仔細實施有深入的了解。

>

>我如何衡量網站的性能？

>您可以使用幾種工具來使用幾種工具衡量您網站的性能，包括Google的PagesPeed Insights，GTMetrix和WebPagetest。這些工具可以為您的網站加載速度，資源使用量和其他性能指標提供詳細的見解。他們還可以提供有關如何提高網站性能的建議。

JavaScript在網站性能中的作用是什麼？雖然它可以增強網站的功能和互動性，但書寫或過多的JavaScript可以減慢網站的速度。因此，重要的是要編寫有效的JavaScript，最大程度地減少其使用，並推遲或異步加載JavaScript文件以提高網站的性能。

> CSS如何影響網站性能？

CSS以多種方式影響網站性能。大型，複雜的CSS文件可以放慢您的網站，因此保持CSS清潔且組織良好很重要。您還應該避免使用過多的CSS動畫，因為它們可能引起性能問題。此外，您應該使用CSS Sprites將多個圖像合併為一張圖像，減少HTTP請求的數量並提高網站的加載速度。

>

>服務器響應時間對網站性能的影響是什麼？ >服務器響應時間是服務器響應瀏覽器請求所需的時間。緩慢的服務器響應時間可以大大減慢您的網站，而快速服務器響應時間可以提高網站的加載速度。因此，重要的是選擇可靠的託管提供商並優化服務器配置以改善服務器響應時間。

>

>如何為移動設備優化我的網站？

>為移動設備優化您的網站至關重要，因為越來越多的用戶正在其智能手機和平板電腦上瀏覽網絡。您可以通過使用響應式設計，優化移動圖像，減少使用重型JavaScript和CSS以及實施移動友好的導航來優化移動設備的網站。您還應該在各種移動設備上測試您的網站，以確保其在所有移動設備上的性能都很好。

以上是網絡性能技巧 - 超越基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！