基於GruntJS的前端效能最佳化，GruntJS效能最佳化

基於GruntJS的前端效能最佳化，GruntJS效能最佳化

本文主要如何使用GruntJS來作簡單的前端效能最佳化的自動化處理，我寫了一個完整的例子放在Github上，可以參考一下。關於Yahoo的前端最佳化規則請參考：Best Practices for Speeding Up Your Web Site

前端效能主要有圖片的壓縮，JS和CSS的合并、壓縮，對所有靜態檔案的檔案根據其內容加上hash，然後把CSS、HTML等檔案中對所有的靜態檔案名稱替換成加上hash的新檔案名稱。對所有的靜態內容的路徑上加上CDN的URL，最後將所有的靜態檔案上傳到七牛CDN上去。下面我們按功能來說一下。

圖片壓縮

許多圖片尤其是png圖片有時候含有大量無意義的填充，增加圖片的大小。我們可以通過contrib-imagemin對所有的圖片進行壓縮最佳化，從而減小圖片的大小。根據我們使用經驗來看，一般可以壓縮5％到10％左右。

JS和CSS的檔案的合并壓縮<p合并JS和CSS可以大量的減少HTTP請求，達到最佳化前端效能的目的。同時CSS和JS檔案是靜態檔案，可以壓縮到非常小的大小。GruntJS官方提供了contrib-concat,contrib-cssmin, contrib-uglify等對應的外掛程式來做對應的事情。我們這裡因為要檔案名稱的替換，使用了usemin外掛程式，它會自動調用上述幾個外掛程式的，所以在我們的Gruntfile.js裡並沒有這3個外掛程式的配置資訊，而只是在task列表裡調用了這幾個外掛程式。具體請參考：usemin。靜態檔案快取處理

為了最大程度的提高瀏覽器的載入速度，最好的方法是讓瀏覽器將所有的靜態檔案都緩衝在用戶端，這裡的緩衝是指expire和cache-control的max-age，而不是Last-Modified，因為使用Last-Modified 和 If-Modified-Since還是會發出請求的，只是沒有更新就返回304狀態代碼而max-age則是不會發出請求的，而是直接使用本地的緩衝。使用緩衝的面臨的一個比較在的問題是如果檔案有更新如果清理緩衝或者如果讓使用者下載最新的檔案。一種做法是靜態檔案加上版本號碼，例如 style.css?v=1.1。這種做法可以達到清除緩衝的目的，但是維護起來相對麻煩，比較版本號碼沒有辦法怎麼化，沒有辦法判斷檔案是否有更新。另外一種做法是對檔案內容進行hash，然後將hash值加入到檔案名稱中，例如style.abd1q2.css。這樣就很容易進行自動化處理，我們這裡使用了yeoman開發的filerev外掛程式，它可以對檔案內容進行MD5運算，然後將運算後的hash加到檔案名稱中去，這樣就很容易判斷檔案是否被修改，同時它可以和usemin進行完美的結合起來。

Hash處理後檔案名稱的替換

對CSS和JS進行壓縮合并以及對所有靜態資源進行filerev處理後，原來HTML、CSS、JS等靜態資源的引用檔案名稱就需要替換成新的檔案名稱了。例如HTML中對CSS和JS的引用，CSS中對圖片的引用。我們使用了Yeoman開發的usemin進行替換。它的工作原理是，對需要處理的檔案中的靜態資源，在指定的檔案夾尋找經過filerev處理過的對應檔案，如果找到則替換成相應的檔案。例如，我們在代碼中對CSS的引用代碼如下：<link type="text/css" href="style.css">，usemin會在指定的檔案夾下面尋找類似style.abd1q2.css的檔案，如果找到則會把我們的CSS引用代碼自動替換成：<link type="text/css" href="style.abd1q2.css">。具體請參考：usemin。

CDN路徑的替換

開發過程中對所有靜態資源的引用都是指向項目自己的domain。如果要使用CDN，則需要將所有靜態資源的引用Domain指向CDN的domain。這裡使用GruntJS外掛程式cdn來對所有靜態資源進行全域替換。

上傳靜態資源到CDN

當以上步驟完成後就可以將所有的靜態檔案上傳到CDN了。七牛官方提供了NodeJS的SDK,但是貌似比較難用。我們例子裡使用了第三方開發的NodeJS模組qn，非常簡單，詳見：qn。我的做法是將圖片和CSS／JS所在的目錄分別遍曆上傳，對圖片和CSS／JS分別加上不同的首碼。因為七牛是不提供在裡面建檔案夾的。詳見cdn.js檔案。

用法
總結：網站性可以最佳化，SEO,與伺服器端的基礎知識詳情見內頁

網站效能最佳化：代碼簡單 方便蜘蛛抓取 能不用JS和frame、flash最好了
seo：關鍵詞選好 做原創 發高品質外鏈 堅持做
伺服器端：這個你得會DOS命令了，瞭解windows或者linux系統的操作
 
web前端裡的js技術

js可以做的東西有很多啊

可以做特效，可以操作頁面控制項，如果使用ajax，還可以用來操作資料。

如果你能把特效做好，那別的東西你應該也就不成問題了。

例如當表單提交的時候做輸入判斷，登入時做cookie設定，頁面操作時的隱藏、顯示、定位等操作，很多哦