當前位置:才華齋>設計>網頁設計>

Web頁面如何優化減小頁面對記憶體及CPU的佔用

網頁設計 閱讀(7.85K)
  Web頁面優化減小頁面對記憶體及CPU的佔用-Web標準教程

有的網頁看起來並不大但開啟會很卡,有的網頁雖然很長但使用流暢,佔用使用者電腦的記憶體與CPU就影響這些。

Web頁面如何優化減小頁面對記憶體及CPU的佔用

瀏覽器問題,有各自的瀏覽器處理記憶體問題會影響到,但幾乎沒辦法控制得了,Windows上的:

· IE系列,重新整理回收的量不大,但最小化會釋放記憶體。

· Firefox2據說也會在最小化回收,可我從沒見過最垃圾,用多少是多少,基本不回收。據說prototype的ajax還會引起記憶體一直增加。

· Opera最好。一直控制得很好。不存在什麼問題。

· Linux的記憶體分配機制與Win的不一樣,有多少用多少,假如瀏覽器佔光時說不定會幹掉系統。

頁面問題,瀏覽器渲染頁面會消耗記憶體和CPU,能減少一點就減少點。

  結構

使用DocType,告訴瀏覽器你在用什麼,html4也有DTD。也許Transitional更適合你

假如使用的是XHTML並能保持良好結構的話,記得輸出相應的MIME跟XML頭1,可以減少瀏覽器的程式碼檢查,

保持結構的完整,不要讓瀏覽器幫你補全程式碼。

控制頁面的檔案大小,可以通過程式把為了看程式碼比較舒適的縮排去掉。2~3K也是大小。

iframe會產生新的頁面,其實有很多方式可以代替iframe

引入的JS與CSS可以適當合併,同樣背景圖片也可以合併,甚至有人連Flash都合併給已知寬高的內容圖片/Object加上寬度的屬性可以減少頁面的`區域性重渲染

  表現

質量99跟70的jpg在大多數情況下只有檔案有大小不一樣。gif的也一樣,非凡是小圖示,256色跟128色的差別是檔案大小.

flash動得太快吃CPU很大,控制每秒的幀數及動畫的效果可以減少一些,假如把品質用中低顯示會省很多資源,但這樣卻犧牲了效果。。quality屬性 有時選擇Autolow2 或者Autohigh會更適合,沒必要一直low 或者best,

flash使用向量圖會節省檔案大小,但計算複雜的圖形跟動畫時花的是CPU。三連素材,複雜的太多濾鏡,則會佔用大量記憶體,模糊濾鏡有減少些3。

IE的濾鏡也是比較佔用記憶體,同時也有相容性問題。全屏的半透明很吃資源的。

2*2的圖片跟8*8的圖片大小差不多,但是平鋪背景2*2卻佔用大很多。

gif動畫同樣有幀的概念,別把gif當成flash來玩就行。

  行為

別為了使用一個$()引入整個prototype或jQuery,它們有更多的作用。

AJAX很帥。但是用xml會用上XML解析器,有人推薦用JSON,可是這樣要eval資料,其實可以直接import已經是物件的script來用。只是要多傳個物件名,或者把物件名寫死,或者像flickr那樣jsonFlickrApi({"xxx":"xxx"}),直接當函式用,挖哈哈。

實現某些效果時能用visibility:hidden解決時就別用display:none來玩。

在這裡強調js變數要注全域性跟區域性等等的意義並不大,JS複雜的地方也不是一兩句能說得清的,關注大家關注月影的正在出版的新書吧。

其實這裡有的內容有不少跟如何快速的呈現我們的網頁相近,不過那篇是以處理服務端為主,但在很多時候,節省服務端資源消耗的同時也會節省客戶端的資源消耗。