MicrosoftのEdgeがChromium版Edgeでたので久々にブラウザベンチマーク

MicrosoftのEdgeがChromium版Edgeになって、なんとMac版もでたので久々に、古い　Mac Pro mid2012 Mojaveでベンチマークとってみた

対処対象ブラウザは、Safari / Firefox / Google Chrome / Microsoft Edge (Chromium版Edge) / Vivaldi / Opera を　JetStream2の総合値で比較

昔のBrowser Benchmarkのエントリー(古い順)
IEって遅いんだよー。ってことをあまり気にしてない方へ。 / 2010年

まだ、レガシーブラウザと戦うのですか... / 2013年

あれから１年.....あの恐怖が再びw / 2014年

Edgeも出たし、JetStreamも出たので久々にブラウザのベンチマーク / 2015年

JetStream2の結果(2021版は以下のとおり) Safariが少々良い結果を出していますが、Firefoxを除き、あまり差はなくなってますね。Firefox頑張れ？(WindowsでIE使いたいって方も少数派だと思うので今回はWindowsでの比較は略。気が向いたらやるかもしれませんがWindows BootCampで起動するMacBookしかないんだよなーw)

Safari

Firefox

Google Chrome

Microsoft Edge (Chromium版Edge)

Vivaldi

Opera

気軽に食べ歩きにいける世の中になってほしい。。。

Oracle JavaScript Extention Toolkit(JET) de ブラウザの性能比較

なんだか余裕ないので、ちょいと、息抜きw

Oracle JavaScript Extention Toolkit(JET)
Oracle JET

さあ、あなたのIE11とそれ以外のモダンブラウザで 10,000 nodesを描画してPerformanceを比較してみましょう！。
Oracle JET > Visualizations > Diagram > Performance

以下、Safari 11.3 (macOS High Sierra/2 x 2.4 GHz 6-Core Intel Xeon/Mac Pro Mid(2012))

こちらも、どうぞ。
Edgeも出たし、JetStreamも出たので久々にブラウザのベンチマーク

Edgeも出たし、JetStreamも出たので久々にブラウザのベンチマーク

Windows10とEdgeも世に出たし、SunSpider1.0.2とOctane2.0が合体した感じのJetStreamが良さげなので久々にブラウザのJavaScriptベンチマーク。
これやっておくと大体の傾向が見えるので面倒だけど記録していくのが重要かと。

遅いんだけど〜と、データベース屋さんが呼ばれ、現場で見た結果、
遅いのは、
データベースでもなく、
アプリケーションサーバーでもなく、
ブラウザ上で動く、JavaScriptなんてこともあるわけで。

IEの一人負けの時代からモダンプラウザのJavaScript速くなったから、
詰め込み過ぎて遅いとか、
ただ単に作りが悪いとか、
ということも多くなってくるんだろ〜な〜と遠くを見てる。

環境
Windows 10 Pro - Core i7-980X - 3.33Ghz
MacPro OS X 10.11.2 - Intel Xeon E5645 * 2 - 2.4Ghz

CPU比較結果から
Core i7-980X 3.33Ghz/Intel Xeon E5645 2.4Ghzを約1.34
Intel E5645 2.4Ghz/Core i7-980X 3.33Ghzを約0.75
としてあります。

http://www.cpubenchmark.net/compare.php?cmp[]=1252&cmp[]=866

