本篇內(nèi)容主要講解“怎么讓W(xué)eb應(yīng)用程序快速運(yùn)行”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么讓W(xué)eb應(yīng)用程序快速運(yùn)行”吧!

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有黎平免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

問(wèn)題：空白內(nèi)容

當(dāng)開(kāi)發(fā)人員使用CSS 或 JavaScript 文件工作時(shí)，空白內(nèi)容通常是一件好事?？瞻變?nèi)容包括縮進(jìn)文件所使用的字符，增強(qiáng)可讀性的間距、以及為了在文章的不同部分添加一個(gè)可視間隔而插入的額外空行?？瞻變?nèi)容使文件易于閱讀和維護(hù)?？紤] 清單 2 中的 CSS 文件，其中有適當(dāng)數(shù)量的空白內(nèi)容(和注釋)，有助于開(kāi)發(fā)人員理解 CSS 代碼的意圖。

從這一點(diǎn)上來(lái)說(shuō)，將文件變得更小作為問(wèn)題的一個(gè)長(zhǎng)期解決方案是不可行的，因?yàn)槲募苡锌赡茉趯?lái)會(huì)被修改。如果將空白內(nèi)容和注冊(cè)全部刪除，CSS 和 JavaScript 代碼就很難閱讀。

問(wèn)題是逐漸增加的空白導(dǎo)致文件不斷增大。每個(gè)空白行、縮進(jìn)和括號(hào)之間的空格至少占用一個(gè)額外字符，這對(duì)于 CSS 或 JavaScript 代碼的正確解析來(lái)說(shuō)實(shí)際上并不需要。首先，一兩個(gè)空白沒(méi)有什么大不了的，但是小數(shù)量乘以一個(gè)很大倍數(shù)時(shí)就變成很大的數(shù)量了。

考慮這樣一個(gè)文件，其中額外空白總計(jì) 5KB。如果您的網(wǎng)站每天的點(diǎn)擊率是 1000，每天節(jié)省 5KB 每個(gè)月就可以節(jié)約大約 146 MB((5K * 1000 * 30) / 1024 作為粗略估計(jì))。就這而言，該文件的點(diǎn)擊量還是相對(duì)保守的估計(jì)，實(shí)際空白成本可能還會(huì)增加。

此外，下載您文件的用戶必須等待文件的下載。盡管許多用戶在他們***次訪問(wèn)您的網(wǎng)站后可能就有緩存的 CSS 或 JavaScrip 文件，性能仍然會(huì)對(duì)他們的***次訪問(wèn)造成負(fù)面影響。如果您可以減少您 CSS 和 JavaScript 文件，即使每次 1 KB，您都可以減少數(shù)千字節(jié)的瀏覽器必須加載的數(shù)據(jù)。

回頁(yè)首解決方案：壓縮

要解決問(wèn)題并從小資源獲益，一個(gè)顯而易見(jiàn)的解決方案是從您的 CSS 和 JavaScript 文件刪除額外元素，比如注釋和空白。但是，由于在開(kāi)發(fā)過(guò)程中從您的文件刪除注釋和空白不 可行，一個(gè)較好的解決方案是 “分級(jí)” 您的網(wǎng)站資源、優(yōu)化它們、然后將其發(fā)布。

編寫(xiě)一個(gè)刪除空白字符的定制腳本最初聽(tīng)起來(lái)是一個(gè)可行的解決方案，但是在 CSS 和 JavaScript 文件中本身都有很重要的空白。因此任何刪除空白和壓縮文件的工具必須是足夠智能，可以區(qū)別哪些語(yǔ)言中哪些空白是重要的。

幸運(yùn)的是，在社區(qū)中已經(jīng)可以找到這種工具了，它們已經(jīng)經(jīng)過(guò)資源(比如 CSS 和 JavaScrip 文件)壓縮測(cè)試了。其中一個(gè)工具就是 YUI Compressor，一個(gè)來(lái)自 Yahoo!® Developer Network 的可用工具(鏈接見(jiàn) 參考資料)。

