顯示具有 瀏覽器 標籤的文章。 顯示所有文章
顯示具有 瀏覽器 標籤的文章。 顯示所有文章

速度大比拚: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


處理不同瀏覽器間的CSS3差異


尖端技術從來都不是沒有代價的。有時這意味著新興標準只能得到有限的瀏覽器支持,而當那些標準的草案改變的時候,也意味著你必須回去把你的代碼重寫 一次。當這些同樣的問題遇上仍在進行中的CSS 3規範的時候,就不僅是瀏覽器支持 非常少的問題了,而是大部分瀏覽器都有實現他們特定的前置。這些前置是非常複雜的事情,如果你需要把這些東西用在你的代碼裡的等方面,你通過需要更多的工 作,而且——他們通常都是有目的的。


打個比方,如果你想用到CSS3中的圓角新特性,你應該使用border-radius 義他們。但是因為這個特性仍然還沒有最終定稿,所以瀏覽器們只支持他們對應的自己實現的版本。所以-moz-border-radius 就對應於Mozilla Firefox, 而-webkit-border-radius 則相對應於Safari和Chrome了。對於Opera呢?也有自己的版本:-o-border-radius。



 








特有的前置都不會驗證,這不太理想。對於CSS驗證器來說,對浮動環繞的效果而使用了特定的前置的時候,則應該提出一個建議而不是一個錯誤。無論如 何,如果你想在你的CSS代碼中使用絕對的標準的話,你都應該遠離這些特定的前置。


不過,如果你想玩玩CSS3這個新玩具的話,你就會了解為什麼這些特定前置有很好的理由存在,而為什麼你在現階段也會使用到這些來體驗到目前的 CSS3規範的。


讓我們繼續停留在這個圓角效果的例子上,設想一下假如你只想應用到一個對象的一個角上會產生什麼情況。 CSS3規範還在繼續變化時,Webkit項目決定使用–webkit-border-top-right-radius時,Mozilla卻使用了 –moz-border-radius-topright。沒有這些前置的話,你將要處理兩條不同的CSS規則,而且其中一條是絕對會被永遠廢棄掉的,但是仍然有可能會有舊版本的瀏覽器會使用到。



從純粹的技術上來說,這兩個前置都是"錯誤的",這是好事。將來,最終的規範一定會發布,而只有一種規則會被標準化,那時候所有的瀏覽器都會實現這 一標準。在這一點上,你可以簡單地在你的代碼中將特定的前置刪除掉就行了。這些特定的前置好處就體現出來了,它使得這些代碼很容易被找到和刪除。


有一件你絕對就應該做的事情就是只針對一個瀏覽器的前置。蘋果的HTML5展示最近被大家關注,只支 持Safari,而不支持其它實現了HTML5的瀏覽器[雖然,你可以不 使用Safari 5查看蘋果的HTML5演示],而同時Google也 發布了HTML5展示站點:HTML5Rocks[HTML5在同為使用Webkit內核的Safari和Chrome上支持不同],這些都證 明了只為一種瀏覽器做優化不是一個好主意,甚至有人認為HTML5是應用程序 設計中的新冒險


如果你必須要使用特定的前置這個非標準化的行為讓你感到不安的話,你還有一個辦法。那就是使用Javascript來自動完成它。


開發人員阿龍.古斯塔夫森寫了一篇"列表的關鍵文章",他在文章裡嘲笑了這些特定的前置並且提供了一段 Javascript的替代方案給和他感覺一樣的人們。


古斯塔夫森把這些特定的前置叫做CSS的分支。雖然我們基本上同意他的觀點,但是這個"分支"這個詞是有問題的,因為分支代碼沒有任何錯誤,事實上 這是開源世界中的規範(你在使用Git或者是Mercurial嗎?)。而且這些特定前置並不是分支,它們是在標準化還沒有完成的時候推動網絡進步的臨時 的解決辦法。


拋開那些術語之後,古斯塔夫森的觀點是有效的——忽略標準和使你的CSS代碼只工作在特定的瀏覽器中的做法兩個都是糟糕的主意。


古斯塔夫森的這個小小的Javascript庫可以幫助你避免將特定的前置寫進你的CSS中。但是令人印象深刻的是,這個腳本確實做到了與將前置寫 進CSS文件中的一樣的效果。這個方法有些缺點——會延長加載時間,而且對於那些禁用了Javascrpt腳本的用戶來說,也是無效的。


如果你現在就開始使用CSS3的特性,你將無法避免使用特定的前置,但是至少,你可以選擇如何處理他們。例如:直接在樣式表中使用這些前置、將這些 特定前置的樣式寫到單獨的分離的文件中或者是使用古斯塔夫森提供的這種類似的腳本來解決它。


供稿:SafariX — Safari中文博客,分享Safari資訊、技巧和擴展。
中文出處:http://safarix.net/dealing-with-browser-differences-in-css-3
英文出處:http://www.webmonkey.com/

微軟一站式示範代碼瀏覽器第一版正式發布


微軟一站式示範代碼瀏覽器v1 今天終於正式發布了! 這是一站式示範代碼庫的一次脫胎換骨的變化。 該瀏覽器可以大大方便了你對微軟一站式示範代碼庫中400多個示範的瀏覽。 雖然在此次發布中我們僅提供了示範搜索功能,更多特性如自動更新、示範反饋等在不久就會陸續推出。



這是一個完全綠色的軟件。 不需要任何安裝。 你可以在最新示範代碼包的根目錄找到該程序。SampleBrowser2008.exe 是用來瀏覽Visual Studio 2008示範的,SampleBrowser2010.exe 則瀏覽Visual Studio 2010示範。 雙擊該應用程序即可打開示範瀏覽器。



主視窗列舉了所有Visual Studio 2008Visual Studio 2010sample 在它的上方,有一個搜索欄。 你可以按照編程語言和關鍵字對示範進行搜索。 瀏覽器會在示範名和實例文檔中查找你所提供的關鍵字。 當你點選一個示範,該示範的文檔會在一個酷黑的窗口中顯示出來。 當你雙擊一個示範,該示範便會在Visual Studio中打開。



如果你對一站式示範代碼瀏覽器有任何建議和意見,歡迎電郵:onecode@microsoft.com.

微軟一站式示範代碼瀏覽器v1下載

如果您是第一次聽說All-In-One Code Framework這個項目,請參閱
微軟一站式示範代碼庫主頁上的相關介紹,以及以下兩篇文章:


All-In-One Code Framework
:一站式微軟開發技術框架解決方案 http://blog.joycode.com/vsto/archive/2009/03/04/115496.aspx


微軟一站式開發技術框架解決方案中文說明 http://www.cnblogs.com/Jialiang/archive/2009/06/22/AIOCHS.html



文章引用地址:http://www.iefans.net/yizhanshi-daima-liulanqi-fabu/