模板建站動態

識別，且相同情況下其文件會更小。　　在此，推薦的工具有SVG edit，它可以將普通格式的文件轉換為矢量圖。　　4：巧用css3代替圖片效果。　　七、如何優化網站首頁代碼：css3　　基於css3的進化，其已經可以生成陰影，圓角邊框，按鈕，背景等效果，幾乎可以取代傳統的切片技術。在這樣的前提條件下，完全可以通過css代碼代替某些圖片效果，其優點顯而易見，代碼比圖片要小得多，也會提升網站首頁打開速度。　　另外一方面，如果使用大量圖片佈局網站，在不同的瀏覽器下，就會形成某些視覺問題，但css3技術就不存在這些問題，它們可以完美的支持各瀏覽器的兼容問題，而又不至於犧牲網站前端效果。　　再次，seo教程自學網提醒：使用css3制作陰影等效果，其難度不小，需要更專業的前端技術人員才能實現。　　5：javascript簡稱js代碼優化。　　八、如何優化網站首頁代碼：js代碼優化　　眾所周知，javascript特效的使用是阻礙網站打開速度的一個重要因素，對於這個點，需要著重把握和註意。前面講瞭css3可以取代很多圖片效果，其還有別的功能，如可以取代部分js特效效果，效果強大。　　使用css3，取代部分js特效，有一些優勢：　　很多情況下css3代碼的特效可以直接取代js代碼。　　css3代碼體諒更小，也更容易編寫。　　6：用圖標字體(icon fonts)代替首頁圖片。　　如何優化網站首頁代碼：圖標字體(icon fonts)　　利用字體工具把我們平時 Web 上用的圖形圖標(icons)轉換成 web fonts，就成瞭 icon fonts，它可以借助 CSS 的 @font-face 嵌入到網頁裡，用以顯示 icons。因為字體是矢量化圖形，它天生具有「分辨率無關」的特性，在任何分辨率和PPI下面，都可以做到完美縮放，不會像傳統位圖，如：png，jpeg，放大後有鋸齒或模糊現象。　　由於圖標字體的靈活性和易用性使得圖標字體使用越來越廣泛瞭，我們經常可以看到不同的UI框架都整合瞭各種的圖標字體。　　除瞭「分辨率無關」這個最大的優點之外，icon fonts 還具有：　　文件小：相比圖片幾十幾百KB的容量，icon fonts 幾乎是羽翼級輕量。　　加載性能好：因為圖標都被打包進一套字體內，http request 減少。這如同我們常用的 css sprites 技術。　　支持CSS樣式：和普通字體一樣，你可以利用CSS來定義大小、顏色、陰影、hover狀態、透明度、漸變等等…　　兼容性好：web fonts 起源很早，別說主流瀏覽器，連IE6/7都能良好支持。除瞭一些老的移動端瀏覽器，如Android 2.1以下的初代瀏覽器，Opera mini 這類自限型瀏覽器。　　當然 icon fonts 也有它的不足：　　樣式單一，無法針對不同分辨率來調整icon 的細節，比如降低大尺寸icon 的線條粗細。　　顏色單一，CSS 無法方便的去定義彩色的 icon，倒是有通過疊加組合的方式來達到彩色圖標的目的。　　移動端瀏覽器兼容性還不夠完善，像Opera mini、Windows phone 7.0-7.8 都不能正常顯示icon fonts。　　有少量的移動設備有可能會和 icon fonts 的字符編碼沖突，導致icon 顯示不正常。　　所以 icon fonts 也並不是一套完美的響應式圖片的解決方案，當它適宜你的應用場景時，比如：　　你的網站是扁平化或簡約風格，圖標樣式單一，顏色為純色。　　你的目標用戶使用桌面瀏覽器為主，或者，　　你願意為非兼容設備做兼容hack。　　icon fonts 是一個令設計師和前端工程師都心花怒放的方案。　　icon fonts 的制作主要有兩條思路：　　利用字體工具手動制作　　利用在線工具自動生成　　7. sprite技術優化首頁圖片體積。　　Sprite”(精靈)這個詞在計算機圖形學中有它獨特的定義，由於遊戲、視頻等畫質越來越高，必須有一種技術可以智能的處理材質和貼圖，並且要同時保持畫面流暢。“Sprite”就是這樣一種技術，它將許多圖片組合到一個網格上，然後通過程序將每個網格的內容定位到畫面上。　　Sprite被定位到一副靜態圖片上，並且通過簡單的程序或硬件即可正確定位到畫面上，一幅幅圖片就像是被“變”出來的，他們並沒有單獨占用內存，所以被取名為“Sprite精靈”。　　時間進行到2000年，Web設計向著精致、巧妙的方向發展。設計師們開始考慮使用非Javascript的方 式制作鼠標滑過、懸停菜單的效果，這時CSS Sprite應運而生，它基於同上文提到的遊戲Sprite同樣的原理，並且使用CSS更容易控制，很快的流行開來。　　當頁面加載時，不是加載每個單獨圖片，而是一次加載整個組合圖片。這是一個瞭不起的改進，它大大減少瞭HTTP請求的次數，減輕服務器壓力，同時縮短瞭懸停加載圖片所需要的時間延遲，使效果更流暢，不會停頓。　　CSS Sprites可以用在很多場合，大型網站可以將許多單獨的圖片，以有機的方式組合起來，從而使其便於維護和更新。圖片之間通常會留出較大的空白，使 得圖片不會影響網頁的內容。但同時CSS Sprite大多使用於較固定的像素定位中，它的彈性較差，收到定位等因素的制約。所以，你需要在可維護性vs降低負載之間權衡利弊，選擇最適合你的項目 的方式。　　在網站圖片的解決方案中，CSS3應該是首選，其次是SVG和icon font,最後才是Bitmap。經常使用的Bitmap文件應該打包放在一個單獨的sprite中，這樣一來圖片就可以在CSS中訪問到瞭，像這樣：　　.sprite {　　width: 16px;　　height: 16px;　　background: url(“sprite.png”) 0 0 no-repeat;　　}　　.sprite.help { background-position: 0 -16px; }　　.sprite.info { background-position: 0 -32px; }　　.sprite.user { background-position: 0 -48px; }　　換句話說我們把圖像檔案的內容內置在 HTML 檔案中，節省瞭一個 HTTP 請求。　　data uri的主要優點是減少瞭http請求數，調用起來比css sprite更加靈活，缺點是增加瞭客戶端的資源消耗。　　在所有瀏覽器的非緩存的模式下， CSS sprite 方式比 data URI 方式快瞭數百微秒。但事實上 CSS Sprite 比 Data URI 方式多發送瞭一次連接請求，包括 TCP 慢啟動招致所有相關的連接開銷。　　緩存條件下 Android 4.2 和 iOS 6 的 CSS sprite 模式都有大概 2 倍的速度提升，隻是 iOS 條件下減少瞭 220ms 而 Android 減少瞭 70ms (原生瀏覽器)。相對來說，Chrome 和 Firefox 的情況平衡得好點，緩存和非緩存情況下隻有 50% 到 60ms 左右的性能差異。　　在這裡我建議將 data URIs 用於非常小的資源，並且不能在 CSS 和 內聯 HTML 中多次使用它們。　　在利用相關技術對網站首頁代碼，圖片，組件進行瘦身處理後，就需要使用相關檢測工具對網站速度進行測試。　

培戀網絡原創版權，轉載請註明出處：

培戀網原創版權，網站建設提供網站代運營、模板網站制作轉載請注明出處,本文地址：http://www.gdszrq.com/news/49656.html