1. 如何壓縮網站里的css 和js文件 來減少空間的使用率,是網站打開速度加快
你好,個人建議從幾個方面入手:
1、在伺服器上啟用GZIP壓縮,添加css等靜態文件等。
2、把主頁、內容頁的CSS分開寫,公共部分單獨用一個CSS,這樣就可以減少CSS的大小。
3、優化CSS語法,並可以使用工具壓縮,但要注意用多個瀏覽器測試。
4、將一些JS調用盡量放到網頁底部
2. 優化css樣式表文件的方法是通過什麼工具壓縮
CSS 優化主要是四個方面:
載入性能
這個方面相關的 best practice 太多了,網上隨便找一找就是一堆資料,比如不要用 import 啊,壓縮啊等等,主要是從減少文件體積、減少阻塞載入、提高並發方面入手的,任何 hint 都逃不出這幾個大方向。
選擇器性能
可以參考 GitHub 的這個分享 https://speakerdeck.com/jonrohan/githubs-css-performance,但 selector 的對整體性能的影響可以忽略不計了,selector 的考察更多是規范化和可維護性、健壯性方面,很少有人在實際工作當中會把選擇器性能作為重點關注對象的,但也像 GitHub 這個分享裡面說的一樣——知道總比不知道好。
渲染性能
渲染性能是 CSS 優化最重要的關注對象。頁面渲染 junky 過多?看看是不是大量使用了 text-shadow?是不是開了字體抗鋸齒?CSS 動畫怎麼實現的?合理利用 GPU 加速了嗎?什麼你用了 Flexible Box Model?有沒有測試換個 layout 策略對 render performance 的影響?這個方面搜索一下 CSS render performance 或者 CSS animation performance 也會有一堆一堆的資料可供參考。
可維護性、健壯性
命名合理嗎?結構層次設計是否足夠健壯?對樣式進行抽象復用了嗎?優雅的 CSS 不僅僅會影響後期的維護成本,也會對載入性能等方面產生影響。這方面可以多找一些 OOCSS(不是說就要用 OOCSS,而是說多了解一下)等等不同 CSS Strategy 的信息,取長補短。
3. 能不能推薦一下CSS的壓縮軟體和js的壓縮軟體
YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具,採用java開發。使用方法://壓縮JSjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js//壓縮CSSjava -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css下載地址 http://www.julienlecomte.net/yuicompressor/yuicompressor-2.4.2.zip
4. CSS的CSS壓縮方法
理想的情況是只擁有一個CSS文件(如果你使用RWD以支持IE的老版本,那就需要兩個CSS文件。)構建並維護幾個單獨的CSS文件也算合理,但在部署到產品伺服器之前,你應該將它們集合在一起,並刪掉那些不必要的空白區域。
Saas、LESS和Stylus等預處理器可幫你完成這些痛苦的工作。 Grunt.js、 Gulp等工具可自動化你的工作流。如果你更喜歡GUI,可藉助Koala提供的免費跨平台應用。
如果你覺得這些比較麻煩,也可手動通過命令行工具將CSS文件集中在一起,如在Windows中,可使用如下代碼:
在Mac/Linux中,可使用如下代碼:
最終文件經過在線CSS壓縮工具(如 cssminifier.com、 CSS Compressor & Minifieror等)壓縮後即可運行。
最後,請記住在頭部(Head)載入所有CSS,以便瀏覽器展示接下來的HTML元素,同時也可避免瀏覽器下次再重繪頁面元素。