拋開硬體不說,網站應該如何優化加快訪問速


謝邀。說一些我常用到方法.題主沒說明更詳細的一些信息,比如是小、中、大、超大型網站,是web1.0、2.0等。優化是需要考慮成本,收益的,不同類似的網站,優化成本不一樣.

先假設是大型網站吧,日uv1000萬量級. 初次碼這麼多字,格式亂,見諒。

1.對於web1.0類的網站,網站加速更多是參考yahoo前端優化33條,做好這個網站速度會明顯提升。

題主可以採用pagespeed,yui等工具,它會生成報告,對你的網站優化給出建議。核心歸納為兩大點,其它的請參考yahoo前段優化資料,不列了:

1.1儘可能降低Http請求數

1.1.1請求都沒有,當然網站最快了,常見的新浪網,騰訊網首頁都有幾分鐘的cache,cache過期前都是從本地電腦取。比如一些多個小圖片合併為一個大圖片,這就是減少了http請求數。

1.1.2 如果請求數已經通過合併,刪除等降低到一個合理數,根據Http協議剩下可以做的:讓請求離用戶越近越好,請求的資源越小越好

1.1.2.1怎麼做到請求離用戶最近?如果在用戶本機,那就是最近,比如靜態資源(圖片,js,css等)通過cache-control max-age設置cache一段時間,接著就是用cdn加速了,這個對於圖片等是非常重要的,cdn就是把資源部署到離用戶最近的城市,來減少地理位置遠造成的響應時間慢,當然cdn還有解決容災,防攻擊,互聯互通等優點.

1.1.2.2怎麼做到請求資源更小?當然是壓縮了.對於圖片,js等都有對應的壓縮方案.常見的gzip壓縮等,一些web伺服器可以設置默認對靜態資源壓縮.再就是製作資源的時候,對素材進行嚴格限制,不要出現美術出個圖片都是1M,嚇死人了。

1.2儘可能的cache

1.2.1cache是分級的,離用戶越近的cache越有效。本地cache&>cdn cache &>反向代理cache&>web伺服器頁面cache&>web伺服器部分頁面cache&>cache層數據cache(比如memcache,redis)&>存儲層cache(比如Innodb_buffer). 這些都是很常見的做法,不細說.這裡有意思的是,部分場景的動態請求(比如php訪問)也可以做反向代理緩存(varnish),訪問量大的時候可以極大減少對web伺服器的壓力.

1.2.2 數據cache(redis等)和持久化的cache(mysql innodb)這塊需要根據實際場景特殊設計。放到後面web2.0場景描述.

2. web2.0類的網站,拿社交類網站舉例吧。

靜態資源的部分參考前文,重點介紹動態的這塊的優化處理。這裡面存儲層(包含nosql和mysql)的設計佔了很大篇幅.

汗~~,等晚上回來接著碼字,要上班了。


1、YAHOO 和 GOOGLE 都有各自的 web 端優化檢查工具。YSLOW 和 PAGESPEED。可以據此優化。

2、服務端兩個大事情,資料庫和緩存。做好所有請求的執行時間跟蹤和優化。


1/ 資料庫訪問層多用緩存,能用NoSQL 盡量用

2/ 選擇機房不用跟遊戲類,私服類放在一起

3/ 靜態文件如JS, CSS, 圖片等,用單獨子域名,可以用CDN,或者類似又拍雲的服務

其他的就是工程師的功力了


yahoo前端性能團隊總結過35條黃金定律。高性能的網站優化包括很多的點,大致分為幾個方面,在此分門別類的總結一下:

一、瀏覽器方面(頁面優化)

①減少HTTP請求次數

網頁的打開,70%的響應時間花在下載網頁內容(img/css/js…)。減少請求次數是縮短響應時間的關鍵!具體方法有:壓縮聚合css、js等文件;CSS Sprites;Image Maps;Inline image;

②減少DNS請求次數

DNS查詢也消耗響應時間,如果我們的網頁內容來自各個不同的domain (如嵌入開放廣告或引用了外部img/css/js),那麼客戶端首次解析這些domain也需要消耗一定的時間。