YUI Compressor

YUI 壓縮器是一個(gè)使用 Java 編寫(xiě)的程序，擁有 Berkeley Software Distribution 許可證。YUI Compressor 可以縮小(壓縮)您的 CSS 和 JavaScript 代碼，這樣您無(wú)需自己編寫(xiě)工具就可以享受小資源帶來(lái)的益處了。

下載 YUI Compressor，然后提取文件，放置到一個(gè)容易訪問(wèn)的位置。歸檔文件包括完整源代碼和一個(gè)用于構(gòu)建 YUI Compressor 的 Apache Ant 腳本(build.xml)。然而，如果您不想構(gòu)建該文件，您可以在 build 目錄中找到 yuicompressor-{version}.jar(見(jiàn) 圖 1)。

圖 1. 歸檔文件目錄

YUI Compressor 的 JAR 文件是自帶的，您可以將該文件復(fù)制到別的項(xiàng)目，通過(guò)輸入以下命令來(lái)執(zhí)行：

java -jar yuicompressor-2.4.2.jar --help

除了下載該文件，還有一種方法，使用 清單 1 中的 XML 文件來(lái)將 YUI Compressor 添加到您的 Apache Maven pom.xml 或 Apache IVY 文件。

清單 1. 添加 YUI Compressor 到 Maven 或 IVY

     com.yahoo.platform.yui     yuicompressor     2.3.6 

將 -h 傳遞參數(shù)到 yuicompressor.jar 文件，顯示 YUI Compressor 的基本用法信息。

壓縮 CSS

清單 2 是一個(gè)為便于開(kāi)發(fā)人員維護(hù)而優(yōu)化的 CSS 示例，它包含注釋?zhuān)冶挥每瞻赘袷交恕?/p>

清單 2. 為維護(hù)而優(yōu)化的 CSS 文件

                  /* The main body for the page. */  body   {       font-family : Tahoma,Geneva,sans-serif;      background-color : #e2e2e2;      margin : 0 0 0 0;      padding : 0 0 0 0;  }   /* The header and header elements */  #header, #content, #footer   {      padding 0;      margin 0;      width : 100%;      min-width : 600px;  }   #header a   {      text-decoration : none;      border : none;  }   #header   {      background : #fff url('images/lb-h.jpg') repeat-x top;      height : 115px;  }   #header img.logo   {      position : absolute;      border : none;      margin-top : 10px;      margin-left : 50px;      z-index : 1000;  }   /* Top banner... */  #banner   {      margin : 0;      padding : 0;      background-color : #fff;      border-bottom : 1px solid #bebebe;      height : 265px;      text-align : center;  }   /* This is the main content */  #content   {      background : #fff url('images/lb-g.jpg') repeat-x top;      min-height : 450px;      display : inline-block;      clear : both;  }   #footer   {      border-top : 3px solid #bebebe;      clear : both;      min-height : 100px;      font-size : smaller;  }   #followicons   {      margin-left : 50px;  }

要壓縮一個(gè) CSS 文件，運(yùn)行以下命令：

java -jar yuicompressor-2.4.2.jar -o sample.min.css sample.css

文件被壓縮之后，輸出看起來(lái)如 清單 3 所示。清單是為了便于閱讀進(jìn)行了格式化的，但是 YUI Compressor 輸出沒(méi)有換行：您看到的都是在一行。

清單 3. 壓縮后的 CSS 文件

body{font-family:Tahoma,Geneva,sans-serif;background-color:#e2e2e2;margin:0;padding:0;}  #header,#content,#footer{padding 0;margin 0;width:100%;min-width:600px;}#header a{  text-decoration:none;border:none;}#header{background:#fff url('images/lb-h.jpg') repeat-x   top;height:115px;}#header img.logo{position:absolute;border:none;margin-top:10px;  margin-left:50px;z-index:1000;}#banner{margin:0;padding:0;background-color:#fff;  border-bottom:1px solid #bebebe;height:265px;text-align:center;}#content{background:#fff   url('images/lb-g.jpg') repeat-x top;min-height:450px;display:inline-block;clear:both;}  #footer{border-top:3px solid #bebebe;clear:both;min-height:100px;font-size:smaller;}  #followicons{margin-left:50px;}

除了簡(jiǎn)單地刪除空白和注釋之外，YUI Compressor 還對(duì)您的 CSS 執(zhí)行大量其他優(yōu)化來(lái)使文件更小。那么，為了使文件更小究竟對(duì) CSS 代碼做了什么呢?

◆ 刪除空白。任何不必要的空白，像縮進(jìn)、空行，以及元素和括號(hào)之間的空格都被刪除了。如果，CSS 的空白對(duì)于正常運(yùn)行是必需的，那么會(huì)被保留下來(lái)(見(jiàn) 清單 4)。

清單 4. 刪除多余的空白

/* Before */  #header a   {      text-decoration : none;      border : none;  }   /* After */  #header a{text-decoration:none;border:none;}

◆ 刪除注釋。如果在您的 CSS 文件中必須包含注釋?zhuān)热?，公司的版?quán)通告，您可以在注釋中輸入一個(gè)感嘆號(hào)(!)，通知 YUI Compressor 保留它(見(jiàn) 清單 5)。

