<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

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

    導航

    常用鏈接

    留言簿

    隨筆分類

    隨筆檔案

    搜索

    •  

    最新評論

    閱讀排行榜

    評論排行榜

     

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

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

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


    網(wǎng)站導航:
     
     
    Copyright © 不高興 Powered by: 博客園 模板提供:滬江博客
    主站蜘蛛池模板: 三年片免费观看大全国语| 95免费观看体验区视频| 久久国产亚洲精品麻豆| 最近免费字幕中文大全视频| 久久精品国产亚洲av麻豆图片| 亚洲 自拍 另类小说综合图区| 免费成人在线电影| 亚洲精华国产精华精华液好用| 在线播放亚洲第一字幕| 国色精品卡一卡2卡3卡4卡免费| 成人a毛片视频免费看| 亚洲综合在线观看视频| 国产免费人成在线视频| 色猫咪免费人成网站在线观看| 亚洲国产综合AV在线观看| 久久亚洲国产精品五月天| 日韩免费视频网站| 免费人成视频在线观看网站| 精品国产_亚洲人成在线| 亚洲国产精品久久久久婷婷软件| 2019中文字幕免费电影在线播放| 亚洲国产成人高清在线观看 | 日韩亚洲国产二区| 国产免费人成视频尤勿视频| 亚洲宅男永久在线| 猫咪社区免费资源在线观看| 免费国产va视频永久在线观看| 国产亚洲精品自在久久| 久久久久久久免费视频| 久久免费精品视频| caoporm碰最新免费公开视频| 国产亚洲精品影视在线| 亚洲精品不卡视频| 亚洲国产精品无码久久久蜜芽 | 97久久精品亚洲中文字幕无码| 免费又黄又硬又爽大片| 最新仑乱免费视频| 四虎免费影院ww4164h| 男人j进入女人j内部免费网站| 黄色三级三级三级免费看| 亚洲人成色777777老人头|