【讀書筆記】iOS-優化iOS Web應用

一,代碼優化:瀏覽器

代碼優化是任何優化技術的第一步,由於歸根結底網頁上的一切都是構建在代碼之上的。優秀的代碼能夠節省寬帶,減小渲染延遲,以及提升頁面的可讀性和長遠的可維護性。下面列出了一些在Web應用中編寫任何代碼時都應該記住的最佳實踐。緩存

1,使用遵循Web標準的代碼。服務器

2,精簡代碼。框架

3,減小HTTP請求數。post

1)單個資源文件必須少於15KB(在未縮的狀況上)。測試

針對iPhone設計的頁面須要將各個資源文件的大小限制在15KB之內,以獲得最優的緩存行爲。iPhone最多能夠緩存105個15KB如下的資源文件。在達到緩存數量上限之後,新緩存的文件會覆蓋緩存中的舊的文件。優化

2)全局緩存資源必須少於1.5KB.spa

儘管iPhone可以緩存不少資源文件,但加起來最多隻能緩存大概1.5MB.緩存可用字節數的上限大約爲105*15=1575KB.設計

3)設備關機會後清空HTTP緩存。blog

若是用戶須要強制重啓設備,緩存中的資源就會丟失。這是因爲在iPhone上,Safari從系統內存中分配空間來建立緩存文件,但並無把緩存組件寫入持久性的存儲設備中。

4)關閉標籤頁也會清空HTTP緩存。

關閉掉全部標籤,只留下空白標籤後再關掉Safari也會清空緩存。

從開發的視角來看,這種類型的緩存是不可靠的。由於它清空的頻率過高,也難以緩存一個現代網頁的大部分資源。即使是壓縮到極致的JavaScript框架或CSS文件都很難將大小控制在15k之內,更不用說幾乎全部的Web應用用到的圖片都會超過這個大小。萬幸的是咱們還有更好的選擇來實現目標,即HTML5提供的離線功能。

4,合併CSS和JavaScript文件。

5,減小DOM操做。

二,圖片優化。

1,優化色彩深度。

2,使用CSS精靈圖。

3,千萬不要縮放圖片。

始終根據設備視口或是設計元素的寬高來以合適的尺寸使用圖片。別期望Safari能自動把一個圖片縮放到合適的大小。惟一能夠例外的是,當咱們在指定設備的Web應用中插入圖片時,能夠經過設置值爲100%的寬度來同時自適應於橫屏或是豎屏視圖。

這一法則一樣也能夠縮短網頁的加載時間及頁面中每次運行JavaScript時給用戶體驗形成的延時,遵照這一法則很是重要,同時也別忘了給圖片設定寬度和高度,這樣也助於減小渲染所用的時間。這一法則一樣縮短了網頁的加載時間以及頁面中每次運行JavaScript時給用戶體驗形成的延時。

三,應用壓縮。

Safari支持GZIP壓縮,因此將Web應用的一些資源進行壓縮會是個不錯的想法,這樣能夠提高用戶體驗的層次。咱們能夠決定何時 壓縮HTML5頁面,CSS3樣式表或是JavaScript代碼,然而卻並無必要去壓縮圖片或者是PDF文檔,由於這些類型的資源是已經壓縮過的。對圖片或者PDF文檔進行壓縮是白白浪費CPU資源,甚至有可能反而增大文件體積。

對於服務器來講,爲了使用Web應用能使用GIP壓縮過的資源,服務器必須配置爲在請求時自動提供壓縮過的資源。另一方面,客戶端必須支持這種壓縮類型的文件。

GIP壓縮並不骨文件格式的限制,所以這是給網頁大幅」瘦身「的最簡易的方式。GZIP壓縮能夠將文件減小大概70%。

雖然好處很明顯,但世界上沒有十全十美,通常而言GZIP壓縮也有一些不足以外。

1,咱們須要個個支持GZIP壓縮的瀏覽器。固然,針對咱們的狀況這並非一個問題,由於Safari和其餘基於WebKit的瀏覽器都支持GZip.

2,  咱們沒法壓縮力片和PDF文檔,由於它們自己就是一種壓縮格式。

3,因爲Safari須要實時地解壓縮資源,某些狀況下這一過程會增長CUP時鐘週期和開銷,以至抵消了可能帶來的好處。因此,最好先測試一下,以確保不會被這些額外開銷形成弊大於利的狀況。

四,可用性優化。

1,可用性檢查。

2,可用性測試。

 

 

參考資料:《iOS Web應用開發》

相關文章
相關標籤/搜索