1. 程式人生 > >(轉)雅虎WEB前端網站優化 -- 34條軍規

(轉)雅虎WEB前端網站優化 -- 34條軍規

雅虎給出了優化網站載入速度的34條法則(包括Yslow規則22條) 詳細說明,下載轉發 ponytail 的譯文(來自帕蘭映像)。

1.Minimize HTTP Requests 減少HTTP請求

圖片、css、script、flash等等這些都會增加http請求數,減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能的情況下寫進一個檔案,頁面裡直接寫入圖片也是不好的做法,應該寫進CSS裡,利用 CSS sprites 將小圖拼合後利用background來定位。
2.Use a Content Delivery Network 利用CDN技術

CDN 確實是好東西,8過伺服器提供商的這項服務一般是要收費的,我以前買的國內空間是有這個的但是我當時根本不知道啥用,現在沒了。。。
3.Add an Expires or a Cache-Control Header 設定標頭檔案過期或者靜態快取

瀏覽器會用快取來減少http請求數來加快頁面載入的時間,如果頁面頭部加一個很長的過期時間,瀏覽器就會一直快取頁面裡的元素。不過這樣如果 頁面裡的東西變動的話就要改名字了,否則使用者端不會主動重新整理,看自己衡量了~ 這項可以通過修改.htaccess檔案來實現。
4.Gzip Components Gzip壓縮

Gzip格式是一種很普遍的壓縮技術,幾乎所有的瀏覽器都有解壓Gzip格式的能力,而且它可以壓縮的比例非常大,一般壓縮率為85%。壓縮沒壓縮,可以到 這裡 做下測試。
5.Put Stylesheets at the Top 把CSS放頂部

讓瀏覽者能儘早的看到網站的完整樣式。
6.Put Scripts at the Bottom 把JS放底部

網站呈現完畢後再進行功能設定,當然這些JS要在你的載入過程中不影響內容表現。

7.Avoid CSS Expressions 避免CSS Expressions

CSS表示式很可怕,這個只被IE支援的東西執行時候的運算量非常大,你移動一下滑鼠它都要進行重計算的,但有時候為了做瀏覽器的相容必須要用到這個||| IE6去死去死!~
8.Make JavaScript and CSS External 將JS和CSS外鏈

前面講到了快取這個事情,一些較為公用的JS和CSS,我們可以使用外鏈的形式,譬如我就是從Google外鏈來的Jquery檔案,如果我的瀏覽者在瀏覽別的使用了這個外鏈檔案的網站時已經下載並快取了這個檔案,那麼他在瀏覽我的網站的時候就不需要再進行下載了!~
9.Reduce DNS Lookups 減少DNS查詢

貌似是要減少網站從外部呼叫資源,我的Google分析和picasa的外鏈圖片都算在裡面了。
10.Minify JavaScript and CSS 減小JS和CSS的體積

寫JS和CSS都是有技巧的,用最少的程式碼實現同樣的功能,減少空白,增強邏輯性,用縮寫方式等等,當然也有不少工具也能夠幫你實現這一點。
11. Avoid Redirects 避免重定向

再寫入連結時,雖然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 僅有一個最後的”/”只差,但是結果是不同的,伺服器需要花時間把前者重定向為後者然後進行跳轉,這個要自己注意,也可以在Apache裡用Alias 或者mod_rewrite或者DirectorySlash解決。
12. Remove Duplicate Scripts 刪除重複指令碼

重複呼叫的程式碼瀏覽器並不會識別忽略,而是會再次運算一遍,這當然是大大的浪費。
13. Configure ETags 配置ETags

搞不清楚咋回事,總之我是在. htaccess裡把它刪除了。
14. Make Ajax Cacheable 快取Ajax

Ajax是實時響應的,在瀏覽器接收到新的資料前,舊的資料被快取,這樣能夠更好的提高效率。
15. Flush the Buffer Early 儘早的釋放緩衝

當用戶進行頁面請求時,伺服器端需要花費200到500毫秒時間來拼合HTML,將寫在head與body之間,釋放緩衝,這樣可以將檔案頭先發送出去,然後再發送檔案內容,提高效率。
16. Use GET for AJAX Requests 用GET方式進行AJAX請求

Get 方法和伺服器只有一次互動(傳送資料),而 Post 要兩次(傳送頭部再發送資料)。
17. Post-load Components 延遲載入元件

最先載入必須的元件進行頁面初始化,然後再載入其他,YUI Image Loader 是很好的例子。
18. Preload components 預載入元件

提前載入以後可能用到的東西,和延遲載入並不衝突,它的目的是為後續請求提供更快的響應,參見Google首頁上的CSS sprites應用。
19. Reduce the Number of DOM Elements 減少DOM元素數量

複雜的頁面結構意味著更長的下載及響應時間,更合理更高效的使用標籤來架構頁面,是好的前端的必備條件。
20. Split Components Across Domains 跨域分離元件

