網站優化——前端部分

開篇語php

做爲一個前端的菜鳥,老是在面試的時候被問及一些優化的問題,說實話,回答的時候老是心虛,由於確實沒有真真正正作過優化對比,也不知道從何提及,今天在網上收集一些例子加以總結,往後如果開發用到,也能一一對照,把本身開發的網站作到最優化!css

網站優化html

一個網站的優化,前端只是很小的一部分。大到系統架構,小到頁面HTML佈局,無一不影響這一個網站的用戶體驗。因爲如今知識面還比較窄,對架構方面的優化(服務器集羣、業務分離、NOSQL、數據庫設計、緩存設置、單點登陸)理解不全面,本篇就先只總結前端的一些優化技巧,有不全或者不對的地方,還請各位留言指正,大神勿噴哦,小弟學習也不容易呢,O(∩_∩)O!前端

 

前端優化條例:(雅虎23條軍規)node

1. 減小HTTP請求次數 
合併圖片、CSS、JS,改進首次訪問用戶等待時間。 
2. 使用CDN 
就近緩存==>智能路由==>負載均衡==>WSA全站動態加速 
3. 避免空的src和href 
當link標籤的href屬性爲空、script標籤的src屬性爲空的時候,瀏覽器渲染的時候會把當前頁面的URL做爲它們的屬性值,從而把頁面的內容加載進來做爲它們的值。測試 
4. 爲文件頭指定Expires 
使內容具備緩存性。避免了接下來的頁面訪問中沒必要要的HTTP請求。 
5. 使用gzip壓縮內容 
壓縮任何一個文本類型的響應,包括XML和JSON,都是值得的。舊文章 
6. 把CSS放到頂部 
7. 把JS放到底部 
防止js加載對以後資源形成阻塞。 
8. 避免使用CSS表達式 
9. 將CSS和JS放到外部文件中 
目的是緩存,但有時候爲了減小請求,也會直接寫到頁面裏,需根據PV和IP的比例權衡。 
10. 權衡DNS查找次數 
減小主機名能夠節省響應時間。但同時,須要注意,減小主機會減小頁面中並行下載的數量。 
IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時,IE 用戶的圖片下載速度就會受到影響。因此新浪會搞N個二級域名來放圖片。 
11. 精簡CSS和JS 
12. 避免跳轉 
同域:注意避免反斜槓 「/」 的跳轉; 
跨域:使用Alias或者mod_rewirte創建CNAME(保存域名與域名之間關係的DNS記錄) 
13. 刪除重複的JS和CSS 
重複調用腳本,除了增長額外的HTTP請求外,屢次運算也會浪費時間。在IE和Firefox中無論腳本是否可緩存,它們都存在重複運算JavaScript的問題。 
14. 配置ETags 
它用來判斷瀏覽器緩存裏的元素是否和原來服務器上的一致。比last-modified date更具備彈性,例如某個文件在1秒內修改了10次,Etag能夠綜合Inode(文件的索引節點(inode)數),MTime(修改時間)和Size來精準的進行判斷,避開UNIX記錄MTime只能精確到秒的問題。 服務器集羣使用,可取後兩個參數。使用ETags減小Web應用帶寬和負載 
15. 可緩存的AJAX 
「異步」並不意味着「即時」:Ajax並不能保證用戶不會在等待異步的JavaScript和XML響應上花費時間。 
16. 使用GET來完成AJAX請求 
當使用XMLHttpRequest時,瀏覽器中的POST方法是一個「兩步走」的過程:首先發送文件頭,而後才發送數據。所以使用GET獲取數據時更加有意義。 
17. 減小DOM元素數量 
是否存在一個是更貼切的標籤可使用?人生不只僅是DIV+CSS 
18. 避免404 
有些站點把404錯誤響應頁面改成「你是否是要找***」,這雖然改進了用戶體驗可是一樣也會浪費服務器資源(如數據庫等)。最糟糕的狀況是指向外部 JavaScript的連接出現問題並返回404代碼。首先,這種加載會破壞並行加載;其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分看成JavaScript代碼來執行。 
19. 減小Cookie的大小 
20. 使用無cookie的域 
好比圖片 CSS 等,Yahoo! 的靜態文件都在 yimg.com 上,客戶端請求靜態文件的時候,減小了 Cookie 的反覆傳輸對主域名 (yahoo.com) 的影響。 
21. 不要使用濾鏡 
png24的在IE6半透明那種東西,別亂使,淡定的切成PNG8+jpg 
22. 不要在HTML中縮放圖片 
23. 縮小favicon.ico並緩存linux

總結:以上每一條優化方式,網上都有相應的操做方法,我的覺的是在開發前熟記軍規,避免二次開發。固然特殊狀況除外,燒銀子的優化得看自身狀況嘍!web


測試篇:面試

智者千慮必有一失,膨大的項目開發完畢,避免不了會有疏忽的地方。這時咱們須要經過一些測試工具進行專業性的測試,測試後再對症下藥,作到力所能及的最大優化!數據庫

一、YSlow:YSlow是yahoo美國開發的一個頁面評分插件,很是的棒,從中咱們能夠看出咱們頁面上的不少不足,而且能夠知道咱們改怎麼卻改進和優化。跨域

     YSlow使用方式:

     http://lusongsong.com/reed/362.html

     YSlow跌評分規則:

   (1)http://www.blueidea.com/tech/web/2008/6133.asp

   (2)http://www.blueidea.com/tech/web/2008/6133_2.asp

二、Fiddler:Fiddler的功能很強大,它不只能夠查看HTTP的通訊信息,也能夠進行分析,從而發現通訊過程當中的問題,爲優化網站頁面和提升性能提供依據。

     Fiddler優化案例:

     http://www.cnblogs.com/lerit/archive/2010/11/03/1867898.html

總結:

感受網站就像一我的同樣,開發者做爲父母,在塑造階段就應考慮好給他一個健全的體魄,假若無可奈何不能返工重建,至少咱們應該帶他去看病檢測,以方便知道他哪裏不舒服,好對症下藥。總之,盡本身的所能塑造一個完美的個體,才能不辱使命說本身是一個合格的「造物者」!

相關文章
相關標籤/搜索