③避免頁面跳轉

當客戶端收到伺服器的跳轉回復時,客戶端再次根據伺服器回復中的location指定的地址再次發送請求,例如以下跳轉回復。

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

當客戶端遇到這種回復的時候,用戶只能等待客戶端再次發送請求,有的網站甚至會一直跳N次,跳到他想帶你去的地方…當然在這個時候用戶看不到任何頁面內容,只有瀏覽器的進度條一直在刷新。

④緩存Ajax

Ajax可以幫助我們非同步的下載網頁內容,返回查詢結果。

⑤延遲載入

將頁面中最重要的內容首次載入出來,次要的可以延遲載入顯示。Javascript是典型的可以延遲載入內容。一個比較激進的做法是開發網頁時先確保網頁在沒有Javascript的時候也可以基本工作,然後通過延遲載入腳本來完成一些高級的功能。

⑥提前載入

與延遲載入目的相反,提前載入的是為了提前載入接下來網頁中訪問的資源,下面是提前載入的類型:

-- 無條件提前載入:當前網頁載入完成後,馬上去下載一些其他的內容。

-- 有條件載入:根據用戶的輸入推斷需要載入的內容。

-- 有預期的的載入:這種情況一般發生在網頁重新設計時,由於用戶經常訪問舊網頁,本地對舊的網頁內容緩存充分從而顯得舊網頁速度很快,而新的網頁內容卻沒有緩存,設計者可以在舊網頁的內容中預先載入一些新網頁中可能用到的內容,這樣新的網頁就會生下來一些需要下載的資源。

⑦減少DOM元素數量

網頁中元素過多對網頁的載入和腳本的執行都是沉重的負擔,500個元素和5000個元素在載入速度上會有很大差別。想知道你的網頁中有多少元素,通過在瀏覽器中的一條簡單命令就可以算出:

document.getElementsByTagName("*").length

多少算是多了呢?雅虎曾經號稱主頁只有700多元素,但現在接近多了一倍。知乎個人內頁比雅虎多吧。

⑧根據域名劃分內容

瀏覽器一般對同一個域的下載連接數有所限制,按照域名劃分下載內容可以瀏覽器增大並行下載連接,但是注意控制域名使用在2-4個之間,不然dns查詢也是個問題。

一般網站規劃會將靜態資源放在類似於http://static.example.com,動態內容放在www.example.com上。這樣做還有一個好處是可以在靜態的域名上避免使用cookie。這一點,在騰訊、淘寶、天貓上都能發現它們都有很多的二級域名地址分類。

⑨減少iframe數量

即使iframe內容為空也消耗載入時間;會阻止頁面載入;沒有語義。

二、伺服器方面

①使用CDN,提高網站的下載速度可以通過CDN來提升。CDN通過部署在不同地區的伺服器來提高客戶的下載速度。

②添加Expires或Cache-Control報頭文

-- 對於靜態內容添加Expires,將靜態內容設為永不過期,或者很長時間。

-- 對於動態內容應用合適的Cache-Control,讓瀏覽器根據條件來發送請求。

③Gzip壓縮

Gzip通常可以減少70%網頁內容的大小,包括腳本、樣式表、圖片等文件。Gzip比deflate更高效,主流伺服器都有相應的壓縮支持模塊。

④配製ETags

雖然標題叫配製ETags,但是這裡你要根據具體情況進行一些判斷。首先Etag簡單來說是通過一個文件版本標識使得伺服器可以輕鬆判斷該請求的內容是否有所更新,如果沒有就回復304 (not modified),從而避免下載整個文件。

但是Etags的版本信息即使主流伺服器未能很好地支持跨伺服器的判斷,比如你從一個伺服器集群中一台得到Etags,然後發送到了另一台那麼校驗很有可能會失敗。

⑤儘早flush輸出

