javascript和css壓縮工具下載
『壹』 IIS網站伺服器性能應如何進行優化
1、減少HTTP請求數量
這主要是修改網站代碼,減少外部圖片、CSS、JS等文件數量,手動合並多個CSS/javaScript文件。IIS那裡不用設置。
2、使用CDN
對於小網站來說,這個就免了吧。當然有錢人可以試試,可以從技術上解決用戶訪問網站響應速度慢的問題。
3、啟用內容過期
對於靜態文件啟用內容過期可以提高訪問性能。首先網站的目錄要劃分合理,圖片、CSS、JavaScript均放在單獨目錄下,然後在IIS中選擇目錄,點屬性-HTTP頭,啟用內容過期,可以選擇30天後過去,這樣,用戶瀏覽器將比較當前日期和截止日期,以便決定是顯示緩存頁還是從伺服器請求更新的頁,由於圖片、CSS、JS通常變化較少,因此基本上都從本地緩存讀取,從而加快顯示速度。
4、啟用Gzip壓縮
HTTP壓縮是在Web伺服器和瀏覽器間傳輸壓縮文本內容的方法。HTTP壓縮採用通用的壓縮演算法如Gzip等壓縮HTML、JavaScript或 CSS文件。壓縮的最大好處就是降低了網路傳輸的數據量,從而提高客戶端瀏覽器的訪問速度。
使用方法是,右擊「網站」->「屬性」,選擇「服務」。在「HTTP壓縮」框中選中「壓縮靜態文件」,「臨時目錄」建議單獨設置另一個盤的目錄下。
之後,IIS管理器中,右擊「Web服務擴展」->「增加一個新的Web服務擴展」,在「擴展名」中輸入「HTTPCompression」,添加「要求的文件」為C:\WINDOWS\system32\inetsrv\gzip.dll,其中Windows系統目錄根據您的安裝可能有所不同,選中「設置擴展狀態為允許」。
最後,使用文本編輯器打開C:\Windows\System32\inetsrv\MetaBase.xml,在HcFileExtensions中增加需要壓縮的靜態文件後綴名,默認為HTML和TXT文件,建議再添加上js、css等,不要添加圖片或ZIP等已經被壓縮的文件。
5、將樣式文件放在頭部
這是基本的HTML代碼風格,將所有的CSS文件都放在HTML頁面的頭部。
6、將腳本文件放在尾部
這也是基本的HTML代碼風格,將所有的JavaScript文件都放在HTML頁面的尾部。
7、避免CSS表達式
這點很簡單,因為大多數人從來不用CSS表達式。
8、使用外部的JavaScript和CSS
將所有的JavaScript和CSS都做成外部文件的形式進行引用,這主要是為了讓這些文件可以被瀏覽器緩存起來,參見第三點的介紹。
9、減少DNS查詢
域名的DNS查詢會帶來額外的訪問開銷,減少頁面內文件的主機域名數量,一個頁面的主機域名保持在2-4個以內,這樣就不會降低頁面的裝入速度。
10、壓縮JavaScript文件
壓縮腳本文件,刪除不必要的字元,可以改善載入時間,目前有很多JavaScript文件的壓縮工具,我這里有一個GUI界面的JS壓縮工具供下載。
11、避免重定向
網頁的重定向會帶來額外的運行開銷,因此要避免頁面進行重定向跳轉操作。
12、刪除重復腳本
一個頁面兩次包含同一個JavaScript文件會影響載入的性能,因此需要將重復的腳本文件刪除。
13、配置ETag
這是一個令人迷惑的問題。理論上說將伺服器的ETag刪除會提高HTTP請求的性能,但是按照微軟官方提供的修改方法配置IIS 6.0,並沒有實際效果,最終我使用了一個remetag,以ISAPI的方式實現了刪除ETag的功能。
『貳』 將Js和CSS文件壓縮成min文件
個人建議從幾個方面入手:
1、在雹灶伺服器上啟用源胡扮GZIP壓縮,添加css等靜態文件等。
2、把主頁、內容頁的CSS分開寫,公共部分單獨用一個CSS,這樣就可以減少CSS的大小。
3、優化CSS語法,並可以使用工做轎具壓縮,但要注意用多個瀏覽器測試。
4、將一些JS調用盡量放到網頁底部
『叄』 uglify-js壓縮js文件minifier壓縮css文件
安裝:cnpm install uglify-js –gcss
參數用法:
uglifyjs XX.js -o xx.min.js 壓縮
uglifyjs XX.js -m -o xx.min.js 混淆性壓縮態敬戚
uglifyjs xx.min.js –b –o xx.js 美化(反壓縮) 文稿喚件
安裝:
cnpm install minifier -g
用法:
minifier 是一個 nodejs 下的用於壓縮 js 和 css 文件的插件。
minify index.js
則在當前文件夾下會生成一個index.min.js 的壓縮的文件。css文件採用相同的命令進行壓縮帆陵。
『肆』 前端工程師都有用哪些比較靠譜的小工具
1.node.js + npm, 這個是前端工具的一個平台,沒有他們就沒有以下的工具,建立開發環境,下載開發工具,運行開發工具的利器
2. bower, 庫依賴管理器,類似於npm,但針對瀏覽器JavaScript的依賴管理,減少尋找庫,下載庫和升級庫的煩惱
3.grunt,流程自動化管理工具,將你非編程的開發步驟減到最小,grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄,發布和開發各種無壓力。以下大部分開發工具,都有grunt的相對應的插件,也就是說他們都能利用grunt進行自動化運行
4.liveReload, 本來是一套解決方案,自從grunt watch出現後,我們只要安裝他的chrome或者firefox插件就行了。它的目的很簡單,只要發現目標文件中有任何一個文件有改動,立刻通知瀏覽器刷新頁面,這樣就免除了手動按F5。如果和grunt watch合用,就是只要發現任何文件有改動,立刻運行自動化流程中的所有任務,然後通知瀏覽器刷新。
5. 本人用less比較多,因為基本無縫兼容歷史遺留系統中的css,(而Sass語法比較特殊,還沒有專門用過,應該開發新系統的css比較好),一套css預編譯語言,可以把less語法轉成css語法,lessc是less語言編譯器,配合grunt less,編寫大型css文檔毫無壓力。
6.Phantomjs,沒有界面的瀏覽器,用js腳本控制其操作網頁。測試,抓圖,網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後,控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功肢派能,在利用live-reload即時刷新功能,可以讓你開發css的時候,快速對n多個頁面進行觀察,看其前後變化。不過缺點也比較明顯,就是速度慢。但比起手動對比來看,還是非常快的。值得css開發時擁有
8. phantomCSS,這個和grunt photobox類似,都用於css開發的,差別是photobox是全局觀察差別,而這個是單元組件觀察差別,它方便你就抓頁面中某一塊元素然後進行前後比較,更加註重細節上的差異,這個比較合適組件開發時候使用。
9. jshint,幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前,用jshint檢查一下是沒錯的 。
10.UglifyJS,壓縮JavaScript代碼,使歷差賀你的JS代碼可以更加快速的載入。有grunt的插件
11. browserify允許你在瀏覽器裡面使用CMD標准模塊,但本人認為它的另外一個優勢是合並代碼,開發時候可以把代碼模塊化,分成很多很多小文件,然後有調理的放到相對應文件夾下,然後最後合成單一文件。本人曾經利用browserify開發greasemonkey代碼,大大簡化了greasemonkey的開發難度和增強了greasemonkey代碼的質量。browserify有grunt插件,這樣又減少的開發步驟。
12. Karma, google開發的一個單元測試運行器,這個自己本身不是一個單元測試框架,而是配合測試單元框架的一個工具。由於前端瀏覽器眾多,就算你有live-reload這樣自動化工具,但是還是要手動打開各種瀏覽器,手動把你的單元測試在各個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器,然後把單元測試在個個瀏覽器中自動運行一遍,讓這個步驟也能自動化了。
13.clean-css (grunt cssmin), 我用的是grunt cssmin,但是grunt cssmin實際上背後使用的是clean-css工具,這個工具就是用來壓縮精簡css的,讓css文件大小更小。
還有慶塌些有名氣的工具,應該不錯,但是自己沒有用過,所以也就沒有提,但可以參考一下
yeoman 項目初始化工具
buddy.js 魔術數字檢查器
Image minifier.壓縮圖片工具
html-minifier html壓縮
jade html預編譯語言
jsdox JS代碼注釋文檔生成器
jscs JS代碼風格檢查器
『伍』 有哪位可以發一下 UltraEdit 26破解版的安裝包
前言:此版本的軟體安裝包附加激活教程我可以給您一份,不過僅供個人使用,切勿傳播,希望可以幫助您。
UltraEdit 26破解版
全新功能
1、命令調色板
在全新的命令調色板啟巧中得到了最好的體現。命令調色板是一種易於訪問的搜索表單,它將軟體的所有功能放在您的指尖。通過Ctrl + Shift + P(或功能區右上角的圖標)打開它,然後開始輸入關鍵字以查看軟體中的所有匹配命令和設置,並實時過濾。您可以滾動查看結果,然後按Enter鍵執行所需的結果。
命令選項板顯示每個結果的關聯鍵盤快捷鍵(如果可用)。此外,頂部最近使用的列表使得回憶起您可能不記得的最後使用過的命令變得輕而易舉。「 收藏夾」列表允許您將喜愛的命令固定在頂部。
不確定要搜索什麼?我們為命令添加了內部搜索標記,以便您可以查看關鍵字搜索中可能沒有名稱中的關鍵字的命令 - 例如,搜索「HTML」時,結果中會顯示「實時預覽」。此外,您可以直接從命令面板中搜索和播放自定義宏,腳本和用戶/項目工具。
底線:命令面板使您能夠輕松訪問和發現UltraEdit的所有功能和靈活性!
2、JavaScript / CSS壓縮器和deminifier
直接在程序中輕松壓縮和解壓縮JavaScript和CSS ... V26包含幾型旁孝個新的JS和CSS工具,只需單擊滑鼠即可輕松編輯縮小代碼。重新編寫Coding功能區以包含具有這些選項的新JS / CSS下拉列表。(目前,JavaScript和CSS的壓縮刪除了不必要的空格和注釋,但未來的迭代可能包括變數簡化,條件語句優化,CSS重構等。)此外,我們還添加了原生JavaScript Lint集成,以便您可以語法檢查JavaScript在飛行中。
3、重新設計代碼折疊
我們已經深入探討了這一點,添加了一個獨特的專有多段編輯控制項,以便在巨大的源文件中進行代碼折疊 - 甚至是高達500 MB的文件!您可能遇到的先前限制已被消除。除此之外,我們還改進並增強了代碼折疊的准確性,解析和性能 - 尤其是在較大的文件中。
4、宏觀性能檢修
V26包括對宏播放和性能的一些實質性微調和優化。除了提高宏的可靠性,特別是那些循環到文件末尾的宏,我們還大大提高了播卜稿放速度。如果您的宏可以播放大量數據,那麼您應該看到運行它們所需的時間顯著改善。在許多情況下,我們已經看到宏播放時間減少到三分之一。
5、雙擊時突出顯示所有出現的字元串
詢問並且您將收到...您現在可以在雙擊時啟用所有字元串的自動突出顯示,使您能夠立即查看變數或函數的所有出現。要啟用此功能,請轉到高級»設置»搜索»高級。
6、上下文敏感的提示
在軟體打開一段時間後,您可能會注意到一些新的東西。我們在應用程序的下部區域添加了一個上下文相關的,不顯眼的提示欄,以幫助您升級工作流程。打開一個XML文件?提示欄可能會建議您更快地整理XML代碼。或者它可能會為您提供一個您不知道的隱藏功能的提示。
7、現代化的鍵映射
我們更新了一些關鍵映射以及一個先前硬編碼的鍵映射。
①您現在可以重新映射Ctrl + Tab和Ctrl + Shift + Tab以啟用類似瀏覽器的選項卡切換
②文件中的替換被重新映射到Ctrl + Shift + R
③快速記錄宏重新映射到Ctrl + Shift + Q
④ESC駁回了「突出顯示全部」突出顯示
『陸』 求網面下載工具,能把JS和CSS文件也下下來
推薦你裂碰物一款軟體:webzip,可以下載整站。css和js都會下載下來的,css中的margin-top本身也吵舉是html語言,定義的時候添加在當頁而不是其他的肆液css文件里就可以顯示到html頁面了。不過用一個css文件統一管理樣式表會更加清晰便利
『柒』 如何壓縮javascript和css文件
一、壓縮html和javascript:
我們用站長工具的JavaScript-HTML格式化工具,我們打開頁面,我今天要壓縮的文件js文件:common.js ,把js代碼復制到到JavaScript/HTML格式化工具裡面如下圖所示:
點擊下面的「普通壓縮」和「加密壓縮」按鈕,經過我的精心測試,使用「加密壓縮」,對文件壓縮率是最好的,所以點擊「加密壓縮」,壓縮後如圖:
javascript代碼壓縮後,我們就把這些代碼在復制到common.js文件裡面,在吧這個文件上傳到空間原來的位置,進行訪問是否存在一些錯誤,如果沒有什麼問題說明壓縮成功;
我的common.js 文件壓縮前和壓縮後的對比:
壓縮前:
壓縮後:
文件壓縮前和壓縮後確實有明確的減少,說明壓縮確實減少文件的大小,
我們來測試文件壓縮前和壓縮後所有能的時間做對比(我是用火狐插件測試傳輸速度):
壓縮前所用時間:
壓縮後所用時間:
壓縮前所用時間是:125ms,壓縮後所用時間:78ms ,文件壓縮後給我們節省大量的時間,如果每個js都進行壓縮,我們房子訪問速度會更快的。
(註:html文件和javascript壓縮原來一樣的,當時壓縮html要用到「普通壓縮」按鈕壓縮)
二、壓縮css文件:
我們打開站長工具的Css壓縮/格式化工具頁面,我要壓縮的文件是五色旗保健品商城的css主文件style.css,首先我們打開站長工具的Css壓縮/格式化工具頁面 ,把style.css 代碼放到Css壓縮/格式化工具裡面,如下圖所示:
點擊「壓縮代碼」按鈕後,css代碼壓縮成功,如下圖所示:
後邊就是壓縮後的css代碼,你要不右邊的代碼復制到源文件style.css裡面在上傳到伺服器空間裡面,在訪問一下網,看看網頁樣式有沒有改變,如果有點變化就需要簡單的調試一下,如果沒有變樣,說明你的css壓縮成功了;
下面我們來看看styl.css文件壓縮前和壓縮後的大小和放在訪問速度的大小:
文件大小對比:
壓縮前:
壓縮後:
壓縮前30kb,壓縮後23kb,明顯的文件大小減小了
壓縮前所用時間:
css壓縮前的時間.jpg (7.36 KB, 下載次數: 0)
下載附件
css壓縮前的時間.jpg
2013-11-2 00:35 上傳
壓縮後所用時間:
壓縮前所用時間是:188ms,壓縮後所用時間:93ms ,css壓縮後明顯的節省了95ms;
總結:一個大的網站可能會有很多的javascript和css,如果沒有都進行壓縮的話,一定會減少很多文件大小的,其實減少文件大少並不是很重要,最重要的是,文件容量減少了,能夠快速的提高網站訪問的速度,給用戶帶來好的體驗,我們盡量的把文件壓縮到最小,這樣才有利於用戶快速的打開網站,至此我的五色旗保健品商城優化後,我的每天的訪問量也增加了很多。
『捌』 js代碼壓縮!
http://tools.css-js.com/compressor.html
這個站點裡面有四個壓縮引擎,一個YUI壓縮,一個UglifyJS壓縮,一個JSPacker壓縮,和一個新的JsMin壓縮。
一般用UglifyJS引擎壓縮就可以。jQuery和好些其他的前端項目就是用他壓縮的。
另外給個建議,你把你的JS文件用匿名函數的方式封裝起來,對外只給一個介面。這樣JS壓縮引擎就可以把你匿名函數中不對外開放的內部變數名稱都給替換成a,b,c,d這樣的單字元,很能節省體積。