電腦王阿達
  • 首頁
  • 科技新聞
    • 最新科技新聞
    • AI 新聞與教學
      • AI 工具分享與教學
      • AI 趨勢與相關新聞
    • 產品評測
      • GPS/行車記錄器評測
      • iOS周邊
      • Android周邊
    • 科技廠商專訪報導
    • 電腦硬體周邊情報
    • 相機
  • 酷品開箱
  • 通訊達人
    • 電腦王阿達測速工具
  • APP/軟體/教學
    • 電腦應用與其他教學
      • 網路與軟體應用
      • 多媒體轉檔/運用
      • 其他文章
    • 跨平台App
    • iPhone/iPad相關
      • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB/CYDIA應用
    • Android相關資訊
      • Android App分享介紹
      • Android 基礎教學
      • 智慧手機韌體更新
      • Windows Mobile手機相關文章
    • Mac 軟體分享與教學
    • LINE
    • Telegram
    • 攝影教學
    • 語文學習
    • 轉貼好文
    • WordPress 架站教學分享
    • 未分類文章
  • 休閒/懶人包
    • 新聞台直播 頻道大集合!想看新聞不用辦第四台!
    • 遊戲電玩
    • 動漫、玩具、敗家
      • 老弟紙模型作品集
    • KUSO
      • 有趣影片
    • 圖文創作
    • 生活與旅遊
    • 超好用懶人包
    • 最新抽獎情報公告
    • Pokemon GO攻略
  • 電腦王團隊
No Result
View All Result
  • 首頁
  • 科技新聞
    • 最新科技新聞
    • AI 新聞與教學
      • AI 工具分享與教學
      • AI 趨勢與相關新聞
    • 產品評測
      • GPS/行車記錄器評測
      • iOS周邊
      • Android周邊
    • 科技廠商專訪報導
    • 電腦硬體周邊情報
    • 相機
  • 酷品開箱
  • 通訊達人
    • 電腦王阿達測速工具
  • APP/軟體/教學
    • 電腦應用與其他教學
      • 網路與軟體應用
      • 多媒體轉檔/運用
      • 其他文章
    • 跨平台App
    • iPhone/iPad相關
      • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB/CYDIA應用
    • Android相關資訊
      • Android App分享介紹
      • Android 基礎教學
      • 智慧手機韌體更新
      • Windows Mobile手機相關文章
    • Mac 軟體分享與教學
    • LINE
    • Telegram
    • 攝影教學
    • 語文學習
    • 轉貼好文
    • WordPress 架站教學分享
    • 未分類文章
  • 休閒/懶人包
    • 新聞台直播 頻道大集合!想看新聞不用辦第四台!
    • 遊戲電玩
    • 動漫、玩具、敗家
      • 老弟紙模型作品集
    • KUSO
      • 有趣影片
    • 圖文創作
    • 生活與旅遊
    • 超好用懶人包
    • 最新抽獎情報公告
    • Pokemon GO攻略
  • 電腦王團隊
No Result
View All Result
電腦王阿達
No Result
View All Result

首頁 » 最新科技新聞與報導 » 電腦應用與其他教學

[教學]線上壓縮CSS、JavaScript Compressor語法,減少CSS與JS代碼的大小!

Angus電科技 by Angus電科技
2017 年 10 月 18 日
in 電腦應用與其他教學, WordPress 架站教學分享, 語文學習
讀取中...

為什麼要壓縮CSS與JS語法呢?簡單來說語法每個人都會寫,但是要寫出非常精簡又短的語法真的是要下功夫才行的,而很多人再寫語法時都會用自己的邏輯觀念去撰寫,寫完整個CSS語法後檔案打開來看看語法應該是非常整齊的排列順序,中間還有非常多的空白或是不必要的字元在裡面,這樣整個語法看下來如果語法夠複雜的話還有可能會有上萬行的CSS或JS語法,要怎麼樣把這些不必要的語法行列刪除外,在把CSS、JS語法全部只寫在一行列裡面來加快我們的CSS、JS加載速度呢?這應該會是一個非常頭痛的問題,如果您夠耐心的話可以把上萬行的CSS、JS語法慢慢一行一行的縮短,當然CSS、JS這個問題也是有語法壓縮器的,使用者只要透過線上版的CSS、JavaScript Compressor的壓縮器就可以一秒產生已減少CSS與JS代碼的語法,可以節省非常多不必要的語法行列,來提高節省網頁的加載速度,如果您是ㄧ個網頁設計師,我想這款線上CSS、JS壓縮器一定是不可以缺少的工具之一。

CSS、JS Compressor

 

CSS Compressor語法壓縮教學

▼ 首先先進入「CSS Compressor」線上壓縮器網址,在頁面上可以看到下方的下拉式選單內可以選擇要壓縮CSS語法的程度,可以選擇最高、高、標準、低壓縮,預設是選擇「最高」。