清單 5. 除必要注釋外，全部刪除

/* Before */  /* This is the main content */  #content   {      background : #fff url('images/lb-g.jpg') repeat-x top;      min-height : 450px;      display : inline-block;      clear : both;  }   /* After */  #content{background:#fff url('images/lb-g.jpg') repeat-x top;min-height:450px;  display:inline-block;clear:both;}

◆ 刪除空聲明。YUI Compressor 從 CSS 中刪除空聲明，除非它們對(duì)于正常運(yùn)行是必需的(見(jiàn) 清單 6)。

清單 6. 刪除空聲明

/* Before */  #followicons   {      margin-left : 50px;  }   #followicons a  {  }   /* After */  #followicons{margin-left:50px;}

◆ 執(zhí)行其他優(yōu)化。這些優(yōu)化包括減少十進(jìn)制數(shù)的前置零，縮短 0 值和 16 進(jìn)制值(見(jiàn) 清單 7)。

清單 7. 執(zhí)行其他優(yōu)化

/* Before */  body   {       font-family : Tahoma,Geneva,sans-serif;      background-color : #ffee22;      margin : 0 0 0 0;      padding : 0 0 0 0;  }  /* After */  body{font-family:Tahoma,Geneva,sans-serif;background-color:#fe2;margin:0;padding:0;}

累積起來(lái)，YUI Compressor 對(duì) CSS 代碼進(jìn)行的這些優(yōu)化使您的文件小了不少呢!

壓縮JavaScript 代碼

您可以使用 YUI Compressor 來(lái)壓縮 JavaScript 代碼。清單 8 顯示了一個(gè)包含注釋和額外格式的文件。

清單 8. 一個(gè)便于維護(hù)而格式化的 JavaScript 文件

/*   * Creates a cookie on the system with the given name,   * value, and for the given number of days.   */  function createCookie(name, value, days) {       if (days != null)       {          var date = new Date();          date.setTime(date.getTime() + (days*24*60*60*1000));          var expires = "; expires=" + date.toGMTString();      }      else       {          var expires = "";      }       document.cookie = name + "=" + value + expires + "; path=/";   }

要在 JavaScript 文件上運(yùn)行 YUI Compressor，執(zhí)行以下命令：

java -jar yuicompressor-2.4.2.jar -o functions.min.js functions.js

YUI Compressor 對(duì)文件進(jìn)行優(yōu)化之后，看起來(lái)像 清單 9 這樣。

清單 9. 壓縮的 JavaScript 文件

function createCookie(c,d,e){if(e!=null){var b=new Date();b.setTime(b.getTime()+(e*24*60*  60*1000));var a="; expires="+b.toGMTString()}else{var a=""}document.cookie=c+"="+d+a+  "; path=/"};

YUI Compressor 添加到 Mozilla Rhino(見(jiàn) 參考資料)項(xiàng)目，并使用項(xiàng)目中代碼標(biāo)記 JavaScript 文件。Rhino 是一個(gè)執(zhí)行 JavaScript 代碼的 Java 實(shí)現(xiàn)，被設(shè)計(jì)用于在 Java 應(yīng)用程序中提供擴(kuò)展點(diǎn)，通過(guò)啟動(dòng)這些擴(kuò)展點(diǎn)來(lái)執(zhí)行 JavaScript 代碼。

由于文件是使用支持 JavaScript 執(zhí)行的庫(kù)來(lái)進(jìn)行標(biāo)記的，那么它們將會(huì)被安全的編譯成 JavaScript 代碼，用與編寫(xiě)方式相同的方法來(lái)執(zhí)行。其他搜索 — 替換工具用來(lái)縮小代碼，比如這些使用規(guī)則表達(dá)式的工具，如果所用的規(guī)則表達(dá)式不是足夠精細(xì)，那么將會(huì)出現(xiàn)誤差。

以下優(yōu)化是在 JavaScript 文件中執(zhí)行的：

◆ 刪除空白。從 JavaScript 代碼中刪除所有不重要的空白，包括新行。

◆ 刪除注釋。從 JavaScript 文件中刪除所有注釋?zhuān)诉@些 C 風(fēng)格的注釋?zhuān)?/*! 序列開(kāi)始的。如果公司版權(quán)或者其他信息必須保留在文件中，務(wù)必使用該序列包含您的注釋內(nèi)容。

◆ 重命名 Method-scoped 變量。除非您使用 YUI Compressor 命令的 --nomunge 選項(xiàng)，否則 YUI Compressor 將自動(dòng)縮短 JavaScript 文件中的變量名。(將變量聲明單獨(dú)留在函數(shù)外，假設(shè)它們可能會(huì)用于其他地方)。由于 JavaScript 語(yǔ)言中的變量名僅需至少一個(gè)字符 ，就能為您的 JavaScript 文件節(jié)省相當(dāng)多字符。替換變量稍微混淆 JavaScript 代碼，但是由于您不需要修改代碼版本，應(yīng)該問(wèn)題不大。

◆ 刪除分號(hào)。像壓縮 CSS 一樣，一些不重要的分號(hào)(;)將被從 JavaScript 代碼中刪除。

◆ 其他選擇。--line-break 選項(xiàng)對(duì)于分離文件可能是重要的，因此這一行不能太長(zhǎng)。(優(yōu)化時(shí) YUI Compressor 會(huì)刪除換行符。)

看看優(yōu)勢(shì)

要想查看壓縮的優(yōu)勢(shì)，您可以使用不同的工具，其中兩個(gè)是構(gòu)建在瀏覽器中，這使得使用它們比使用分析工具方便得多：Google® Chrome Web 瀏覽器的開(kāi)發(fā)人員工具和 Mozilla® Firefox 的 Firebug 插件。這兩個(gè)工具都向您展示了下載的附加資源以及文件大小和下載它們?yōu)g覽器所用的時(shí)間。

圖 2 是一個(gè) Chrome 開(kāi)發(fā)人員工具分析一個(gè)頁(yè)面的示例。(要訪問(wèn)這些工具，在您的瀏覽器中單擊 Tools > Developer Tools。)

圖 2. Chrome 瀏覽器附帶的開(kāi)發(fā)人員工具

圖 3 展示了 Firefox 中的 Firebug 插件分析同一頁(yè)面 。

圖 3. Firebug 插件

如果您使用一個(gè)自動(dòng)工具(下一節(jié)將會(huì)介紹)，您就可輕松地獲取一個(gè)使用舊文件的 URL 和另一個(gè)包含壓縮文件的 URL(例如，http://localhost/orig 和 http://localhsot/minified)。您可以使用這些工具來(lái)對(duì)您的 web 應(yīng)用程序進(jìn)行基本的分析，就會(huì)知道壓縮您的 CSS 和 JavaScript 文件會(huì)有多大的不同。剛開(kāi)始差異可能很小，但做一些數(shù)學(xué)運(yùn)算，就能明白執(zhí)行優(yōu)化比起置之不理，長(zhǎng)期效果是多么的明顯。

自動(dòng)化和集成

要想自動(dòng)完成壓縮，將它作為一個(gè)步驟添加到文件分段和執(zhí)行測(cè)試之間。清單 10 中的 Ant 文件證實(shí)了如何使用 Ant 自動(dòng)完成操作。

清單 10. 使用 Ant 自動(dòng)壓縮

您也可以使用一個(gè) shell 腳本，Windows PowerShell™ 腳本，或者批處理文件來(lái)自動(dòng)完成這一操作。

一旦文件被正確分段，您就可以根據(jù)分段代碼運(yùn)行您的測(cè)試了，如果可以的話。如果您沒(méi)有通過(guò)單元測(cè)試驗(yàn)證您定義的 JavaScript 代碼，您就應(yīng)該考慮它。參閱 參考資料 ，獲取介紹 web 應(yīng)用程序 UI 測(cè)試的信息鏈接。

您也可將 YUI Compressor 和 IDE 整合，比如 Eclipse，這樣構(gòu)建行為可以自動(dòng)為您生成一個(gè)壓縮文件。直接集成 Eclipse ***的缺點(diǎn)就是任何添加到 Eclipse 的單個(gè)構(gòu)建器只可以優(yōu)化一個(gè)文件，除非構(gòu)建器調(diào)用一個(gè)腳本(比如，清單 10 中的 Ant 腳本)來(lái)壓縮多個(gè)文件。

要為您的項(xiàng)目將 YUI Compressor 添加到 Eclipse 中，在 Eclipse 中選擇項(xiàng)目，然后單擊 Project > Properties 來(lái)向項(xiàng)目中添加一個(gè)新構(gòu)建器。從那里開(kāi)始執(zhí)行以下步驟：

從屬性列表中選擇 Builders，然后單擊 New 來(lái)添加一個(gè)新構(gòu)建器(見(jiàn) 圖 4)。

圖 4. 將 YUI Compressor 作為一個(gè)構(gòu)建器添加到 Eclipse

選擇 Program，然后單擊 OK(見(jiàn) 圖 5)。

圖 5. 添加一個(gè)構(gòu)建器運(yùn)行程序

輸入 Compress 作為發(fā)布配置的名稱。

輸入您 Java 文件夾的路徑(例如，/usr/bin/java)。

通過(guò)單擊 Variables 和添加 ${project_loc}，使用項(xiàng)目位置作為工作目錄。

為命令添加參數(shù)，包括 yuicompressor-{version}.jar 文件名。在 圖 6 所示的示例中，JAR 文件被包含在項(xiàng)目的工具目錄下。

圖 6. 添加工具參數(shù)

單擊 Refresh 選項(xiàng)卡，然后選擇 Refresh resources upon completion。您只需要刷新包含源代碼的項(xiàng)目即可。

如果您構(gòu)建了一個(gè) Ant 腳本來(lái)執(zhí)行壓縮，那么您可以向您的項(xiàng)目中添加一個(gè)構(gòu)建器來(lái)以同樣的形式調(diào)用 Ant 腳本。

到此，相信大家對(duì)“怎么讓W(xué)eb應(yīng)用程序快速運(yùn)行”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！