網頁後台程序中我們知道有個方法叫Response.FLush(),一般我們調用它都是在程序末尾,但注意這個方法可以被調用多次。目的是可以將現有的緩存中的回復內容先發給客戶端,讓客戶端「有活干」。那在什麼時候調用這個方法比較好呢?一般情況下我們可以在對於需要載入比較多外部腳本或者樣式表時可以提前調用一次,客戶端收到了關於腳本或其他外部資源的鏈接可以並行的先發請求去下載,伺服器接下來把後續的處理結果發給客戶端。

⑥使用GET Ajax請求

瀏覽器在實現XMLHttpRequest POST的時候分成兩步,先發header,然後發送數據。而GET卻可以用一個TCP報文完成請求。另外GET從語義上來講是去伺服器取數據,而POST則是向伺服器發送數據,所以我們使用Ajax請求數據的時候盡量通過GET來完成。

⑦避免空的圖片src

空的圖片src仍然會使瀏覽器發送請求到伺服器,這樣完全是浪費時間,而且浪費伺服器的資源。尤其是你的網站每天被很多人訪問的時候,這種空請求造成的傷害不容忽略。瀏覽器如此實現也是根據RFC 3986 - Uniform Resource Identifiers標準,空的src被定義為當前頁面。

三、COOkie

①減小Cookie

Cookie被用來做認證或個性化設置,其信息被包含在http報文頭中,對於cookie我們要注意以下幾點,來提高請求的響應速度:

-- 去除沒有必要的cookie,如果網頁不需要cookie就完全禁掉;

-- 注意cookie設置的domain級別,沒有必要情況下不要影響到sub-domain;

-- 設置合適的過期時間,比較長的過期時間可以提高響應速度;

②頁面內容使用無Cookie域名

大多數網站的靜態資源都沒必要cookie,我們可以採用不同的domain來單獨存放這些靜態文件,這樣做不僅可以減少cookie大小從而提高響應速度,還有一個好處是有些proxy拒絕緩存帶有cookie的內容,如果能將這些靜態資源cookie去除,那就可以得到這些proxy的緩存支持。

四、CSS

①將css置頂

經樣式表(css)放在網頁的HEAD中會讓網頁顯得載入速度更快,因為這樣做可以使瀏覽器逐步載入已將下載的網頁內容。這對內容比較多的網頁尤其重要,用戶不用一直等待在一個白屏上,而是可以先看已經下載的內容。

②避免css表達式

CSS表達式的問題在於它被重新計算的次數遠比我們想像的要多,不僅在網頁繪製或大小改變時計算,即使我們滾動屏幕或者移動滑鼠的時候也在計算,因此我們還是盡量避免使用它來防止使用不當而造成的性能損耗。 如果想達到某種效果我們可以通過簡單的腳本做到。

③用&代替@import

避免使用@import的原因很簡單,因為它相當於將css放在網頁內容底部。

④避免使用Filters

AlphaImageLoad是IE5.5 - IE8中支持,這種濾鏡的使用會導致圖片在下載的時候阻塞網頁繪製,另外使用這種濾鏡會導致內存使用量的問題。IE9中已經不再支持。

五、JavaScript

①將腳本置底

HTTP/1.1 specification 建議瀏覽器對同一個hostname不要超過兩個並行下載連接, 所以當你從多個domain下載圖片的時候可以提高並行下載連接數量。但是當腳本在下載的時候,即使是來自不同的hostname瀏覽器也不會下載其他資源,因為瀏覽器要在腳本下載之後依次解析和執行。

②使用外部JS和CSS文件

-- 使用外部Javascript和CSS文件可以使這些文件被瀏覽器緩存,從而在不同的請求內容之間重用。

-- 同時將Javascript和CSS從inline變為external也減小了網頁內容的大小。

-- 使用外部Javascript和CSS文件的決定因素在於這些外部文件的重用率,如果用戶在瀏覽我們的頁面時會訪問多次相同頁面或者可以重用腳本的不同頁面,那麼外部文件形式可以為你帶來很大的好處。

③使用智能事件處理

這裡說智能的事件處理需要開發者對事件處理有更深入的了解,通過不同的方式盡量少去觸發事件,如果必要就儘早的去處理事件。