CSS、JS Compressor

 

▼ 接下來就是把自己網站內的style語法或其它想要壓縮的CSS語法,複製並且貼上在CSS Compressor網頁上的CSS Source Code Input中。

CSS、JS Compressor

 

▼ 將要壓縮的語法貼上後,再按下右下角的「Compress」紐,就會開始進行壓縮。

CSS、JS Compressor

 

▼ 不用幾秒的時間就可以產生出已經壓縮好的CSS語法,原本INPUT的語法74453字節壓縮減少變成了50266字節,足足節省了48.12%耶。

CSS、JS Compressor

 

▼ 在Show advanced options的選項內也有更多進階的選項可以勾選,如果有興趣的朋友們也可以自行摸索看看。

CSS、JS Compressor

 

▼ 最後可以看看我們實體壓縮的Style.css檔案,檔案大小從69.0KB壓縮成49.0KB,真的是差很多阿。

CSS、JS Compressor

 

JavaScript Compressor語法壓縮教學

▼ 首先先進入「JavaScript Compressor」線上壓縮器網址,一樣的就是把自己網站內的JavaScript語法或其它想要壓縮的JS語法,複製並且貼上在JavaScript Compressor網頁上的JavaScript Source Code Input中。

CSS、JS Compressor

 

▼ 將要壓縮的語法貼上後,再按下右下角的「Compress」紐,就會開始進行壓縮。

CSS、JS Compressor

 

▼ 不用幾秒的時間就可以產生出已經壓縮好的JavaScript語法,原本INPUT的語法130270字節壓縮減少變成了116333字節,足足節省了11.98%耶。

CSS、JS Compressor

 

▼ 在Show advanced options的選項內也有更多進階的選項可以勾選,如果有興趣的朋友們也可以自行摸索看看。

CSS、JS Compressor

 

▼ 最後可以看看我們實體壓縮的asalah.js檔案,檔案大小從126KB壓縮成113KB,真的是差很多阿。

CSS、JS Compressor

 

值得收藏使用的原因

  • 可以加快網站內的CSS、JS加載速度
  • 提升優化網站載入檔案流量
  • 網頁設計人員必收藏的利器

您也許會喜歡:

立達合法徵信社-讓您安心的選擇

網站搜尋

No Result
View All Result

廣告


歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技

No Result
View All Result
  • 最新科技新聞
  • 最新科技產品報導
    • 3C產品開箱/廠商邀測
      • GPS/行車記錄器評測
    • 科技廠商專訪報導
      • 專題報導
    • 電腦硬體周邊情報
    • Android周邊
    • iOS周邊
  • 好用App介紹
    • Android App分享介紹
      • Android 基礎教學
    • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB教學
      • iOS軟體與JB相關文章
      • iOS JB/CYDIA應用
    • 跨平台App
  • 通訊達人
  • Telegram
  • 電腦應用與其他教學
    • Mac OS 軟體分享與教學
    • 網路與軟體應用
    • WordPress 架站教學分享
    • 多媒體轉檔/運用
    • 語文學習
    • 轉貼好文
    • 其他文章
  • 旅遊與美食
    • 生活與旅遊
    • 圖文創作
    • 有趣影片
    • 動漫、玩具、敗家
    • 老弟紙模型作品集
    • KUSO
    • 阿達玩App
    • Pokemon Go攻略
  • 超好用懶人包
  • 電腦王阿達網路測速
  • 電腦王阿達團隊

歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技

No Result
View All Result
  • 最新科技新聞
  • 最新科技產品報導
    • 3C產品開箱/廠商邀測
      • GPS/行車記錄器評測
    • 科技廠商專訪報導
      • 專題報導
    • 電腦硬體周邊情報
    • Android周邊
    • iOS周邊
  • 好用App介紹
    • Android App分享介紹
      • Android 基礎教學
    • iPhone/iPad 軟體介紹
      • iPhone/iPad 使用教學
      • iOS JB教學
      • iOS軟體與JB相關文章
      • iOS JB/CYDIA應用
    • 跨平台App
  • 通訊達人
  • Telegram
  • 電腦應用與其他教學
    • Mac OS 軟體分享與教學
    • 網路與軟體應用
    • WordPress 架站教學分享
    • 多媒體轉檔/運用
    • 語文學習
    • 轉貼好文
    • 其他文章
  • 旅遊與美食
    • 生活與旅遊
    • 圖文創作
    • 有趣影片
    • 動漫、玩具、敗家
    • 老弟紙模型作品集
    • KUSO
    • 阿達玩App
    • Pokemon Go攻略
  • 超好用懶人包
  • 電腦王阿達網路測速
  • 電腦王阿達團隊

歡迎手機廠商、iPhone 周邊產品業者、APP軟體開發商洽談合作或產品測試事宜 koc koc.com.tw |隱私政策 |主機維護:Fast Line 台灣速連,阿腸數位科技