これからはJetStreamだけでいいと思うんですが、Octane2.0とSunSpider1.0.2の結果も載せています。
(V8とかOctane1.0の計測したのですがそれほど傾向に違いは見られないこともあり略）

各試験共通：１０回実行して、Max()/Min()を除いた結果をAvgとしています。

JetStream

Windows 10

OS X

Core i7-980X 3.33Ghzの結果をIntel E5645 2.4Ghz換算(0.75倍）したグラフ
OSの違いなどもありますが、同一ブラウザはほぼ同じ傾向がありますね。
それにしてもEdge頑張ってますね〜。IEはもういいんじゃないかなw

Octane 2.0

Windows 10

OS X

Core i7-980X 3.33Ghzの結果をIntel E5645 2.4Ghz換算（0.75倍）したグラフ
OSの違いなどもありますが、同一ブラウザはほぼ同じ傾向なのはJetStreamの結果と同じ傾向。
単一プラットフォームのブラウザの方が有利といえば有利だとは思いますが、Chrome/Opera/FireFoxって頑張ってると思います！！

SunSpider 1.0.2

Windows 10

OS X

Core i7-980X 3.33Ghzの結果をIntel E5645 2.4Ghz換算（1.34倍）したグラフ
SunSpiderはIE11の頃から(なぜか？）ダンドツだったわけですがEdgeになってもその傾向はあるようですね。
Octane系では平均点な感じなので合わせるとJetStreamの結果近づくと思われます。

そして、最後は個人的な趣味w　
document.write()を10,000回したらどうなるかw シンプルな繰り返しです
Edgeはかなり早くなってきてますが、他のブラウザと比べるとやはり何か違う傾向があるんですよね:)

Windows 10

OS X

Core i7-980X 3.33Ghzの結果をIntel E5645 2.4Ghz換算(1.34倍）したグラフ
document.write()*10000回、Edge速くなってますが、他のブラウザには...
私の趣味なのでご勘弁を。これ比較しないと落ち着かなくてw

ではでは、メリークリスマス

---

あれから１年.....あの恐怖が再びw
https://discus-hamburg.cocolog-nifty.com/mac_de_oracle/2014/02/w-2053.html

まだ、レガシーブラウザと戦うのですか...
https://discus-hamburg.cocolog-nifty.com/mac_de_oracle/2013/01/post-bc4e.html

ネタとして古すぎるので、思い出話ですけどw
IEって遅いんだよー。ってことをあまり気にしてない方へ。
https://discus-hamburg.cocolog-nifty.com/mac_de_oracle/2010/05/ie-a910.html

html5j パフォーマンス部 @ DeNA へ参加してきた

html5j パフォーマンス部 第二回勉強会へ参加してきた。

勉強会２連チャンでした :)

html5jとか勉強会（そんな名称になる前から参加してました :)）には何度か参加していますが、パフォーマンスという単語に脊髄反応して当日のセッション内容を確認もぜず参加してしまったw　のは内緒。

データベースが遅い！　と呼ばれ、調査すると本当に遅いのはブラウザの上、なんてことも意外に多いんですよね。

講義を受けてるみたいで脳に汗かいた。　

1.品質管理と統計学「IT業界へどうつなぐ？」 - 成蹊大学 / 中西寛子
2.ソフトウェア工学の基礎を学ぶ - 大槻肇

ところで、
今回で２回目のようですが、１６回先までテーマが決まっているようでおどろきました。
他の勉強会を運営している方がってどうしてるんだろ？。 　

そして、DeNAさんのセミナー会場いいですよね〜〜〜。
都合がつけば次回も参加すると思います。 :)

あれから１年.....あの恐怖が再びw

何故、この時期になるとブラウザと戦うことが多いいんだ〜見たいな思いもあるんだけど.....再びブラウザと格闘してきた（結果：今回は見事に敗北w　むーりー)

さすがに、いまさらIE9,8,7なんて話じゃなくてよかったのですが...今回はIE10でございましたw

そういえば、あれから一年たったな〜と見てみたらIE10は載せてなかったのだ〜〜。
まだ、レガシーブラウザと戦うのですか...

今回は、IE11やWebKit陣営へ加わったOpera 19なども加えていつものベンチマーク結果を更新しました。 ;)

IE10に勝てなかったのはChromeファーストで開発しているからに違いねぇ〜　（負け惜しみw