比如一個div中10個按鈕都需要事件句柄,那麼我們可以將事件放在div上,在事件冒泡過程中捕獲該事件然後判斷事件來源。

六、圖片

①優化圖片

當美工完成了網站的圖片設計後,我們可以在上傳圖片之前對其做以下優化:

-- 檢查GIF圖片中圖像顏色的數量是否和調色板規格一致。如果你發現圖片中只用到了4種顏色,而在調色板的中顯示的256色的顏色槽,那麼這張圖片就還有壓縮的空間。

-- 嘗試把GIF格式轉換成PNG格式,看看是否節省空間。大多數情況下是可以壓縮的。

-- 在所有的PNG圖片上運行pngcrush (或者其它PNG優化工具)。

-- 在所有JPEG圖片上運行jpegtran。這個工具可以對圖片中的出現的鋸齒等做無損操作,同時它還可以用於優化和清除圖片中的注釋以及其它無用信息。

②不要在HTML中縮放圖片

不要通過圖片縮放來適應頁面,如果你需要小圖片,就直接使用小圖片吧。

③使用小且可緩存的favicon.ico

網站圖標文件favicon.ico,不管你伺服器有還是沒有,瀏覽器都會去嘗試請求這個圖標。所以我們要確保這個圖標存在,並使文件盡量小,且設置一個較長的過期時間。

七、移動客戶端

①保持單個文件小於25KB

這限制是因為iphone,他只能緩存小於25K,注意這是解壓後的大小。所以單純gzip不一定夠用,精簡文件工具要用上了。

②打包組建成符合文檔

把頁面內容打包成複合文本就如同帶有多附件的Email,它能夠使你在一個HTTP請求中取得多個組建。當你使用這條規則時,首先要確定用戶代理是否支持(iPhone不支持)。


不考慮硬體的話,能優化的實在有限了,只能從程序層面上優化:

1、前端:壓縮JS、CSS、HTML文件,利用緩存,減少HTTP請求等,參考:Yahoo前端優化十四條軍規 Yahoo前端優化十四條軍規

2、後端:代碼優化、利用緩存、HTML靜態化、SQL語句優化等;

而網站的壓力多在資料庫端,而資料庫端等後端的優化是需要硬體條件的,像動靜分離,多伺服器輪詢,資料庫主從分離、分庫分表分片,(分散式)緩存、CDN、隊列等。

網站達到高性能、負載均衡要靠軟體和硬體綜合架構和優化。


Best Practices for Speeding Up Your Web Site

這裡有最好的方法及實踐


先推薦一本書《構建高性能web站點》,作者是前騰訊員工,現監控寶CEO。

網路性能優化是一個持續複雜的過程,並且和你網站的業務請求模型息息相關。


前端減少http請求 儘可能使用CDN 圖片、靜態資源伺服器分離

代碼的邏輯、演算法盡量做到最優 開發時候考慮到執行效率

緩存 緩存 緩存... DB端sql語句優化到極致


謝邀。

  1. 從後端來說:
  • 使用Nginx處理HTTP請求而不是Apache
  • 可能的情況下,用LAPN架構(Linux + Apache處理PHP + Nginx處理HTTP請求 + PHP)
  • 關閉.htaccess功能,而是把偽靜態寫在conf中、
  • 使用緩存和GZip

2.從布局來說:

  • 分離動態伺服器和靜態伺服器
  • 將一些大文件進行緩存(jQuery等),或者使用http://libs.baidu.com的服務

3.從網頁來說:

  • 合併、壓縮css和js文件
  • 將js放在最尾部,css放在最頂部

還有使用緩存,CDN等,不一一敘述了。


1、盡量用靜態架構。

2、壓縮。


如果技術不錯,那就先動靜分離,然後靜態內容用CDN加速


推薦閱讀:

CDN是屬於IDC的,還是不同的行業?
CDN是什麼?使用CDN有什麼優勢?
CDN和IDC產業未來發展走勢?
CDN使用了哪些DNS技術?
如何評價迅雷推出 CDN 服務這一舉措?

TAG:網站架構 | CTO | CDN | 訪問速度 | 訪問量 |