日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
【網(wǎng)站性能指南】之四前端性能

【概述】

目前創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、榮縣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

在這一章，我們會(huì)聚焦在前端性能:

外部的Css 和 Javascript

Css 和 Javascript 的 迷你化 與 合并

圖片的***化

Css 圖片拼合器

【外部的CSS和Javascript】

幾乎所有的CSS和Javascript 都應(yīng)該放在外部文件

減少頁(yè)面的尺寸；允許重用；允許使其過(guò)期 ；可讀性更高

把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和Javascript的迷你化與合并】

Css 和 javascript 的迷你化與合并是一種減少 httprequest 和傳輸數(shù)據(jù)量 的行之有效的方式。

迷你化

1.移除白空格、注釋和多余的分號(hào)等

2.同樣可以看到這樣的文件名中包含".min" （如果你經(jīng)常使用jquery的插件，你會(huì)看到很多min文件）

3.我們看一下jquery官網(wǎng)，開(kāi)發(fā)版本大小是247KB，min版只有32KB。整整壓縮了88%。

迷你化的工具合并

·JSMin

·Packer

·YUI Compressor

·CSS Min

·Microsoft Ajax Minifier （特別推薦 http://ajaxmin.codeplex.com/)

javascript 和 css；命令行、dll和build 任務(wù)；

·合并文件以減少httprequest次數(shù)msbuild

·策略實(shí)踐

使用外部文件；迷你化css和js文件；把所有js文件合并成一個(gè)文件（jquery、jquery插件等）；合并所有css文件成一個(gè)文件；添加一個(gè)唯一的版本號(hào)到合并的文件中，日后我們可以控制瀏覽器緩存；避免當(dāng)我們?cè)谶\(yùn)行時(shí)迷你化和合并文件時(shí)發(fā)生的沖突；引用新的合并過(guò)的文件。

1.找到Visual studio Project File（.csporj)

2.修改一個(gè).cs文件，確保項(xiàng)目文件可以重新編譯（如果我們只是修改js和css文件，項(xiàng)目不會(huì)重新編譯）

3.使用msbuild Extension Pack（http://msbuildextensionpackcodeplex.com）

4.通過(guò)bin目錄下webform程序集得到版本號(hào)。

5.使用Msbuild ajaxmodifier 去迷你化js和css文件。

6.使用Msbuild 去合并迷你化之后的文件。

7.注意文件以前的引用順序。保持以前的順序。

8.使用debug symbol vaule去確定是否在release 模式，為新的release build 引用新的合并過(guò)的文件。

結(jié)果：主頁(yè)快了46%

代碼：

為了貼切描述這一過(guò)程，一下是proj文件的關(guān)鍵code。為了便于大家理解，我在本章的結(jié)尾放了一個(gè)完整的代碼示例。我們需要安裝msbuild 和 它的擴(kuò)展 ajaxmodifier

看看結(jié)果，我的proj里多了2個(gè)文件。我們?cè)谝眠@兩個(gè)文件時(shí)候只需要拼接出版本號(hào)即可。

 
 
 
 
    
  
  
  
  
  1.   
    2.   
  
  
  
  2.     
    3.   
  
  
  
  3.     
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.       
    6.   
  
  
  
  6.         
    7.   
  
  
  
  7.         
    8.   
  
  
  
  8.       
    9.   
  
  
  
  9.       
    10.   
  
  
  
  10.     
    11.   
  
  
  
  11.     
    12.   
  
  
  
  12.       
    13.   
  
  
  
  13.       
    14.   
  
  
  
  14.       
    15.   
  
  
  
  15.       
    16.   
  
  
  
  16.       
    17.   
  
  
  
  17.         
    18.   
  
  
  
  18.       
    19.   
  
  
  
  19.       
    20.   
  
  
  
  20.       
    21.   
  
  
  
  21.       
    22.   
  
  
  
  22.         
    23.   
  
  
  
  23.       
    24.   
  
  
  
  24.       
    25.   
  
  
  
  25.       
    26.   
  
  
  
  26.         
    27.   
  
  
  
  27.       
    28.   
  
  
  
  28.       
    29.   
  
  
  
  29.       
    30.   
  
  
  
  30.         
    31.   
  
  
  
  31.         
    32.   
  
  
  
  32.       
    33.   
  
  
  
  33.       
    34.   
  
  
  
  34.       
    35.   
  
  
  
  35.         
    36.   
  
  
  
  36.         
    37.   
  
  
  
  37.        
    38.   
  
  
  
  38.       
    39.   
  
  
  
  39.       
    40.   
  
  
  
  40.       
    41.   
  
  
  
  41.       
    42.   
  
  
  
  42.       
    43.   
  
  
  
  43.  
    44.   
  
  
  
  44.       
    45.   
  
  
  
  45.       
    46.   
  
  
  
  46.         
    47.   
  
  
  
  47.       
    48.   
  
  
  
  48.       
    49.   
  
  
  
  49.       
    50.   
  
  
  
  50.         
    51.   
  
  
  
  51.       
    52.   
  
  
  
  52.  
    53.   
  
  
  
  53.       
    54.   
  
  
  
  54.           
    55.   
  
  
  
  55.       
    56.   
  
  
  
  56.       
    57.   
  
  
  
  57.         
    58.   
  
  
  
  58.         
    59.   
  
  
  
  59.       
    60.   
  
  
  
  60.    
    61.