Windows8.1のFF26、Chrome32、Opera19はWindows8と同じPCでほぼ同じスコアだったため載せていません。
また、IE11のデータはWindows7/8.1のみ。(Windows8版IE11がリリースされていないため）

・SunSpider 1.0.2 - https://www.webkit.org/perf/sunspider/sunspider.html

Windows7は OS XのVirtualBoxを利用しているのでオーバーヘッドを考えたとしてもIE11の異常な速さが目につきますね。(まあ速ければ文句はないです、はいw)
そして、Webkit陣営となったOpera 19がChromeなみのスコアを叩き出す！！！！！

・Google Octane JavaScritpt Benchmark V2 -

SunSpiderでは検討健闘しているIE11もOctane V2ではまだ遅れが目立ちますね。
FireFox26はOS X阪で遅れが目立ちます。ガンガレ。
そして、ここでも、Opera 19が驚きのスコアを叩き出している.....恐るべし :)



Safariなど一部のブラウザのデータが漏れていたのでそれらのブラウザのデータを含むグラフを追加

いや、うち、まだ〜昔のブラウザ使ってますよ〜って方もいると思うので、レガシーも含めて旧バージョンのベンチマークサイトの結果も載せておきます。

・SunSpider 0.9.1 -

IE8やIE9(64bit)がダントツで遅かったわけですが、これを見たらヤバいと思いますよね。悪い意味で。
そして、Opera 19すげ〜ぞw やればできる子！

・Google Octane JavaScript Benchmark V1 -

これを見れば、IE10とIE11ってそーとーちげ〜よって感じなのがわかります orz.
ほんとIE10をもターゲットにするならIE10ファーストで開発／テストしろよって感じです。はい。

・Google V8 JacaScript Benchmark suit Ver.7 -

IE8 V8の結果はどこ？ってぐらい低いのでよーく探してくださいね。一番左のがそうです。

そして、最後は恒例のdocument.write() * 10000
んなもんつかうかよ〜って感じですが。見てると面白いので毎回やってますw

いままで遅めだったChromeですが、32では速くなってるじゃありませんか〜〜〜〜〜〜 :)

そして、それ以外では結構いい感じだったIE11ですが、Windows7 (VM)でまさかの結果が...
他のプラットフォームの結果と比較しても異常な値でした。IE10もVM上だと同様の傾向はありますが...
調べていないので原因は不明です...だれか調べてw....単純にそこはチューニングしてないからとか....w...勝ってに想像しているところ...w

注）10回計測しmin/maxの値を除いた8回分の平均値をグラフ化しています。

WIF2012 の季節が近づいて来たな〜 :)

ウェブデザイン国際フェスティバル開催されるよ〜。

今年も熱い戦いがあるんだろーなー :) Interactive Design International Festival　　29th-31st May 2012, Limoges, France　

楽しみだ

---

・WIF 2008 - ウェブデザイン国際フェスティバル
・WIF2008 - Webdesign International Festival
・WIF2008 - Webdesign International Festival - 予選終了
・２４（テレビドラマではないよ）
・WIF2008 - Webdesign International Festival - ファイナリスト決定！
・WIF2008 - Webdesign International Festival - 事務局スタッフの方がコメントをくれた!
・WIF2008 - Webdesign International Festival - Finalまであと１ヶ月余り
・いよいよWIF2008開幕
・WIF2008 - WebJamが開始された。
・WIF2008 - WebJam Results
・WIF2010 - Web Design International Festival 2010だった〜
・WIF2010 ファイナリスト　３５チーム決定

box-shadowを使い始めて…

私のブログでCSS3のbox-shadowを使い始めてるのでお気づきの方も多いと思いますが、まだまだブラウザ間で表示に差異があるんですよね〜（そもそも対応していないIE8以前や、環境がないのでIE9では未確認、いずれWindows7を買ってVM環境上では使う事になると思いますが…）

<div>に以下のようなbox-shadowとborder-radiusプロパティを設定してあります。（関連部分のみ）

-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

-webkit-box-shadow:2px 2px 40px #000;
-moz-box-shadow:2px 2px 40px #000;
box-shadow: 2px 2px 40px #000;

各ブラウザで表示してみるとSafari5、Chrome8とFirefox3/4、Opera10で違いがでます。
Safari/Chromeは想定通りの陰になりますが、FirefoxやOperaだと陰が広がり過ぎて切れている部分がありますね。ちょっと気になった点なのでメモ書き。

（実際のところSafari/ChromeとFirefox/Operaのどちらの描画がただしいんだろー、Safariで調整しちゃってるからSafari/Chromeでの描画は見た通りなんだけど…）

・Safari5

・Chrome8

・Firefox3.6/4.0b

・Opera10.63

goo.glの404 not foundは意外とシンプルだった :)

Google さんの短縮URLサービスの404 not foundページ、意外とシンプルね。もっと凝っているかと想像してたんですが　(^^;;;

---

・素敵な404 not foundページを探して〜w

bit.lyの404ページってこんなだったのか。

HTML5ベースの素敵な404 Not Foundってのが気になってるので、404に反応してみたり…

bit.lyの404ページはフグだったのか。

---

・HTML5ベースの素敵な404 Not Found

HTML5ベースの素敵な404 Not Found

ごめんなさい、ごめんなさい。アイデアだけなのでまるっとjpgでございます。

HTML5ベースの素敵 404 Not Found Page募集ってのがあって、アイデアだけ浮かんだのでメモ替わりに。

あとでちゃんと考えますというか作ります :) ほんとかw

HTML5とか勉強会 第１０回＠Google

昨年暮れに初めて参加したHTML5勉強会以来かなり久々にHTML5勉強会改め、HTML5とか勉強会＠Googleに参加してきた。もう１０回目なんですね。いつもすぐに定員一杯でキャンセル待ちとかでしたがGoogleさんのオフィスの会場なのでいつもより人数多めだったのですね :) 久々に楽しかったですよ〜懇親会もね。

以下、今回の発表内容など。

Ustream http://bit.ly/dxUSak

第10回記念デモアプリ（Safari5 only）
http://komasshu.com/html5demo/10thanniversary/

小松さんのスライド資料（Safari5 only）
http://komasshu.com/html5demo/10thanniversary/slides/#p0

白石さんのスライド資料（Safari5 only）
http://openweb-labs.appspot.com/slides/jqtouch/presentation.html

吉川さんのスライド資料
http://prezi.com/ftfqmwlszidy/jquery-mobile/

たにぐちさんのブログ（スライド資料は後にブログで公開されるそうです）
http://h2o-space.com/blog

直鳥さんのスライド資料
http://www.slideshare.net/naotori/100915-html5

TwiMap（iPhoneでご利用ください、とのこと。場所のURLを共有するサービス）
http://twimap.net/

10回を記念してビデオメッセージをくれたイアン・ヒクソンさん（HTML5仕様編集者）に、みんなでお礼を言ったビデオ

ブラウザ で Quake 2

Googleさんいろいろやってくれます。あの3Dゲームをブラウザで！　ですと！ :)
HTML 5の機能を使いまくっているいるようで、いまのところSafariとChromeで動作するとのこと。

すごい。Quake 2のjavaのコードも見れるのね :). 　
http://code.google.com/p/quake2-gwt-port/

-以下抜粋-

In the port, we use WebGL, the Canvas API, HTML 5 <audio> elements, the local storage API, and WebSockets to demonstrate the possibilities of pure web applications in modern browsers such as Safari and Chrome.

WIF2010 ファイナリスト ３５チーム決定

WIF2010ファイナリスト決定、日本からは３チーム。がんばってね。(^^)

WIF2010 - Web Design International Festival 2010だった〜

ここのところ忙しくて、毎日見れていたブログなども見る間もなく帰宅すると寝る〜見たいな日々が続いていた影響もあり、気づいたら予選終わってたんですね、Web Design International Festival 2010

そういえばWIFの存在を知ったのって息子ちゃんが生まれた年だった。時の経つのは早いものだ〜。

話がそれてしまいましたが、日本から参加した１５チームのうち１０チーム以上はFlashを利用してますね。今後はHTML5を利用したの作品も登場してほしいと思う今日この頃。:)

