標籤: 效能優化

Dev軟硬體技術

font-face優化的二三事

Web Font的font-face在舊有存在的FOIT(Flash of Invisible Text)問題,會在字型檔讀取完畢前,畫面呈現一片空白的狀況,甚至有些老舊瀏覽器及未更新webview in app的手機端,空白後就直接停掉了,畫面上永遠不會有字的狀況。
Dev軟硬體技術

CSS預載圖技巧

運用CSS generated contnet 在 body 之後產生一些不會顯示的內容, 利用這個功能載入所需的圖檔 不用任何javascripts或外掛的巧秒技巧 body:after { content: url(img01.jpg) url(img02.jpg)
Dev軟硬體技術

RIOT將PNG/GIF/JPG圖檔瘦身壓縮的好用軟體(有綠色免安裝隨身版)

平時都使用Photoshop來進行相關圖片的處理 通常都直接輸入網頁用的圖片檔, 因為可以自訂壓縮率來控制檔案大小, 但原來壓縮的演算法其實也需要最佳化, 通過不同演算法壓縮的圖檔,品質相同,但檔案可以更小... 最近很常使用PNG在處理透明圖檔, 為了呈現好效果,結果就是檔案都好肥...
Dev軟硬體技術

CSS Sprites線上產生器,SEO網頁最佳化減少讀取次數及加快載入

初期在學做網頁時, 我一直都偏愛像Google一樣的簡樸風, 用色塊及線條取代圖片的使用,運用CSS還可以加一點圓角效果, 最大的好處,當然就是網頁可以縮很小... 但是網頁的快速發展,icon的應用變多了, 不只在工作上或自己在設計網頁時, 很時常的在大量使用精美的icon來美化選單按鈕,