如何減少網頁的記憶體與CPU佔用

來源:互聯網
上載者:User

有的網頁看起來並不大但開啟會很卡,有的網頁雖然很長但使用流暢,佔用使用者電腦的記憶體與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來玩就行。

行為上

  • 別為了使用一個$()引入整個pretotype或jQuery,它們有更多的作用。
  • AJAX很帥。但是用xml會用上XML解析器,有人推薦用JSON,可是這樣要eval資料,其實可以直接import已經是對象的script來用。只是要多傳個對象名,或者把對象名寫死,或者像flickr那樣jsonFlickrApi({"xxx":"xxx"}),直接當函數用,挖哈哈。
  • 實現某些效果時能用visibility:hidden解決時就別用display:none來玩。
  • 在這裡強調js變數要注全域跟局部等等的意義並不大,JS複雜的地方也不是一兩句能說得清的,關注大家關注月影的正在出版的新書吧。^^

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

再其實,這篇已經蹲在草稿箱裡好久了,一直沒有時間去整理。現在給的也不是完整的,因為沒有完整,慢慢補充吧。

------------------------------------------------------------------------

  1. 產生問題:雖然會引起 瀏覽器的模式問題 ,但問題是可以解決滴。參考Serving up XHTML with the correct MIME type ,派送XML頭瀏覽器不會容錯顯示,出現錯誤結構會導致整個頁面無法顯法。
  2. Autolow: 優先考慮速度,但是也會儘可能改善外觀。 回放開始時,消除鋸齒功能處於關閉狀態。 如果 Flash Player 檢測到處理器可以處理消除鋸齒功能,就會開啟該功能。
    Autohigh:開始時回放速度和外觀兩者並重,必要時會犧牲外觀來保證回放速度。 回放開始時,消除鋸齒功能處於開啟狀態。如果實際幀頻降到指定幀頻之下,就會關閉消除鋸齒功能以提高回放速度。使用此設定可類比“消除鋸齒”命令(“視圖”>“預覽模式”>“消除鋸齒”)。
  3. 模糊濾鏡:使用模糊濾鏡時,如果用於 blurX 和 blurY 的值是 2 的整數次冪(例如 2、4、8、16 和 32),則可以加快計算速度,並且可以使效能提高 20% 到 30%(flash的協助是介樣說滴)。


相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。