頁面元件多個來源可以增大你的平行下載量,但注意不要過多,超過2-4個域名會引起上面說到的DNS查詢浪費。
21. Minimize the Number of iframes 減少iframe數量

需要更有效的利用 ifames。
iframe 優點:有利於下載緩慢的廣告等第三方內容,安全沙箱,並行下載指令碼
iframe 缺點:即使為空也會有較大資源消耗,會阻止頁面的onload,非語義
22. No 404s 不要出現404頁面

站點本身裡(非搜尋結果)出現404頁面,無意義的404頁面會影響使用者體驗並且會消耗伺服器資源。
23. Reduce Cookie Size 減小Cookie

Cookie在伺服器及瀏覽器之間的通過檔案頭進行交換,儘可能減小Cookie體積,設定合理的過期時間,能夠很好的提高效率。
24. Use Cookie-free Domains for Components 對元件使用無Cookie的域名

對靜態元件的Cookie讀取是一種浪費,使用另一個無Cookie的域名來存放你的靜態元件式一個好方法,或者也可以在Cookie中只存放帶www的域名。
25. Minimize DOM Access 減少DOM的訪問次數

JS訪問DOM是很慢的,儘量不要用JS來設定頁面佈局。
26. Develop Smart Event Handlers 開發靈活的事件處理控制代碼

DOM樹上過多的元素被加入事件控制代碼的話,反應效率肯定會低,YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設定DOM事件控制代碼
27. Choose < link >over @import 使用< link >而非 @import

在IE中使用@import就和在頁面底部用< link >一樣,我們前面說要把< link >放頂部的。
28. Avoid Filters 避免過濾器的使用

如果需要Alpha透明,不要使用AlphaImageLoader,它效率低下而且只對IE6及以下的版本適用,用PNG8圖片。如果你非要使用,加上_filter以免影響IE7+使用者。
29. Optimize Images 優化圖片

將你的GIF轉為PNG8會是個減小體積的好辦法,另外有很多方法處理你的JPG及PNG圖片以達到優化效果。
30. Optimize CSS Sprites 優化CSS Sprites

在CSS Sprites中豎直並儘量緊湊的排列圖片,儘量將顏色相似的圖片排在一起,會減小圖片本身的大小及提高頁面圖片顯示速度。
31. Don’t Scale Images in HTML 不要在HTML中縮放圖片

圖片要用多大的就用多大的,1000X1000的圖片被width=”100″ height=”100″以後,本身的KB數是不會減少的。
32. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小並快取它

站點的瀏覽器ICO應該不是經常換吧,那就長時間的快取它,並且最好控制在1K以下。
33. Keep Components under 25K 保證元件在25K以下

iPhone不能快取25K以上的元件,並且這還是要在被壓縮前。
34. Pack Components into a Multipart Document 將元件打包進一個多部分的文件中

就好像在郵件中加入附件一樣,一個HTTP請求就夠了,但是這一技術需要確保你的代理支援,iPhone就不支援。

相關推薦

()WEB前端網站優化 -- 34軍規

雅虎給出了優化網站載入速度的34條法則(包括Yslow規則22條) 詳細說明,下載轉發 ponytail 的譯文(來自帕蘭映像)。 1.Minimize HTTP Requests 減少HTTP請求 圖片、css、script、flash等等這些都會增加http請求數,減少這些元素的數量就能減少響應時間。

關於web前端網站優化

follow 加載信息 form out loaded 一次 什麽 ext 頻繁 不知道是哪位大牛的文章,轉過來嘻嘻。 作者:斯迪鏈接:https://www.zhihu.com/question/21658448/answer/18903129來源:知乎著作權歸作者所有。

