表達它

優化圖片

優化只是意味著保持保持圖像質量的圖像到所需的水平，小規模的。 有負載的程序，一旦可以進行優化之前，他們裝上服務器交付的圖像。 通常，我們使用這些圖像創作（Photoshop中，煙花等）的工具，工具，使用戶能夠優化網絡使用的圖像。
•GIF的檢查，看看他們使用的調色板的大小對應於圖像中的顏色數量。 當圖像使用4色和256色調色板，然後圖像可以進一步優化

•轉換GIF的PNG的在可能的情況下，看看是否有節能。 往往不是，是。 不要猶豫，使用PNG的，因為它們是最常用的瀏覽器完全支持。 動畫功能的PNG可以做一個GIF，包括透明度的期望。

•對於使用CSS sprites的圖像，安排在水平垂直通常在一個較小的文件大小的結果，而不是精靈的圖像。 此外，結合精靈類似顏色的圖像。 這有助於你理想下保持低色數256色，所以適合在1 PNG8。

•如果您正在使用的favicon.ico，最好在1K，保持它的小。

正確使用縮放/調整大小的圖像。

總是嘗試使用調整大小的圖像，即不使用一個更大的圖像比你需要的，只是因為你可以在HTML中的寬度和高度設置。 如果你需要在頁面上顯示的是100px X 100px的圖像，然後不下來200x200px圖像使用一個規模。

使用逐行圖像

網頁瀏覽器已經逐步呈現圖像。 做得更好“隔行掃描”選項，或您的JPEG圖像與“進步”的選項，只需保存你的GIF或PNG圖像。

使用漸進式圖像是否是一個祝福或一個障礙是網絡用戶之間進行的辯論。 也是一個漸進的形象，重約20％，比非漸進對口。 所以，如果你認為你的佈局使用的圖像，不會妨礙用戶體驗，它是漸進的，覺得自由地這樣做。

包括JavaScript在HTML文檔的底部

如果沒有文件撰寫（或任何頁面內容使用的JavaScript動態生成）插入頁的內容的一部分，在你的腳本，將腳本包括BODY標記年底前，語句在頁面底部。
HTTP/1.1規範建議瀏覽器不超過兩部分組成，每個主機的並行下載。 如果您的圖片，從多個主機服務，你可以得到兩個以上的下載發生在平行。 然而，當一個腳本下載，瀏覽器不會啟動任何其他下載，甚至在不同的主機名。
也有動態創建腳本節點和遠程腳本加載後使用AJAX頁面加載的方式。

外化你JavaScript的

使用外部JavaScript文件會導致更快的頁面加載JavaScript文件，因為是由瀏覽器的緩存。 內嵌JavaScript的HTML文檔中的“獲得下載HTML文件的要求。 這實際上可能降低的HTTP請求的數量，但後來增加了HTML文檔的大小。 外部JavaScript的瀏覽器緩存的HTML文檔的大小沒有增加HTTP請求的數量減少。
請注意，如果您的網站上的用戶，每個會話有多個頁面訪問量和您的網頁重新使用相同的腳本和樣式很多，有更大的緩存外部文件的潛在利益。

包JavaScript文件

不同的CSS，JavaScript的情況下，這些文件可能嘎吱嘎吱使用一些標準的算法，將減少文件的大小，比簡單地去除空格或製表符。 例如JavaScript的包裝可以在這裡找到http://dean.edwards.name/packer/

擺脫任何重複的腳本

這是極不尋常，整個腳本可能會重複，但美國十大網站的評論表明，其中兩個含有重複的腳本。 重複的腳本，但明顯降低，造成不必要的HTTP請求和浪費JavaScript執行性能。
此外，在許多情況下，儘管腳本的名稱是不同的，是由於團隊的規模和數量的腳本在同一頁面重複的腳本的可能性。

最小化在可能的情況下訪問DOM元素

使用JavaScript訪問DOM元素是緩慢的，因此，為了有更敏感的頁面，你應該：
•緩存參考訪問元素
•更新節點“離線”，然後將它們添加到樹
•避免固定用JavaScript佈局

從內容和表現的分離行為

正如我們單獨介紹（CSS / XSLT），內容（XHTML / XML的），我們也應該分開行為（JavaScript）的。 這就是所謂的不顯眼的Javascript。 正如我們鏈接到外部CSS文件，我們應該鏈接到外部JavaScript文件。

行為，而不是硬編碼的內容（如onmouseover的onclick等）的行為，應被動態添加元素，類和獨特的元素（IDS）使用DOM。 的基礎性文件的內容，應包含唯一有效的XHTML / XML和沒有JavaScript。
添加行為的Javascript應該增加的內容。 內容應保持有用和可用，沒有JavaScript（或不完整的JavaScript支持）。

我已經保存了這篇文章的年齡，所以很抱歉！ 我不記得源......但我們必須知道觀眾對他們來說，我們開發的網站，它似乎是有益的......所以我在這裡是

頁的重量可以用來確定一個給定頁面的下載時間，各種各樣的互聯網連接速度。 例如，下表顯示了在一些流行的連接速度三個不同的網頁的下載時間。

減少頁重量的好處？

減少頁面重效益的網站所有者和消費者產生積極的影響。 潛在的好處包括：

1. 網頁加載更快。 頁重量減少最明顯的影響，是您網站的網頁加載速度更快的遊客，無論其連接速度。
2. 頁面加載時間降低，創造更舒適的遊客。 遊客不太可能變得沮喪和其他地方去，如果您的網頁加載迅速。 另一方面，緩慢加載頁面失去訪問者和潛在客戶的最可靠的方法之一。
3. 更快的加載時間，將有助於提高轉換。 更多的遊客將不再停留在您的網站。 他們將最終使採購，簽署您的簡報，或書，標誌著您的網站。
4. 你的品牌認知度將得到加強。 回頭客和第一時間的遊客，都將是更傾向於“專業”來形容你的網站（業務）如果您的網頁加載迅速。
5. 乾淨，堅實的代碼的網頁，往往會更有效地利用天然的搜索引擎被索引。
6. 重量優化的頁面，實際上可以節省帶寬費用高流量的網站上。 100,000頁，每個重達150 KB將需要從你的ISP的帶寬超過10萬頁，每個重量75 KB的兩倍多。 對於收取的ISP所使用的帶寬或超支，這種減少可以極大地節省帶寬費用。

考慮下面的數據，在一份報告中公佈的

如果XML / XSL轉換是你的結構域，然後還有時候，我們需要一個動態代碼peice要使用庫項目（可重複使用的要作出）。 我的意思，可能與這個示例場景中更明確。

想像你正在創建一個網站（使用的XML，XSL transfroms當然）和大多數的網頁將有一個評論模塊 。 好吧！ 然後，複製或粘貼此代碼到每一頁的模板（我不說，但維修和返工一場噩夢），甚至更好，你創建包含文件可以在任何你想它在您的網頁拉（ S）...
那麼，如何創造一個XSL INCLUDE文件，它包括在另一個XSL文件 ？ 這裡是如何...

只是把事情說清楚......這裡是快速的文件列表，您將創建......在這裡，我們將納入食品父頁左右的水果和蔬菜的信息。

1。 food.xml - XML數據文件的轉換將應用於
2。 food.xsl - 主要XSL文件，這將改變我們的food.xml
3。 inc_fruits.xsl - 的XSL包括會使水果的數據文件
4。 inc_vegtables.xsl - XSL的文件，將呈現vetetables數據

我不認為我有解釋太多，以上元素的代碼，將自明...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ BODY>
</ HTML>
</ XSL模板>
</ XSL樣式表>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

下載上述所有文件（253下載）