• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見(jiàn)問(wèn)題 >> 前端開(kāi)發(fā) >> css >> 網(wǎng)站性能指南四：前端性能-壓爆你的文件

網(wǎng)站性能指南四：前端性能-壓爆你的文件

• 作者：創(chuàng)新互聯(lián) 文章來(lái)源：前端開(kāi)發(fā)部 點(diǎn)擊數(shù)： 更新時(shí)間：2010-10-09
• 在這一章，我們會(huì)聚焦在前端性能：
  一、外部的Css 和的迷你化與合并圖片的最佳化,Css 圖片拼合器外部的CSS和幾乎所有的CSS和都應(yīng)該放在外部文件
  1.減少頁(yè)面的尺寸
  2.允許重用
  3.允許使其過(guò)期
  4.可讀性更高把css 和 js 文件放到外部文件的確可以讓頁(yè)面看的更加清爽，同時(shí)減小了頁(yè)面本身的尺寸。在外部的文件可重用性更高，例如你可以在一個(gè)css文件中定義整體布局。并且讓每個(gè)頁(yè)面的元素都遵從它。在上一節(jié)中，我們提到了瀏覽器過(guò)期的重要性，所以在外部引用css和js文件也是非常重要的。最后是可讀性，有超過(guò)50%的人遇到過(guò)混亂的頁(yè)面。里邊夾雜著html、js、css 甚至還有c#code。這樣的代碼的可讀性和維護(hù)性都差到極點(diǎn)了。
  
  二、Css和迷你化與合并
  Css 和 的迷你化與合并是一種減少和傳輸數(shù)據(jù)量的行之有效的方式。
  1.迷你化
  移除白空格、注釋和多余的分號(hào)等1.2同樣可以看到這樣的文件名中包含 .min（如果你經(jīng)常使用插件，你會(huì)看到很多min文件，我們看一下網(wǎng)，開(kāi)發(fā)版本大小是247KB，min版只有32KB。整整壓縮了88%。
  2.迷你化的工具合并. Ajax （特別推薦 /）和 css命令行、dll和build 任務(wù)合并文件以減少數(shù)略實(shí)踐3.1使用外部文件3.2迷你化css和js文件
  3.把所有js文件合并成一個(gè)文件（件等）、合并所有css文件成一個(gè)文件、添加一個(gè)唯一的版本號(hào)到合并的文件中，日后我們可以控制瀏覽器緩存3.6避免當(dāng)我們?cè)谶\(yùn)行時(shí)迷你化和合并文件時(shí)發(fā)生的沖突
  
  三、引用新的合并過(guò)的文件
  1.找到Visual studio File
  2.修改一個(gè).cs文件，確保項(xiàng)目文件可以重新編譯（如果我們只是修改js和css文件，項(xiàng)目不會(huì)重新編譯）
  3.使用Pack（）
  4.通過(guò)bin目錄下序集得到版本號(hào)。
  5.使用去迷你化js和css文件。
  6.使用去合并迷你化之后的文件。
  7.注意文件以前的引用順序。保持以前的順序。
  8.使用debug symbol vaule去確定是否在模式，為新的build 引用新的合并過(guò)的文件。結(jié)果主頁(yè)快了46%代碼：為了貼切描述這一過(guò)程，一下是proj文件的關(guān)鍵code。為了便于大家理解，我在本章的結(jié)尾放了一個(gè)完整的代碼示例。
• 網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)先字體樣式表 :上一篇
  友情鏈接自動(dòng)換行css兼容性完美解決方案 :下一篇