速度大比拚:IE9狂電三大瀏覽器




幾周前微軟討論了Flickr資源管理器示範,對比了IE9平台預覽第二版、ChromeSafari以及Firefox在圖片渲染方面的性能。
 不久前 IE9更新了平台預覽第三版,微軟也在今天提供了又一輪測試對比,並引入了Amazon Shelf概念應用。
 Amazon ShelfFlickr資源管理器一樣是使用HTMLCSSJavaScript標準編寫的,並且包括一個非常關鍵的HTML5新功能canvas元素,canvas是一種非常強大的功能,能呼叫Javascript API直接繪製圖形。
 

IE9中的canvas是預設開啟硬體加速的,當IE9使用者瀏覽一個使用了canvas的網站時,IE會自動呼叫PC的所有資源來提供最佳性能,這是目前的瀏覽器無法實現的。使用IE9時,Amazon Shelf可以實現每秒60格的回應速度,堪稱實時回應,而普通的瀏覽器僅能達到18 fps

下面來看一下各大瀏覽器的對比,微軟解釋說此次對比中之所以沒有增加IE8,是因為它並不支援canvas元素。

首先,來看一下Chrome 5的表現。Chrome不使用任何GPU資源,每0.99秒更新一次頁面,在書架載入動畫時格速約為1fps,這一成績十分低。



其次來看蘋果Safari 5。在動畫載入時,Safari沒有任何渲染動作,成績為0,同樣也僅佔用CPU資源。



Mozilla昨天發佈了Firefox 4 Beta 1,不過微軟在此次測試中使用的是Beta 2的預覽版本,在預設設定下FirefoxGPU硬體渲染並未開啟。Firefox0.25秒更新一下頁面,格速為8fps


最後來看IE9平台預覽第三版,從下圖可以看到,IE9呼叫了GPU硬體實現了渲染加速,CPU呈週期性處理數據,能抽出更多時間來處理其它應用程序,因此提供了穩定、流暢的頁面渲染,格速高達60fps


網頁載入速度測試——誰才是最快的瀏覽器

很長時間以來,人們關於瀏覽器的話題總是在討論哪個瀏覽器跑分更快,是chrome還是 opera,對於純粹的跑分,我並不是很在意.
我更關注的則是網頁實際加載時間,相信也有不少人是這樣想的吧。本篇主要是我搜集的第三方評測(選自tomshardwarelifehack等處).

一、多標籤載入測試
記錄打開9個指定標籤的總的時間,具體瀏覽器的版本號圖中都有,需要注意的這是指定標籤的load time載入時間測試,而非另外的startup time測試(打開幾個空白標籤的啟動計時,這個意義不大),不要混淆。



基本上,我們可以認為chrome是打開多標籤最快的瀏覽器(某些頁面ie佔有優勢,我不理解為什麼第一個和第三個測試中沒有ie)。多次測試
中,opera都是載入最慢的瀏覽器,10.50版本以上已經比自家的10.10快很多了,不過依然是最慢。
之前版本的chrome測試並不穩定,最新版本的stabledev較為穩定。
firefox則是每次都有改善,進步比較明顯。
關於ieie的啟動很快,某些(僅僅是某些)網站加載也比其他瀏覽器更快,這2個都是微軟自家的優勢。

二、單個網站的載入測試
tomshardware
評測的,圖中沒有瀏覽器的版本號,在此補充一下:
Apple Safari    4.04
Google Chrome    4.0.249.78
Microsoft Internet Explorer    8
Mozilla FireFox    3.6
Opera    10.50
tomshardware
對瀏覽器的評測似乎也不是很感興趣,沒有最新版本號的測試,可能認為瀏覽器的更新對於單個網頁頁面載入沒意義,已經到了極限了,
新版本未必會帶來實質性的改變

1
craigslist

Chrome takes the lead with the simple craigslist home page, followed closely by Firefox and Safari. Internet Explorer takes fourth, while Opera comes in dead last.

2
facebook

This is one of the only tests where Internet Explorer outperforms all the other browsers. For whatever reason, Microsoft's browser loads the Facebook homepage with extreme haste. Firefox, Chrome, and Opera take second, third, and fourth (respectively). Safari takes almost twice as long as the second-place finisher Firefox, and more than four times as long as IE.

3
tomshardware

Firefox renders Tom's Hardware first, closely followed by Chrome, then Safari and Opera. Internet Explorer loads our page the slowest.

4
yahoo

Along with Facebook, the Yahoo! home page is the only other test in which Internet Explorer beats its competition. This time, it's trailed by Chrome, then Safari and Opera. Firefox is last to cross the finish line.

