閱讀屋>科普知識> 網站最佳化技巧方法

網站最佳化技巧方法

網站最佳化技巧方法

  一. 減少對伺服器的檔案請求

  HTTP請求屬於“請求”-“應答”形式的短連線,每一個獨立的資源我們都會向伺服器發去一份get請求,再等服務端將我們需要的檔案傳回來。每一次資源的請求都實實在在地耗費了一次“連線-等待-接收”的時間(當然將http請求設為keep-alive長連線狀態可以減少“連線”的次數和時間),如果我們能有效減少對伺服器檔案的請求次數,便意味著我們可以從這塊省下一些頁面等待時間,順便減少伺服器的負擔。

  解決方案:

  1. 使用css sprite技術合併多個圖片為單個圖片檔案,實際使用時透過background-po sition來定位背景位置,推薦閱讀:CSS Sprites:圖片整合技術;2. 合併多個css樣式檔案為單個樣式檔案,合併多個指令碼為單個指令碼。

  3.將小塊的css、js程式碼段直接寫在頁面上,而非在頁面引入獨立的樣式/指令碼檔案。相信有的朋友看慣了“保持結構 (標記)、表現 (樣式)、行為 (指令碼)三者分離”的規範,對此觀點可能有些意見。只能說規範不是教條,適合自己的才是硬道理。直接把小段的、複用率低的樣式/指令碼直接寫於頁面上帶來的利還是大於弊的(弊可能也就是增大了頁面程式碼量、不那麼好維護了點)。

  二. 減少檔案大小

  檔案太大(特別是圖片)導致載入時間較長,往往都是影響頁面載入體驗的頭號大敵,要儘可能減少請求檔案的大小:

  1. 壓縮樣式/指令碼檔案,可以使用gulp或者grunt來實現,它們均能很好地減少css/js檔案的`大小(對於js還能起到混淆變數、函式名的作用);推薦!線上js、CSS、網頁壓縮工具

  2. 針對性選擇圖片格式,在無透明背景需求下,對於顏色較單一、無色彩漸變的圖片僅使用gif格式,對於jpg圖片也可按照其清晰度要求,在匯出jpg的時候選擇對應的“品質”進行最佳化,還有背景單一的圖片嘗試使用PNG格式能大大減小圖片大小;

  三. 延遲請求、非同步載入指令碼

  在各主流瀏覽器下,我們的指令碼檔案跟隨其它資原始檔一樣都是非同步下載的,但這裡存在一個問題——比如FireFox下載好指令碼後的一小段時間內會有“執行阻塞”的情況發生,也就是說瀏覽器下載好指令碼後執行它的這段時間裡,瀏覽器的其它行為被阻塞,導致頁面上的其它資源都是無法被請求和下載的。

  如果你頁面裡存在js程式碼執行時間過長的情況,那麼使用者就會明顯感覺到頁面的延遲。解決這個問題有一個簡單的方法——將指令碼請求標籤放置到結束標籤前,使得頁面上的指令碼成為最後被請求的資源,自然也不會阻塞其它頁面資源的請求事件了。

  四. 延遲請求首屏外的檔案

  先解釋下,“首屏”指的是頁面初始化時候的頁面內容顯示區域,也就是頁面一載入,使用者就首先看到的區域。

  比如像京東啊淘寶啊,對於需要滾動頁面才能看到的圖片內容,都做了類似lazyload的處理,這些無非都是走了代理模式的理念,但的確給使用者一個錯覺——這個頁面更快地載入完了,因為我很快就看到了螢幕上的內容(即使我還沒下拉捲軸,而頁面後方的檔案其實還沒真正載入呢)。

  為廣大企業、商家、個人,提供平面設計、裝修設計、建築設計、起名改名、策劃文案、網站建設、營銷推廣等服務。若您有類似需要,請點選立即釋出專案

  另,上也有著各式各樣的任務,無論您是擁有技能的專業人士,還是技術小白。都能在上找到您能參與的專案。點選進入懸賞大廳

  無論你有什麼疑難雜症,威客們都能一一為您解決,點選進入:問答平臺。

【網站最佳化技巧方法】相關文章: