HTML5 是近十年來 Web 標準最巨大的飛躍。隨著HTML5功能的逐漸豐富, 它任重而道遠,致力於將Web帶入一個更為成熟的應用平台。在所有超級特性中,最讓小編喜歡的是HTML5推出的 “Web Storage”(Web 儲存)API,它彌補了cookie容量小存在的缺陷,讓網路開發人員們如獲至寶。
或許對於很多普通使用者來說,這些專業詞彙根本不瞭解也無需瞭解,使用者只需知道就是哪一款瀏覽器反應快速,簡單好用,僅此而已!基於這樣的思路,小編收集了五大熱門的國際知名瀏覽器最新版:Chrome、Firefox、IE9、傲遊Maxthon)、Opera,針對Web Storage效能速度進行了測試,與之一較高下。同時,也希望通過此次橫向對比,能夠給大家提供有用的參考意見。
圖1】
在HTML5中,本機存放區是一個Window的屬性。Web Storage實際上由兩部分組成:sessionStorage與localStorage。 sessionStorage用於本機存放區一個會話session)中的資料,這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionStorage不是一種持久化的本機存放區,僅僅是會話層級的儲存。 localStorage用於持久化的本機存放區,除非主動刪除資料,否則資料是永遠不會到期的。
整個測試過程主要分為兩大部分,一是localStorage寫、讀入速度;二是sessionStorage寫、讀入速度。
測試專案一:localStorage寫、讀入速度
localStorage寫入10000次耗時單位:ms)
圖2】
localStorage 屬於 Web Storage 標準,是HTML5的一部分,又稱為DOM Storage。它永久儲存在本地(client)。從此次localStorage寫入速度測試上看,Maxthon名列前茅,Opera、IE9不相上下,Firefox緊跟其下,Chrome顯得略微遜色。
localStorage讀入10000次耗時單位:ms)
圖3】
localStorage的特點在於容量大、易用、強大、原生支援的優勢,資料不會到期,除非由於security 原因或者使用者請求,才會刪除其資料。根據資料顯示,在localStorage讀入速度上,Maxthon仍舊遙遙領先,IE9的表現也令人刮目相看,而Firefox和Opera處於中間位置,Chrome的表現仍是不理想。
測試專案二:sessionStorage寫、讀入速度
sessionStorage寫入10000次耗時單位:ms)
圖4】
sessionStorage跟localStorage類似,但sessionStorage 只與當前會話相關,瀏覽器關閉則刪除。其特別之處在於,top powser context及在同一個頁面內的所有frame/iframe 共用同一個sessionStorage,不同的page 有不同的sessionStorage。在這次的效能速度測試中,Maxthon的寫入速度最快,IE9表現不俗,Firefox在其後緊追慢趕,而Opera、Chrome仍需努力。
sessionStorage讀入10000次耗時單位:ms)
圖5】
sessionStorage用於本機存放區一個會話session)中的資料,這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionStorage不是一種持久化的本機存放區,僅僅是會話層級的儲存。從圖5測試結果可以看出, Maxthon表現出色得到了壓倒性的勝利,而IE9略微遜色於前者,Firefox有發展空間,Opera讀入速度略有滯後,Chrome需進一步提升。
綜合上述一系列直觀測試結果,我們可以看出,Maxthon相比IE9在Web Storage速度上優勢極為明顯,且引領的HTML5強大效能支援特徵也成為超越IE的另一大武器。Firefox、Opera上升空間依舊很大,而Chrome的表現平平。由此預見,在不久的將來,HTML5所擁有的各種高效率、高效能特性必定會是互連網應用的將大勢所趨,而像Maxthon等採用Webkit與IE雙核的瀏覽器已脫穎而出,他們在HTML5上的效能支援是瀏覽器內在品質的表現,將為HTML5應用到更廣闊的Web領域。