tomshardware
的結論是firefox是載入最快的瀏覽器,而operasafari是最糟糕的
I suppose the overall winner here would be Firefox. While it loads the Yahoo! homepage last, Mozilla comes in first once, and second three times. Internet Explorer also gives a good showing in these tests. IE places first in two out of five tests. Both Opera and Safari do poorly compared to the others.

可能是網頁架構的不同,幾大瀏覽器載入各有快慢,總的來說,還是和前一個測試吻合的

結合上述2個評測,總的的結論是ie由於某些頁面的「優化」,有時也能最快加載;但更通常而言firefoxchrome是頁面加載最
快的瀏覽器。firefox勝在單頁加載,chrome
強在多頁加載(是否和chrome的多進程有關呢?隨便瞎猜)
便感歎一句:國外的網速真好,快得只要0.1秒即可加載完。

為什麼有人覺得opera加載很快呢?其實opera會先渲染一部分,讓人視覺上感到較快,但實際全部載入完未必就快;chrome也有自己的dns加速
(在國內這個可能用處不大)等;ie得益於微軟,使得少部分頁面載入很快。

opera
和(windows平台的)safari加載慢也不是一天兩天的事了,早期版本到現在一直如此,附上早期版本的5組評測
1





2


3


4


5




正如tomshardware較新的評測結果一樣,即便是早期版本,也是operasafari的表現最差;最快的也非chromefirefox
可見瀏覽器內核的更新,並沒有對頁面載入更優化,這方面的優化可能真的是到極限了。和前2次評測的結果一致,印證了前文中粗體部分的結論。


基本上打開一個標籤,最快和最慢也就在一秒內,即便打開9個標籤,差距也不會超過67秒,對於有耐心的人問題不大,何況局域網本身速度也不快,就算是用
最慢的opera,只要不開啟turbo,普通網頁瀏覽還是可以接受的,如果加載時卡住多按幾下回車或轉到也能解決。大家有興趣的可以自己測試,測試前清
空緩存,最好以隱私瀏覽模式進行測試。


