中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術文檔 > 網頁制作 > 用YSlow分析我們頁面
CSS 瀏覽器的等寬空格 回到列表 跨瀏覽器實現float:center
 用YSlow分析我們頁面

作者:aliued.cn 時間: 2008-08-26 文檔類型:轉載 來自:aliued.cn

第 1 頁 用YSlow分析我們頁面 [1]
第 2 頁 用YSlow分析我們頁面 [2]

YSlow是yahoo美國開發(fā)的一個頁面評分插件,非常的棒,從中我們可以看出我們頁面上的很多不足,并且可以知道我們改怎么卻改進和優(yōu)化。

仔細研究了下YSlow跌評分規(guī)則。

主要有12條:

1. Make fewer HTTP requests 盡可能少的http請求。。我們有141個請求(其中15個JS請求,3個CSS請求,47個CSS background images請求),多的可怕。思考了下,為什么把這個三種請求過多列為對頁面加載的重要不利因素呢,而過多的IMG請求并沒有列為不利因素呢?

發(fā)現原來這些請求都是可以避免的。

15個JS和3個CSS完全可以通過特殊的辦法進行合并(這個技術部已經幫我們解決了,實在是太感謝了,嘿嘿。),這樣合并以后,一般情況下頁面上只會出現一個JS和一個CSS(對JS的封裝得有一定的要求)。

但是47個CSS background images請求改怎么解決呢?為什么頁面上的純IMG請求時合理的,而CSS background images請求過多就是不利因素了呢。這個我想了很久,總算明白,原來是這樣的:

一般頁面上的ICON,欄目背景啊,圖片按鈕啊,我們都會用圖片CSS背景來實現,而一般這個圖片CSS背景用到的圖片都是比較小的,所以完全可以把這些圖片合并成一個相對比較大的圖片,這樣頁面上只會出現一個CSS background images請求,最多也就2-3個。后來仔細看了下雅虎美國的頁面,他們的確也是這樣做的,雖然這樣做需要花一定的時間來有規(guī)則的合并這些ICON,欄目背景,圖片按鈕,以方便CSS調用,但是這樣做絕對是合算的,而且是有必要的,YSlow也是極力推薦的。

2.Use a CDN 這項我們的評分是F級,最低。說實在的,我剛開始什么是CDN都不知道。后來查了GOODLE才知道。CDN的全稱是Content Delivery Network,即內容分發(fā)網絡。其目的是通過在現有的Internet中增加一層新的網絡架構,將網站的內容發(fā)布到最接近用戶的網絡”邊緣”,使用戶可以就近取得所需的內容,解決Internet網絡擁擠的狀況,提高用戶訪問網站的響應速度。從技術上全面解決由于網絡帶寬小、用戶訪問量大、網點分布不均等原因所造成的用戶訪問網站響應速度慢的問題。

看來上述的解釋后,基本上明白了CDN是怎么回事,后來咨詢了下中文站點SA,得知我們網站目前的確還沒有做CDN的優(yōu)化,但是據說我們有更加先進的技術來解決類似的問題(具體什么技術那就保密了),但是畢竟CDN也是個相當不錯的技術,所以在我們先進技術的基礎上在做CDN優(yōu)化,肯定比現在更好,嘿嘿。據說SA明年會做幾個點的CND。

3. Add an Expires header置過期的HTTP Header.設置Expires Header可以將腳本, 樣式表, 圖片, Flash等緩存在瀏覽器的Cache中.

其實我們網站也做了這個優(yōu)化,至少圖片在這個上做過優(yōu)化,但是沒有做完全。我們的CSS和JS都還沒有做過優(yōu)化,倒是外部引入的一個廣告JS做了,呵呵。其實設置過期的HTTP Header 更應該做在腳本, 樣式表, Flash上.不過據說這個SA也是沒有做的,但是有一定的風險,因為JS和CSS是有一定的邏輯,如果服務器端和客戶端都存在緩存的話,萬一出了什么問題,對我們以后查找問題的所在和增加難度,不過我想兩者中是可以權衡和并存的。

4. Gzip components 對我們的頁面內容進行Gzip格式的壓縮,Gzip格式是一種很普遍的壓縮技術,幾乎所有的瀏覽器都有解壓Gzip格式的能力,而且它可以壓縮的比例非常大,一般壓縮率為85%,就是說服務器端100K的頁面可以壓縮到25K左右的Gzip格式的數據發(fā)給客戶端,客戶端收到Gzip格式的數據后自動解壓縮后顯示頁面。

這點我們網站基本上是100%做到了,但是我們這項的評分并沒有達到想象中的A級,原因是出在我們的外部鏈接,比如我們首頁,有外部的廣告投放JS,這個JS說擁有的網站是沒有做過GZIP優(yōu)化,連累了我們網站,所以我們也只有B,或者C級。

5. Put CSS at the top 把CSS外部鏈接放到頁面的頂部。

其實這個原則我們一般都遵守的,如果把CSS外部鏈接作為邏輯的一部分出現在頁面頭部以下,我個人覺得這個本身就是個錯誤。還好,我們的頁面基本上都做到了,可是有些頁面比如LIST頁面,還是出現了和邏輯掛鉤的CSS鏈接,原因是為了解決一些本來就不合理的產品邏輯。所以,我們WEB前端工程師有義務杜絕這些不合理的產品邏輯破壞我們的頁面結果及頁面加載速度,不能為了實現而實現。

出處:aliued.cn
責任編輯:bluehearts

上一頁 下一頁 用YSlow分析我們頁面 [2]

◎進入論壇網頁制作WEB標準化版塊參加討論,我還想發(fā)表評論

關鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大�!熬�•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業(yè)唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標
數據同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule
>> 分頁 首頁 前頁 后頁 尾頁 頁次:1/21個記錄/頁 轉到 頁 共2個記錄

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發(fā)的文章外,大家可以自由轉載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規(guī)
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發(fā)表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內容
網站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設計》
犀利開發(fā)—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2