34軍規(網頁優化

儘量減少 HTTP 請求個數——須權衡 使用 CDN(內容分發網路) 為檔案頭指定 Expires 或 Cache-Control ,使內容具有快取性。 避免空的 src 和 href 使用 gzip 壓縮內容 把 CSS 放到頂部 把 JS 放到底部 避免使用 CSS

Web前端效能優化問題

1、請減少HTTP請求基本原理: 在瀏覽器(客戶端)和伺服器發生通訊時,就已經消耗了大量的時間,尤其是在網路情況比較糟糕的時候,這個問題尤其的突出。 一個正常HTTP請求的流程簡述:如在瀏覽器中輸入"www.xxxxxx.com"並按下回車,瀏覽器再與這個URL指向的伺服器建立連線,然後瀏覽器才

如何進行web前端效能優化

這裡是修真院前端小課堂,每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能,本篇分享的是: 【如何進行web前端效能優化】   大家好,我是IT修真院深圳分院第9期的學員

web前端效能優化的一些方法

web前端是應用伺服器處理之前的部分,前端主要包括:HTML,CSS,javascript,image等各種資源,針對不同的資源有不同的優化方式。  (2)減少DNS查詢: 內容優化 (1)減少HTTP請求數:這條策略是最重要最有效的,因為一個完整的請求要經過DNS定址,

Web前端效能優化——如何有效提升靜態檔案的載入速度

原文連結:https://wetest.qq.com/lab/view/345.html?from=content_qcloud WeTest 導讀 此文總結了筆者在Web靜態資源方面的一些優化經驗。

深度講解:web前端效能優化

一、課程簡介: 1、課程大綱 涉及到的分類 網路層面 構建層面 瀏覽器渲染層面 服務端層面 涉及到的功能點 資源的合併與壓縮 圖片編解碼原理和型別選擇 瀏覽器渲染機制 懶載入預載入 瀏覽器儲存 快取機制 PW

Web前端效能優化(一)

1. 靜態資源的壓縮與合併 我們在開發的時候會習慣縮排和寫註釋,方便我們在日常的維護,但將程式碼上傳至服務端後,我們完全可以把那些空格、製表符、換行符進行壓縮,以此減少請求資源的大小;同樣的,我們在服務端所引用的第三方庫進行合併,能減少 HTTP 的請求數量 將

架構優化之高效能:web前端效能優化,靜態資源快取,檔案壓縮

web前端效能優化 內容主要來自阿里架構一書。自己總結以及進行實踐 一.瀏覽器訪問優化 1.減少http請求 合併css,合併JS,合併圖片:圖片也可以進行合併,多張圖片合併成一張, 現在的瀏覽器會自動的複用tcp連結,不會剛用完就關閉 2.設定使用瀏覽器快取 靜態資源(如何設定?可

web前端效能優化之CDN

什麼是CDN CDN (Content Delivery Network) 可直譯成內容分發網路。CDN的本質仍然李詠快取技術快取, 解決的是__如何將資料快速可靠從源站傳遞到使用者的問題__。使用者獲取資料時,不需要直接從源站獲取,通過CDN對於資料的分發,使用者可以從一個較優的伺服器獲取資料,從而達到快

Web前端效能優化:減少DNS查詢

DNS(Domain Name System): 負責將域名URL轉化為伺服器主機IP。 DNS查詢流程:首先檢視瀏覽器快取是否存在,不存在則訪問本機DNS快取,再不存在則訪問本地DNS伺服器。所以DNS也是開銷,通常瀏覽器查詢一個給定URL的IP地址要花費20-120ms,在DNS查詢完成前

Web前端效能優化(三)新增Expires頭

什麼是Expires頭? Expires儲存的是一個用來控制快取失效的日期。當瀏覽器看到響應中有一個Expires頭時,它會和相應的元件一起儲存到其快取中,只要元件沒有過期,瀏覽器就會使用快取版本而不會進行任何的HTTP請求。Expires設定的日期格式必須為GMT

Web前端效能優化的9大問題

以上都是對HTML和CSS非常糟糕的使用方法。  正確理解: HTML是一門標記語言,使用合理的HTML標籤前你必須瞭解其屬性,比如Flow Elements,Metadata Elements ,Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。 CSS

Web前端效能優化策略

前端效能優化需要從前端的資源型別分析,以減少請求資源和請求時間為目的。目前的型別包括圖片、javascript、css、動態資料等,不同的資源對於運算、頻寬等的依賴也不同,因此優化的方式也不同。參照以

web前端效能優化總結

轉自:http://www.2cto.com/kf/201604/498725.html          網站的劃分一般為二:前端和後臺。我們可以理解成後臺是用來實現網站的功能的,比如:實現使用者註冊,使用者能夠為文章發表評論等等。而前端呢?其實應該是屬於功能的表現。並且

web前端效能優化--如何提高頁面載入速度

對一名前端工作人員來說,效能的優化還是很重要的. 減少http請求 ​ 1.圖片地圖:假設導航欄有多張圖片,點選每張圖片都會進入一個連線,這樣在載入時就會產生多個htttp請求.而此時如果我們用圖片地圖——所有點選提交到同一個url,同時提交使用者點選

大話WEB前端效能優化基本套路(關鍵方法總結)

https://blog.thankbabe.com/2017/07/05/fore-end-optimize/?utm_source=tuicool&utm_medium=referral 前言 前端效能優化這是一個老生常談的話題,但是還是有很多人沒有真正的

Web前端效能優化(六)減少DNS查詢、避免重定向

一、減少DNS查詢 基礎知識 DNS(Domain Name System): 負責將域名URL轉化為伺服器主機IP。 DNS查詢流程:首先檢視瀏覽器快取是否存在,不存在則訪問本機DNS快取,再不存在則訪問本地DNS伺服器。所以DNS也是開銷,通常瀏覽器查詢一個

Web前端效能優化——DocumentFragment或innerHTML取代複雜的元素注入

DOM 操作對於前端效能的影響是舉足輕重的,如何減少 DOM 節點的建立以及快速注入是特別重要的。 假設頁面中有一個 <ul> 元素,需要動態建立多個 <li> 子節點,常規的寫法是 var list = document.getElement