首頁 後端開發 php教程 WEB專案最佳化技巧(必會)

WEB專案最佳化技巧(必會)

Jul 29, 2016 am 09:03 AM
cookie css http nbsp

1.Minimize HTTP Requests 減少HTTP請求
  圖片、css、script、flash等等這些都會增加http請求數,減少這些元素的數量就能減少回應時間。把多個JS、CSS在可能的情況下寫入一個文件,頁面裡直接寫入圖片也是不好的做法,應該寫入CSS裡,利用 CSS sprites 將小圖拼合後利用background來定位。
  2.Use a Content Delivery Network 利用CDN技術
CDN 確實是好東西,不過伺服器供應商的這項服務一般是要收費的。
  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支持的東西。
  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. com”和”http://www. today-s-ooxx. com/” 只有一個最後的”/”只差,但是結果是不同的,伺服器需要花時間把前者重定向為後者然後進行跳轉,這個要自己注意,也可以在Apache裡用Alias 或者mod_rewrite或DirectorySlash解決。 13. Configure ETags 設定ETags
  搞不清楚咋回事,總之我是在. htaccess裡把它刪除了。
 〜〜4 x是即時回應的,在瀏覽器接收到新的資料前,舊的資料被緩存,這樣能夠更好的提高效率。端需要花費200到500毫秒時間來拼合HTML,將寫在head與body之間,釋放緩衝,這樣可以將文件頭先發送出去,然後再發送文件內容,提高效率。 for AJAX Requests 用GET方式進行AJAX請求
  Get 方法和伺服器只有一次交互(發送資料),而Post 要兩次(發送頭部再發送資料)。載入元件
  最先載入必須的元件進行頁面初始化,然後再載入其他,
YUI Image Loader 是很好的例子。
   18. Preload components 預加載組件
  提前加載以後可能用到的東西,和延遲加載並不衝突,它的目的是為後續請求提供更快的響應,參見谷歌首頁上的SS 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頁面會影響使用者體驗並且會消耗伺服器資源。
   Cookie在伺服器及瀏覽器之間的透過檔案頭進行提高,盡可能減小Cookie體積,設定合理的過期時間。 以上就介紹了WEB專案優化技巧(必會),包括了方面的內容,希望對PHP教程有興趣的朋友有所幫助。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles