Energy of Love  
          日歷
          <2009年5月>
          262728293012
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456
          統計
          • 隨筆 - 70
          • 文章 - 0
          • 評論 - 80
          • 引用 - 0

          導航

          常用鏈接

          留言簿

          隨筆分類

          隨筆檔案

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

           

          看了一篇文章:用CSS/JS優化HTML頁面加載速度后,我覺得可以將我所知道的一些優化技巧與原則告訴大家,一起分享。
          這樣,也許你也能夠創造出屬于你自己的一些優化心得與技巧。
          本文是針對網頁設計的,不涉及程序以及系統。
          一、基于減少HTTP連接數的優化
          像剛才這篇文章,就是基于減少并發HTTP連接數的優化。由于IE每次在一個域上并發連接數默認為8個,這意味著超過8個文件的時候,需要等待前8個文件之一傳輸結束。
          我們可以:
          1、將圖片,尤其是大圖片放到另外一個域名中。大站可以用另一個服務器來專門用于圖片的傳輸。對于虛擬主機可以綁定另外一個域名。
          這在大網站中很常見。
          2、合并CSS和JS文件。以及在可能的時候合并圖片。
          3、預加載技術。最近很常見的,就是先用js顯示縮略圖,然后setTimeout延時加載大圖片。
          二、基于減少體積的優化
          減少體積意味著減少帶寬,能夠很直接地減少硬件與帶寬的開支。由于網站每日接待成千上萬的訪客,就是一個字節的優化也可以帶來顯著的效果。
          1、減小CSS、JS和HTML的體積。
          用簡寫的方法來寫CSS。推薦用dreamweaver cs4來寫CSS,因為代碼提示默認就是簡寫的。#ffffff可以簡寫成#fff,margin:上 右 下 左,等等…
          刪除注釋。除了保留版權聲明,其他注釋可以刪除。刪除不必要的空格和換行,就像google做的一樣。用JS壓縮工具來壓縮JS。體積上的變化很明顯。有的JS壓縮工具會導致JS發生錯誤。推薦用JQuery也使用的壓縮工具。很穩定,效果也很好。
          推薦DIV+CSS布局,這是老生常談。然而對于開發速度上效率的降低,可以用研究柵格系統、研究重用方案來解決。
          不要濫用div、H1~H6等標簽。除了速度,更是SEO上的考慮。
          一手良好的div+css不是一夕一朝就能練成的。
          2、減小圖片的體積
          在PS里“儲存于WEB和設備所用格式”可以減少不少體積。對于圖片質量要求不高的圖片,可以儲存為gif格式。此外在gif格式下,只要增加一點點損耗就可以帶來明顯的體積變化。如果用“儲存”菜單來保存用于WEB的圖片,最好選擇索引模式,可以至少減少三分之一的體積。
          三、基于運算速度的優化
          運算速度更多的是WEB后端的事情,但是并不意味著脫得了前端的干系。
          JS運算速度的優化。典型就是循環操作DOM,不要直接操作DOM,而是先createElement到一個變量,在這個變量中增加DOM,然后再附加到文檔樹上。此外,不要以為內存泄漏只是C++們的事情。JS也會導致內存泄漏。這個話題比較復雜,推薦大伙兒們閱讀'ajax in action'。制作一個成熟的ajax應用需要注意的事項全部都有,與后臺語言無關。閱讀算法的書。可能讓一個前端開發師閱讀算法的書有些搞笑,但是,有些極端場合還是會出現因為JS執行耗時過多,瀏覽器要終止JS的運行。
          四、其他優化。
          可以是基于瀏覽器的特性、基于用戶的體驗進行優化。大家可以天馬行空地發揮!
          IE在加載CSS之前會出現瞬時的無CSS狀態的頁面。可以通過加入一個空的<script type="text/javascript"></script>來解決。
          不要在文檔里加入空的js,IE的BUG會導致這樣比較慢。
          標明圖像的高度和寬度,有利于網頁在加載過程中結構保持一致。
          當一個鏈接是一個目錄的時候,比如svnhost.cn/article,要這樣:svnhost.cn/article/,因為沒有/,服務器會回應一個301到有/的地址。
          實在沒有辦法優化了?那么還可以基于用戶體驗進行優化,或者咨詢  雖然實質上是增加服務器壓力、減慢反應的。但是,用戶心理的優化,才是真正的優化!加個loading會讓用戶感覺等待的時間減少,比優化幾個KB實在多了。

          posted on 2009-05-21 12:28 不高興 閱讀(1320) 評論(1)  編輯  收藏
          評論:

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
           
          Copyright © 不高興 Powered by: 博客園 模板提供:滬江博客
          主站蜘蛛池模板: 金华市| 察哈| 耒阳市| 湖州市| 始兴县| 凉城县| 宣汉县| 陕西省| 大宁县| 中山市| 昌乐县| 龙川县| 临潭县| 扎赉特旗| 宜良县| 西峡县| 冕宁县| 彝良县| 子长县| 云霄县| 汪清县| 额尔古纳市| 巴林右旗| 财经| 精河县| 景东| 康保县| 英吉沙县| 互助| 崇左市| 上虞市| 冀州市| 邛崃市| 溧水县| 伽师县| 绍兴县| 汉寿县| 宜兰市| 泗洪县| 铜梁县| 锡林浩特市|