#p#

【圖片***化】

我們平時(shí)接觸到的圖片大概分以下幾種：

JPEG JPEG 圖片以 24 位顏色存儲(chǔ)單個(gè)光柵圖像。JPEG 是與平臺(tái)無(wú)關(guān)的格式，支持***級(jí)別的壓縮，不過(guò)，這種壓縮是有損耗的。

PNG  流式網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format，PNG)名稱來(lái)源于非官方的“PNG’s Not GIF”，其目的是企圖替代GIF和TIFF文件格式

GIF  GIF 是用于壓縮具有單調(diào)顏色和清晰細(xì)節(jié)的圖像（如線狀圖、徽標(biāo)或帶文字的插圖）的標(biāo)準(zhǔn)格式。

如果我們不能確定用哪種格式的圖片，我們需要提供3種不同格式的相同圖片，并且比較它們的質(zhì)量和圖片占用空間。

在這里我主要講一下JEPG的壓縮。我的想法是縮小50%的占用空間，看看它的質(zhì)量如何？

【圖片優(yōu)化器】

Jpegtran 用特定的圖像格式從圖像文件中刪除不必要的元數(shù)據(jù)，無(wú)損

PNGcrush PNG優(yōu)化器

Smushit http://www.smushit.com/ysmush.it/ （同Jpegtran，支持多種格式，雅虎提供）

Paint.Net 按比例壓縮

下圖是我使用了 PaintNet 和Smushit優(yōu)化過(guò)的圖片。原圖是右邊的，大小32K。PaintNet壓縮50%后為左上圖。下圖是使用Smushit去掉無(wú)用的元數(shù)據(jù)。大小30K。

【CSS 圖片拼合器】

Css拼合器是一種合并圖片的工具。說(shuō)它是一種，就是有很多工具可以實(shí)現(xiàn)這個(gè)功能。

它的主要功能是可以把很多小圖片合并成一張圖片，這樣有效減少了httprequest的次數(shù)。

使用小圖片時(shí)，只需要根據(jù)位置在那張圖片上定位。

我們可以訪問(wèn):http://spritegen.website-performance.org/ 去使用它。

【try it】

訪問(wèn) css 拼合器站點(diǎn)。

把需要拼接的圖片打包成zip格式。

上傳

勾選一些自定義的選項(xiàng)

生成

我去人人網(wǎng)主頁(yè)選擇了3張圖片，使用壓縮工具把它們打包，并且上傳。

點(diǎn)擊了最下邊生成拼合圖片之后。可以看到上方多了3行css 規(guī)則：

 
 
 
 
    
  
  
  
  
  1. .sprite-rrdesk{ background-position: 0 0; width: 75px; height: 75px; }   
    2.   
  
  
  
  2. .sprite-rrgame{ background-position: 0 -125px; width: 75px; height: 75px; }   
    3.   
  
  
  
  3. .sprite-rrmusic{ background-position: 0 -250px; width: 75px; height: 75px; }  
    4.

讓我們看看合并之后的圖片：

在項(xiàng)目中使用的時(shí)候我們先引用css，在html里只需要這樣就可以啦：

 
 
 
 
    
  
  
  
  
  1.   
    2.

msbuild demo的源代碼：

http://files.cnblogs.com/techborther/MsBuildUsage.7z

【msbuild 參考】  ：http://msdn.microsoft.com/zh-cn/library/0k6kkbsd.aspx

原文鏈接：http://www.cnblogs.com/techborther/archive/2012/08/19/2624989.html


當(dāng)前名稱：【網(wǎng)站性能指南】之四前端性能
標(biāo)題來(lái)源：http://www.5511xx.com/article/coopscj.html