日本語のサイトはこちら http://japan.partners.webdesign-festival.com/

WIF本家のサイトはこちら、http://www.webdesign-festival.com/2010/

すごいよなHTML5で書かれているSketchpad

このSketchpadはHTML5で書かれているとか、すごいよね。IEで開くと不幸になるからIE以外のブラウザがいいと思うよ、Safari4とかOpera10とか、FireFox3とか、Chromeとかでね。

ブログはこちらね。http://www.colorjack.com/blog/

HTML5 を使ってみよう！＠Opera 東京オフィス

HTML5 を使ってみよう！＠Opera 東京オフィス
ということで、目黒のOpera東京オフィスへいってきました。２時間ほどでしたが、W3CのMichael SmithさんによるWeb Socketsのお話では最後はホワイトボードまで使って講義みないな雰囲気になったり、日本語ペラペラのOperaのDaniel DavisさんのHTML4をHTML5へ書き換えるデモなど楽しい時間となりました。
まあHTML5を調べ始めたばかりなのでGreeさんのオープンソース勉強会なども合わせると、私にはじめの１歩じゃなくて２歩ぐらいとして丁度よい内容かな…と。

HTML5のWeb Database仕様は勧告まで行かない可能性があるとか

先月参加した第19回 オープンソーステクノロジー勉強会＠Gree (デベロッパのためのHTML5入門)でも紹介されていたWeb Database（Web SQL Databaseへ改名）に関する仕様はどうやら勧告まで行かない可能性が高いと、メーリングリスト（html5-developers-jp ）に流れて来た。

Appleさんとか実装しちゃってるけど。。今後はSimpleDatabase（Indexed Databaseと改名）へシフトしていくのか？…

詳細は以下。

ブラウザ上のデータベースに関して:http://javascript.g.hatena.ne.jp/edvakf/20091102/1257139731

第19回 オープンソーステクノロジー勉強会＠Gree (デベロッパのためのHTML5入門)

Greeさん主催のオープンソーステクノロジー勉強会今回で１９回目。お題は、「デベロッパのためのHTML5入門 」html5-developers-jp管理人の白石俊平さんのお話。

Applicatoin CacheとWeb Workersの話以外は予習の成果で付いて行けた。 :) Web Workers Threadと呼ばれたりしているみたいだけどThreadって呼ばないようがいいように感じた。
共有メモリは持っていない様でDOMにもWorkerからは直接アクセスできない、替わりにUI Threadとメッセージのやり取りをして必要な情報をやり取りするらしい。プロセス間通信的。

昔、バックグランドプロセスとGUIプログラム間のやり取りをApple Eventを使って書いたことがあったのだが、それに近い雰囲気なのかなぁと、おぼろげに理解したつもりになっているところ。面白かった！　

今月、来月もHTML5絡みのイベントとか勉強会に行く予定なのでそれらも楽しみだ。:)

以下はSafari4で試すといいよ...

あ、Canvasで思い出した。そろそろDashboard de Aquariumも1.5とかのネタ考えとくか。

HTML5のWeb DatabaseとかWeb StorageのDemoを見ておく

Oracleとは直接関係ないネタですが。HTML5の勉強会とか幾つか参加する予定なので軽い予習も予ていくつかのデモとかソースを見ておく。。

デモはSafari4で見たほうがいいよ。

Safariでの実装もかなり進んでいるようだし、データベース関連のネタもあるのでWeb Database関連のデモとかソースも軽く見ておく（Safari4で見るべし）



カレンダーにイベントを登録した後、「開発」メニュー→「Webインスペクタ」→「データベース」タブ→「データベース」アイコンを選択。
プロンプトで select文を実行してWeb Databaesの内容を見る事も出来るし「▶」をクリックして展開後、該当する表を選択しても内容を確認できるんだね。:)


Sticky Notesは2007年に公開されていたデモだけどこちらも参考になる。メモを閉じる時のエフェクトもいい感じ。


追記11/20: どうやらIE9でHTML5対応とか..いうニュースが流れてるので追記。