更新:最新版本的部分加載時間測試(雖然最新版本opera跑分很快,但是頁面載入仍然最慢;而chrome則進步明顯,單頁載入也超越
firefox

Chrome    5.0.375.99
Firefox    3.6.6
Internet Explorer    8.0.7600.16385
Opera    10.60
Safari    5 (7533.16)



那些相見恨晚的JavaScript 技巧


JavaScript 的成功讓人津津樂道,為Web 網頁編寫JavaScript 代碼已經是所有Web 設計師的基本功,這門有趣的語言蘊藏著許多不為人熟知的東西,即使多年的JavaScript 程序員,也未能完全吃透。 本文從7個方面講述JavaScript 中那些你不很熟知但非常實用的技巧。

簡略語句

JavaScript 可以使用簡略語句快速創建對象和數組,比如下面的代碼:



可以使用簡略語句如下:



對象car 就此創建,不過需要特別注意,結束花括號前一定不要加";" 否則在IE 會遇到很大麻煩。

創建數組的傳統方法是:





使用簡略語句則:





另一個可以使用簡略語句的地方是條件判斷語句:



可以簡略為:



JSON 數據格式

JSON "JavaScript Object Notation"的縮寫,由Douglas Crockford設計,JSON改變了JavaScript在緩存複雜數據格式方面的困境,如下例,假如你要描述一個樂隊,可以這樣寫:



你可以在JavaScript中直接使用JSON,甚至作為某些API的返回數據對象,以下代碼調用著名書籤網站 delicious.com 的一個API,返回你在該網站的所有書籤,並顯示在你自己的網站:



JavaScript 本地函數(Math, Array String)

JavaScript 有很多內置函數,有效的使用,可以避免很多不必要的代碼,比如,從一個數組中找出最大值,傳統的方法是:



使用內置函數可以更容易實現:



另一個方法是使用Math.max() 方法:



你可以用這個方法幫助探測瀏覽器



這解決了IE 瀏覽器的一個問題,通過這種方法,你總是可以找到那個正確的值,因為瀏覽器不支持的那個值會返回undefined

還可以使用JavaScript 內置的split() join() 函數處理HTML 對象的CSS 類名,如果HTML 對象的類名是空格隔開的多個名字,你在為它追加或刪除一個CSS 類名的時候需要特別注意,如果該對像還沒有類名屬性,可以直接將新的類名賦予它,如果已經存在類名,新增的類名前必須有一個空格,用傳統的JavaScript 方法是這樣實現的:



使用split join 方法則直觀優雅得多:



事件代理

與其在HTML 文檔中設計一堆事件,不如直接設計一個事件代理,舉例說明,假如你有一些鏈接,用戶點擊後不想打開鏈接,而是執行某個事件,HTML 代碼如下:



傳統的事件處理是遍歷各個鏈接,加上各自的事件處理:



使用事件代理,可以直接處理,無需遍歷:



匿名函數與Module 模式

JavaScript的一個問題是,任何變量,函數或是對象,除非是在某個函數內部定義,否則,就是全局的,意味著同一網頁的別的代碼可以訪問並改寫這個變量(ECMAJavaScript 5已經改變了這一狀況 -譯者),使用匿名函數,你可以繞過這一問題。


比如,你有這樣一段代碼,很顯然,變量name, age, status 將成為全局變量



為了避免這一問題,你可以使用匿名函數:



如果這個函數不會被調用,可以更直接為:



如果要訪問其中的對像或函數,可以:




這就是所謂Module模式或單例模式(Singleton),該模式為Douglas Crockford所推崇,並被大量應用在 Yahoo User Interface Library YUI



假如你想在別的地方調用裡面的方法,又不想在調用前使用myApplication  這個對象名,可以在匿名函數中返回這些方法,甚至用簡稱返回:



代碼配置

別人使用你編寫的JavaScript代碼的時候,難免會更改某些代碼,但這會很困難,因為不是每個人都很容易讀懂別人的代碼,與其這樣,不如創建一個代碼配置對象,別人只需要在這個對像中更改某些配置即可實現代碼的更改。 這裡有一篇 JavaScript配置對象詳解的文章,簡單說:

  • 在代碼中創建一個叫做configuration 的對象
  • 裡面保存所有可以更改的配置,如CSS ID 和類名,按鈕的標籤文字,描述性文字,本地化語言設置
  • 將該對象設置為全局對象,以便別人直接訪問並改寫
你應當在最後一步做這項工作,這裡有一個文章,交付代碼前的5件事值的參考。

同後台交互

JavaScript 是一門前台語言,你需要別的語言同後台交互,並返回數據,使用AJAX,你可以讓JavaScript 直接使用同後台的交互,將復雜的數據處理交由後台處理。

JavaScript 框架

自己編寫適應各種瀏覽器的代碼是完全浪費時間,應當選擇一個JavaScript 框架,讓這些複雜的事情交給框架處理。

更多資源


 

Web 設計師的50 個超便利工具(下)


Web 設計師的50 個超便利工具(下)



作為一個Web 設計師並不容易,不僅考慮設計與架構,還要時刻注意各種小細節,設計師的工作被各種各樣的問題包圍,你需要一套超級便利的工具幫你解決各種消耗時間和精力的問題。 本文介紹了50個非常強大的工具,你會發現,其中的一些工具會讓你感到驚艷,這是第二部分。



Kaleido




為你的代碼創建視覺化標識。 來自麻省理工。


  

Sketchpad


一個強大的在線圖像編輯器。 難能可貴的是,這是基於HTML5 的。





Unicode code converter



雖然界面有些亂,但這個工具能把一段文字轉換成各種編碼形式。





Grid System Generator



另一個網格設計生成器。





ud.com namecheck


 (強烈推薦)

這個看似簡單的工具,可以幫你查詢某個名字是否還可以註冊域名,商標,已經社會媒體網絡入口。





Typograph — Scale & Rhythm



這個工具可以幫你即時預覽各種不同的Web 排版效果,並生成代碼。





ColorBrewer Intro – Selecting Good Color Schemes for Maps



適用於地圖的配色工具。





CSS Inliner Tool


 (推薦)

將獨立的CSS 定義轉換為Inline CSS 假如你使用電子郵件進行營銷,會發現這種工具非常實用,因為郵件客戶端常常會將你獨立的CSS 代碼過濾掉,而Inline CSS 不會被過濾。





HTML Purifier – Filter your HTML the standards-compliant way!



這個使用PHP 設計的工具,可以對你的HTML 代碼進行過濾,去除其中的惡意代碼,並按W3C 標準對代碼進行淨化。





Rendera



在線編寫HTML5 CSS 代碼,現場看到效果。





RegExr



又一個在線學習,體驗,測試正則表單式的地方。





try ruby! (in your browser)



Ruby 在線體驗。





Google Command Line



使用命令符訪問Google 的一些產品和服務。





Tiny Fluid Grid



又一個網格設計工具,很小巧。





Fonolo.com



這個很別緻的站點,可以幫你快速接通那些大公司的免費技術電話,不過目前只能用於美國和加拿大。





Producteev: Creating To-Do Lists with Emails


 (推薦)

把重要的工作安排發到task@producteev.com,他們會幫你生成一個任務列表,以便安排你的日程。





AddUse – User research made easy



一個在線用戶測試或調查管理工具。





bookwhen


 (推薦)

幫助你的用戶在線預訂你的展會,課程等服務,免費版支持150個項目以及每月300個預訂。



本文國際來源:Smashing Magazine 50 Powerful Time-Savers For Web Designers (原文作者:Vitaly Friedman


中文翻譯來源:銳商企業CMS 網站內容管理系統 官方網站