FLASH, HTML, JAVASCRIPTGUIMARK 2: T

FLASH, HTML, JAVASCRIPT
GUIMARK 2: THE RISE OF HTML5
MAY 5, 2010 SEAN CHRISTMANN 121 COMMENTS
Posted by Sean Christmann

Introduction

Two years ago I had an itch that needed scratching. “RIA” was the future of the web and every major company seemed to have a solution to get us there. I developed the first version of GUIMark to not only get a good understanding of the respective technologies, but also to give my clients through EffectiveUI and everyone else something to actively gauge the rendering performance of the different runtimes. After releasing it I got a good response from both the tech community as well as several platform engineers interested in resolving problems. There were however two serious flaws in the test that immediately stood out. First, the test was relying too heavily on text layout performance. I was barely engaging the the vector and bitmap side of the rendering engines. Secondly, the test was too artificial and developers have a tendency of resisting optimizing apis against unrecognizable test cases.

Evolution

Fast forward to today and the web is a different beast. Attempt to shine a positive light on a plugin technology and you will be booed off the stage. Create something fun and silly in HTML5 and you’ll have hundreds of thousands of visitors pounding down the front door of your blog to speculate on the death of Flash. It’s undeniable that a new anchor technology is taking root in the web space, and needless to say I’ve got a new itch to scratch.

GUIMark 2

Like the first GUIMark, this new benchmark is designed for one sole purpose, to burn a hole in your CPU. I still believe that by completely saturating the rendering pipeline, we can get a better idea of which technologies are best suited for running interactive content on the web. Developers tend to focus primarily on the speed of the programming language itself, when in reality, most of your cpu time is spent inside internal rendering APIs. I also firmly believe that any benchmark testing rendering performance should stick to sub 60 fps numbers. Almost all users on the web today are browsing with 60Hz LCD monitors and there’s no reason to design a test that has to throw away frame data.

While the new benchmark sticks to the original in theory, this version introduces some much needed changes. First, I’ve split GUIMark into 3 separate tests: Vector, Bitmap, and Text rendering, and I’ve attempted to make the test cases as real world as possible. Second, I’ve only implemented these tests in HTML5 and Flash. I’m not opposed to adding Silverlight and JavaFX to the benchmark, it’s just that I didn’t have the time to build them right now and something tells me a much smaller percentage of the internet crowd is interested in those results anyway. (Feel free to flame me in the comments section for that one). Lastly, I’ve added mobile versions of some of the tests, we’ve all heard inflammatory statements from certain CEOs about mobile web performance, let’s see if the numbers back that up.

Enough already, on to the results.

Test environment

All of the tests below were performed on a 15″ unibody Macbook Pro with a 2.53 GHz Intel Core 2 Duo and an NVIDIA GeForce 9400m. On the Mac side I’m running Snow Leopard with Flash player 10.0.45.2 installed. On the PC side I have Windows 7 32bit with Aero turned on and again with Flash player 10.0.45.2. For Linux I ran a Linux Mint 8 Live CD with Firefox and Flash player 10.0.45.2. Unfortunately running off the Live CD meant no access to Nvidia drivers.

Vector Charting Test

This benchmark is designed to stress the vector apis by simulating a streaming stock chart. The test makes heavy use of strokes with complex alpha fills. Originally I had added gradient fills into the mix to make sure that a good majority of vector APIs were being flexed, but there was no significant difference in the results so I pulled them out to make the visuals cleaner. While the source may appear to be heavy on the javascript side, the actual speed of code excluding canvas draw calls is less then 1 millisecond.

HTML5 FLASH 10
WINDOWS 7
INTERNET EXPLORER 8.0.7600 N/A 30.7
FIREFOX 3.6.3 15.73 29.65
CHROME 4.1.249 6.41 26
OPERA 10.53 24.77 29.9
SAFARI 4.0.5 Safari* 29.5
Avg (15.64) fps
Avg (29.15) fps
SNOW LEOPARD
SAFARI 4.0.5 4.04 20.55
FIREFOX 3.6.3 3 23.92
CHROME 5.0.342 2.86 25.48
OPERA 10.10 12.22 15.24
Avg (5.53) fps
Avg (21.29) fps
LINUX MINT
FIREFOX 3.5.9 14.61 fps
22.88 fps
*Safari on Windows 7 will not animate the chart, it will only render one frame each time I press down on my mouse button.

Results are all over the place for this test. On the HTML5 side Opera delivers the best performance on both platforms. Flash on the PC is consistently high, but on OS X, Chrome takes the top spot. Linux pulls off great numbers despite running off a Live CD. HTML5 on the Mac side requires closer inspection though. When I first made the test and showed it to my co-worker John Blanco, he started ripping apart the code to find any mistakes I might have made. What he discovered was that by changing the stroke size on my lines from 2 pixels to 1 pixel, performance in Safari, Firefox and Chrome shot up to rates closer to Flash, while Opera stayed at the exact same FPS.

1 Pixel Stroke Results Safari – 23.59 fps Firefox – 17.43 fps Chrome – 17.12 fps Opera – 12.12 fps
Flash on the Mac, as well as HTML5 and Flash on PC were largely unaffected by this change though, gaining maybe a single frame rate by changing to 1 pixel strokes. I’m not sure what to make of these findings. What kind of bug causes this and what side effects might be introduced by fixing it? Will a change allow both 1 and 2 pixel strokes to run at higher speeds, or will they both settle somewhere near Operas numbers.

Bitmap Gaming Test

The bitmap test was designed to simulate a tower defense type game. The test stresses pushing around lots of bitmap assets that animate each frame. The entire rectangle view needs to be cleared each frame to account for all the changes happening in the scene. The test supports a minimal amount of z depth ordering but not so much as to cause user scripts to take more then 1 millisecond to execute. Both environments are using anti-aliasing to scale the bitmap images.

HTML5 FLASH 10
WINDOWS 7
INTERNET EXPLORER 8.0.7600 N/A 17.34
FIREFOX 3.6.3 5.78 17.7
CHROME 4.1.249 10.1 15.98
OPERA 10.53 13.59 17.23
SAFARI 4.0.5 Error* 17.29
Avg (9.82) fps
Avg (17.1) fps
SNOW LEOPARD
SAFARI 4.0.5 11.76 13.21
FIREFOX 3.6.3 7.5 14.09
CHROME 5.0.342 7.4 19.96
OPERA 10.10 5.86 14.53
Avg (8.13) fps
Avg (15.44) fps
LINUX MINT
FIREFOX 3.5.9 4.84 fps
10.91 fps
*Safari on PC again only renders one frame per mousedown event, so the results are impossible to verify.

These results are really surprising. Chrome on OS X manages to push Flash higher then even Windows based browsers. I was so surprised I ended up rebooting and running the test again just to make sure something wasn’t wrong. We’re starting to see a trend where HTML5 on average runs slower for Canvas based animations and I’ll explain why a bit further below. Linux takes a huge performance hit in this test but the percentage difference mirrors the other platforms exactly. With Nvidia drivers I’d imagine the real numbers would be closer to Mac performance.

Text Column Test

This test is designed to push the text layout and rendering engine in HTML and Flash. The test utilizes custom fonts introduced with CSS3 as well as multibyte character string. This is my least favorite test in the group because it doesn’t simulate any real world test cases, however it should provide a good estimate of how quickly a page full of text can be calculated. I call it the “iceberg” test since 80% of the hit on the CPU happens outside the renderable view. It works because although text that overflows outside the textblock doesn’t get rendered, it does have to get calculated in order to know how many lines of text can be scrolled. HTML pages do this all the time when you load a site with text below the fold.

HTML5 FLASH 10
WINDOWS 7
INTERNET EXPLORER 8.0.7600 21.79* 1.51
FIREFOX 3.6.3 24.7 1.5
CHROME 4.1.249 23.58* 1.44
OPERA 10.53 21.16 1.49
SAFARI 4.0.5 30* 1.46
Avg (24.24) fps
Avg (1.48) fps
SNOW LEOPARD
SAFARI 4.0.5 27.26 16.24
FIREFOX 3.6.3 23.61 18.71
CHROME 5.0.342 26.07* 22.85
OPERA 10.10 22.72 15.22
Avg (24.91) fps
Avg (18.25) fps
LINUX MINT
FIREFOX 3.5.9 25.89 11.67
*Safari continues to show problems on PC. Safari reports 30 fps but it looks like it’s running at 10 fps. I’ve included the results but they’re really wrong.

*Internet Explorer renders the view, but is unable to display the custom fonts.

*Chrome on both platforms is unable to render the Jedi custom font.

I didn’t have time to investigate whether the super slow PC performance in Flash is my fault or Adobe’s, but I expect that will be uncovered soon enough. As for the general differences between HTML and Flash in the text test, this is exactly what I was expecting. HTML was built for text rendering and this is further proof that browsers do this best.

GUIMark Mobile

The Vector and Bitmap tests have been ported into miniature forms to test on mobile devices with a minimum resolution of 320×480. This is the area I imagine will see a lot of updates over the next 6 months. I’ve ordered the results by the release date of each phone tested.

HTML5 VECTOR HTML5 BITMAP FLASH VECTOR FLASH BITMAP
PALM PRE C/O KEVIN O’SHEA 21.46 32.89
IPHONE 3GS 10.79 12.86
MOTOROLA DROID 8.95 12.59
NOKIA N900 FLASH 9 9.51 9.65 16.69 19.78
NEXUS ONE 15.86 18.83
HTC HD2 C/O MATT EMORY 10.43 17.59 29.91 37.62
Two phones running the Flash player isn’t conclusive evidence about Flash’s performance in general in the mobile space, but it does cast immediate doubts on claims that Flash is slow on ARM based smart phones. Meanwhile, if you want the best performance in HTML5 based web content, Palm Pre and Nexus

ผลลัพธ์ (ไทย) 1:

แฟลช HTML, JAVASCRIPTGUIMARK ที่ 2: เพิ่มขึ้นของ HTML5ความคิดเห็น SEAN CHRISTMANN 121 5 MAY, 2010โพสต์ โดย Sean Christmannแนะนำสองปีที่ผ่านมาผมมี itch เกาที่จำเป็น "เรีย" อนาคตของเว็บ และทุกบริษัทใหญ่ดูเหมือนจะ มีทางออกเดินทางเรา ฉันพัฒนารุ่นแรกของ GUIMark ไม่ได้ รับความเข้าใจดีของเทคโนโลยีเกี่ยวข้อง แต่ยังให้ลูกค้าของฉัน EffectiveUI และคนอื่นเพื่อวัดประสิทธิภาพการทำงานจำลองของ runtimes อื่นอย่างแข็งขัน หลังจากปล่อยมัน ผมการตอบรับที่ดีจากทั้งชุมชนด้านเทคนิคตลอดจนวิศวกรหลายแพลตฟอร์มในการแก้ไขปัญหา มีแต่ สองข้อบกพร่องร้ายแรงในการทดสอบยืนออกทันทีที่ แรก ระบบอาศัยการทดสอบประสิทธิภาพรูปแบบข้อความมากเกินไป ผมแทบไม่เชื่อในด้านเวกเตอร์และบิตแมปของโปรแกรมแสดงผล ประการที่สอง การทดสอบถูกเกินไปประดิษฐ์ และพัฒนามีแนวโน้มของการต่อต้านการเพิ่มประสิทธิภาพ apis กับกรณีทดสอบไม่รู้จักวิวัฒนาการข้างหน้าอย่างเร็ววันนี้และเว็บเป็นสัตว์ต่าง ๆ พยายามส่องไฟบวกเทคโนโลยีปลั๊กอิน และคุณจะ booed ปิดเวที สร้างสิ่งที่สนุก และโง่ใน HTML5 และคุณจะมีหลายร้อยหลายพันของผู้เข้าชมห้ำหั่นลงประตูหน้าของบล็อกของคุณคาดการณ์ในความตายของแฟลช ปฏิเสธไม่ได้ว่า เทคโนโลยียึดใหม่กำลังรากในพื้นที่บนเว็บ และจำเป็นต้องพูดฉันมี itch ใหม่เกาได้GUIMark 2เช่น GUIMark แรก มาตรฐานใหม่นี้ถูกออกแบบมาสำหรับหนึ่งวัตถุประสงค์ การเขียนรูใน CPU ของคุณ ผมยังเชื่อว่า โดย saturating ไปป์สีทั้งหมด เราจะได้รับทราบซึ่งเทคโนโลยีเหมาะที่สุดสำหรับการเรียกใช้เนื้อหาแบบโต้ตอบบนเว็บ นักพัฒนามักจะ เน้นความเร็วของภาษาตัวเอง ในความเป็นจริง ส่วนใหญ่ของเวลาที่ใช้ในภายในจำลอง APIs ของ cpu เป็นหลัก ฉันยังมั่นเชื่อว่า มาตรฐานการทดสอบประสิทธิภาพการแสดงผลควรติดหมายเลขย่อย 60 fps ผู้ใช้เกือบทั้งหมดบนเว็บวันนี้กำลังเรียกดู ด้วยจอภาพ LCD 60Hz และมีเหตุผลในการออกแบบการทดสอบที่มีการทิ้งข้อมูลเฟรมในขณะที่เกณฑ์มาตรฐานใหม่แท่งต้นฉบับในทฤษฎี รุ่นนี้แนะนำเปลี่ยนแปลงบางอย่างจำเป็นมาก ครั้งแรก ฉันได้แบ่ง GUIMark ทดสอบแยก 3: ภาพเวกเตอร์ บิต และข้อความ และได้พยายามสร้างกรณีทดสอบเป็นโลกจริงที่เป็นไป สอง ฉันได้เพียงดำเนินการทดสอบเหล่านี้ใน HTML5 และ Flash ฉันไม่ได้การเพิ่ม Silverlight และ JavaFX การเกณฑ์มาตรฐาน เพียงแค่ว่า ไม่มีเวลาสร้างขณะนี้ และสิ่งที่บอกเปอร์เซ็นต์ของฝูงชนอินเทอร์เน็ตขนาดเล็กสนใจในผลลัพธ์เหล่านั้นต่อไป (รู้สึก flame ฉันในส่วนความเห็นที่หนึ่ง) สุดท้าย ได้เพิ่มรุ่นมือถือของการทดสอบ เราได้ทั้งหมดได้ยินงบอักเสบจาก CEOs บางเกี่ยวกับประสิทธิภาพการทำงานเว็บมือถือ ลองดูถ้าหมายเลขสำรองที่พอแล้ว เพื่อผลการสภาพแวดล้อมการทดสอบการทดสอบด้านล่างทั้งหมดถูกทำในการ 15″ unibody Macbook Pro 2.53 GHz Intel Core 2 Duo และการ NVIDIA GeForce 9400m ด้าน Mac ฉันทำงานเสือดาวหิมะกับ Flash player 10.0.45.2 ติดตั้ง ทางด้าน PC มี Windows 7 แบบ 32 บิตกับ Aero เปิดอยู่ และอีกครั้ง กับ Flash player 10.0.45.2 สำหรับ Linux ผมวิ่งเป็น Linux มินท์ 8 Live CD กับ Firefox และ Flash player 10.0.45.2 ทำแต่ปิด Live CD หมายถึง ไม่สามารถเข้าถึงโปรแกรมควบคุม Nvidiaเวกเตอร์ที่ทดสอบการสร้างแผนภูมิเกณฑ์มาตรฐานนี้ถูกออกแบบมาเน้นเวกเตอร์ apis โดยจำลองแผนภูมิหุ้นสตรีมมิ่ง การทดสอบช่วยให้การใช้งานหนักของจังหวะด้วยการเติมอักษรที่ซับซ้อน เดิม ผมมีเพิ่มไล่ไปผสมเพื่อให้แน่ใจว่า ส่วนใหญ่ดีของเวกเตอร์ APIs ถูกจะ flexed แต่มีไม่แตกต่างอย่างมีนัยสำคัญในผลลัพธ์เพื่อฉันดึงพวกเขาให้ภาพที่สะอาด ขณะที่แหล่งที่มาอาจปรากฏว่าหนักด้าน javascript ความเร็วจริงของรหัสรวมเรียกผืนผ้าใบวาดได้น้อยกว่ามิลลิวินาทีที่ 1 แล้วHTML5 แฟลช 10WINDOWS 7 INTERNET EXPLORER 8.0.7600 N/A 30.7FIREFOX 3.6.3 15.73 29.65โครเมี่ยม 4.1.249 6.41 26โอเปร่า 10.53 24.77 29.9ซาฟารี 4.0.5 ซาฟารี * 29.5Avg (15.64) fpsAvg (29.15) fpsเสือดาวหิมะ ซาฟารี 4.0.5 4.04 20.55FIREFOX 3.6.3 3 23.92โครเมี่ยม 5.0.342 2.86 25.48โอเปร่า 10.10 12.22 15.24Avg (5.53) fpsAvg (21.29) fpsมิ้นท์ LINUX FIREFOX 3.5.9 14.61 fps22.88 fps* ซาฟารีบน Windows 7 จะทำให้เคลื่อนไหวแผนภูมิ มันจะเพียงทำให้เฟรมหนึ่งทุกครั้งที่ผมกดลงบนปุ่มเมาส์ของฉันผลทั่วสถานที่สำหรับการทดสอบนี้ได้ ด้าน HTML5 โอเปร่าให้ประสิทธิภาพสูงสุดในระบบทั้งสองระบบ แฟลชบนพีซีมีสูงอย่างต่อเนื่อง แต่บน OS X โครเมี่ยมใช้เวลาด้านบนจุด Linux ดึงปิดเลขดีแม้มีการเรียกใช้จากซีดีอยู่ HTML5 ในฝั่ง Mac ต้องตรวจสอบใกล้ชิดแม้ว่า เมื่อฉันแรกทำการทดสอบ และพบกับผู้ปฏิบัติงานร่วมของฉันจอห์นเต้บลังโก้ เขาเริ่มคัดลอกการรับรหัสในการค้นหาความผิดพลาดอาจได้ทำ สิ่งที่เขาพบได้ว่า โดยการเปลี่ยนขนาดเส้นบรรทัดของฉันจาก 2 พิกเซลกับพิกเซล 1 ประสิทธิภาพใน Safari, Firefox และ Chrome ยิงค่าราคาใกล้กับแฟลช ในขณะที่โอเปร่าอยู่ใน FPS เหมือนกันแน่นอนพิกเซล 1 จังหวะผลลัพธ์ซาฟารี – 23.59 fps 17.12 fps Firefox – 17.43 fps โครเมี่ยม – โอเปร่า – 12.12 fpsแฟลชในตัว Mac เป็น HTML5 และแฟลชบนพีซีถูกผลกระทบการเปลี่ยนแปลงนี้ส่วนใหญ่ถึงแม้ว่า ได้ทีอัตราเฟรมเดียว โดยเปลี่ยนจังหวะ 1 พิกเซล ฉันไม่แน่ใจว่าทำสิ่งเหล่านี้ ชนิดของข้อผิดพลาดทำให้นี้และอาจนำผลข้างเคียง โดยการแก้ไขนั้นหรือไม่ การเปลี่ยนแปลงให้จังหวะพิกเซล 1 และ 2 การทำงานที่ความเร็วสูง หรือจะทั้งคู่จ่ายอยู่ใกล้โอเปร่าหมายเลขบิตแมปทดสอบเกมการทดสอบบิตถูกออกแบบมาเพื่อจำลองชนิดทาวเวอร์กลาโหมเกม ทดสอบความตึงเครียดผลักดันสถานของบิตแมปสินทรัพย์ที่เคลื่อนไหวแต่ละเฟรม มุมสี่เหลี่ยมทั้งหมดต้องล้างข้อมูลเฟรมแต่ละการเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นในฉาก การทดสอบสนับสนุนลำดับความลึก z แต่ไม่มากเพื่อทำให้ผู้ใช้สคริปต์จะเพิ่มมากขึ้นแล้ว 1 มิลลิวินาทีดำเนินการน้อย สภาพแวดล้อมทั้งสองจะใช้เหลี่ยมขนาดรูปบิตแมปHTML5 แฟลช 10WINDOWS 7 INTERNET EXPLORER 8.0.7600 N/A 17.34FIREFOX 3.6.3 5.78 17.7โครเมี่ยม 4.1.249 10.1 15.98โอเปร่า 10.53 13.59 17.23ซาฟารี 4.0.5 พลาด * 17.29Avg (9.82) fpsFps Avg (17.1)เสือดาวหิมะ ซาฟารี 4.0.5 11.76 13.21FIREFOX 3.6.3 7.5 14.09โครเมี่ยม 5.0.342 7.4 19.96โอเปร่า 10.10 5.86 14.53Avg (8.13) fpsAvg (15.44) fpsมิ้นท์ LINUX FIREFOX 3.5.9 4.84 fps10.91 fps* ซาฟารีบนพีซีอีกเพียงวาทกรรมหนึ่งเฟรมต่อเหตุการณ์เมาส์ ดังนั้นผลลัพธ์จึงไปตรวจสอบผลเหล่านี้เป็นที่น่าแปลกใจจริง ๆ โครเมี่ยมบน OS X จัดการผลักดันสูงแฟลช แล้ว Windows ได้โดยใช้เบราว์เซอร์ ผมแปลกใจดังนั้นฉันสิ้นสุดขึ้นการรี และทำการทดสอบอีกครั้งเพียงให้แน่ใจว่าสิ่งที่ไม่ถูกต้อง เราจะเริ่มเห็นแนวโน้มที่ HTML5 โดยเฉลี่ยทำงานช้าลงในผืนผ้าใบตามภาพเคลื่อนไหว และฉันจะอธิบายเหตุผลเป็นบิตเพิ่มเติมด้านล่าง ประสิทธิภาพมากที่ตีในการทดสอบนี้ใช้ Linux แต่ผลต่างเปอร์เซ็นต์กระจกแพลตฟอร์มอื่น ๆ ทุกประการ ด้วย Nvidia ไดรเวอร์ที่ผมจินตนาการว่าตัวเลขจริงจะใกล้ชิดกับประสิทธิภาพการทำงานของ Macทดสอบข้อความคอลัมน์การทดสอบนี้ถูกออกแบบมาเพื่อผลักดันเค้าโครงข้อความและโปรแกรมการแสดงผลใน HTML และ Flash การทดสอบใช้แบบอักษรแบบกำหนดเองที่นำ CSS3 เป็นอักขระสัญลักษณ์ คือทดสอบของฉันชื่นชอบน้อยที่สุดในกลุ่มมันไม่จำลองกรณีทดสอบใด ๆ โลก แต่ก็ควรให้การประเมินที่ดีของความเร็วสามารถคำนวณหน้าเต็มรูปแบบของข้อความนี้ ผมเรียกว่าการทดสอบ "ภูเขาน้ำแข็ง" เนื่องจาก 80% ของการตีบน CPU เกิดขึ้นภายนอกดู renderable ทำงานเนื่องจากแม้ไม่ได้แสดงข้อความที่มีความยาวเกินนอก textblock มันต้องได้รับการคำนวณเพื่อทราบสามารถเลื่อนจำนวนบรรทัดของข้อความ หน้า HTML ทำเช่นนี้ตลอดเวลาที่เมื่อคุณโหลดเว็บไซต์ที่ มีข้อความด้านล่างพับHTML5 แฟลช 10WINDOWS 7 INTERNET EXPLORER 8.0.7600 21.79* 1.51FIREFOX 3.6.3 24.7 1.5โครเมี่ยม 4.1.249 23.58* 1.44โอเปร่า 10.53 21.16 1.49ซาฟารี 4.0.5 30 * 1.46Avg (24.24) fpsAvg (1.48) fpsเสือดาวหิมะ ซาฟารี 4.0.5 27.26 16.24FIREFOX 3.6.3 23.61 18.71โครเมี่ยม 5.0.342 26.07* 22.85โอเปร่า 10.10 22.72 15.22Avg (24.91) fpsAvg (18.25) fpsมิ้นท์ LINUX FIREFOX 3.5.9 25.89 11.67* ซาฟารียังแสดงปัญหาบนพีซี ซาฟารีรายงาน 30 fps แต่ดูเหมือนจะอยู่ที่ 10 เฟรมต่อวินาที ผมได้รวมผล แต่พวกเขากำลังจริง ๆ ไม่ถูกต้อง* Internet Explorer ทำให้มุมมอง แต่ไม่สามารถแสดงแบบอักษรที่กำหนดเอง* โครเมี่ยมบนแพลตฟอร์มทั้งสองไม่สามารถแสดงแบบอักษรกำหนดเองของเจไดไม่มีเวลาที่จะตรวจสอบว่า เป็นประสิทธิภาพของเครื่องคอมพิวเตอร์ช้าสุดใน Flash ของ Adobe หรือข้อบกพร่องของฉัน แต่ฉันคาดหวังที่จะเถเร็วพอ สำหรับทั่วไปความแตกต่างระหว่าง HTML และ Flash ในการทดสอบข้อความ นี่คือสิ่งที่ฉันถูกคาดหวัง HTML ถูกสร้างขึ้นสำหรับแสดงผลข้อความ และเป็นหลักฐานเพิ่มเติมว่า เบราว์เซอร์ทำดีที่สุดมือถือ GUIMarkเวกเตอร์และบิตแมปทดสอบได้มีการส่งในรูปแบบขนาดเล็กเพื่อทดสอบบนอุปกรณ์มือถือด้วยความละเอียดขั้นต่ำของ 320 × 480 นี่คือบริเวณที่ผมจินตนาการจะเห็นการปรับปรุงมากกว่า 6 เดือน ผมได้เรียงผลตามวันปล่อยของโทรศัพท์แต่ละทดสอบHTML5 เวกเตอร์ HTML5 บิตเวกเตอร์แฟลชแฟลชบิตแมปปาล์มก่อน C/O เควิน O'SHEA 21.46 32.89 IPHONE 3GS 10.79 12.86 โมโตโรล่า DROID 8.95 12.59 โนเกีย N900 แฟลช 9 9.51 9.65 16.69 19.78NEXUS หนึ่ง 15.86 18.83 HTC HD2 C/O MATT EMORY 10.43 17.59 29.91 37.62โทรศัพท์สองรันโปรแกรมเล่นแฟลชไม่มิใช่หลักฐานเกี่ยวกับประสิทธิภาพการทำงานของแฟลชโดยทั่วไปในพื้นที่เคลื่อน แต่มันโยนข้อสงสัยทันทีเกี่ยวกับการร้องเรียนว่าแฟลชช้าลงบนแขนใช้โทรศัพท์สมาร์ท ในขณะเดียวกัน ถ้าคุณต้องการประสิทธิภาพสูงสุดในเนื้อหาเว็บที่ใช้ HTML5 ปาล์มก่อนและ Nexus

ผลลัพธ์ (ไทย) 3:

guimark Flash , HTML , JavaScript 2 : การเพิ่มขึ้นของ HTML5
5 พฤษภาคม 2010 ฌอน christmann 121 ความคิดเห็นโพสต์โดยฌอน christmann


บทนำ

สองปีที่ผ่านมาผมมีคันต้องเกา " แต่ " อนาคตของเว็บ และทุก บริษัท ใหญ่ ดูเหมือนจะแก้ปัญหาให้เรา ผมพัฒนารุ่นแรกของ guimark ที่จะไม่เพียง แต่ได้รับความเข้าใจที่ดีของเทคโนโลยีที่เกี่ยวข้อง ,แต่ยังให้ลูกค้าผ่าน effectiveui และคนอื่นอะไรอย่างวัดแสดงการทำงานของ runtimes ที่แตกต่างกัน หลังจากปล่อย มันมีการตอบสนองที่ดีจากทั้งชุมชนเทคโนโลยี ตลอดจนวิศวกรแพลตฟอร์มหลายที่สนใจในการแก้ไขปัญหา . มี แต่สองข้อบกพร่องร้ายแรงในการทดสอบนั้นทันที ยืนออก ครั้งแรกการทดสอบคือการอาศัยหนักเกินไปในการแสดงรูปแบบข้อความ ผมแทบจะไม่ได้มีส่วนร่วมเวกเตอร์บิตแมปและด้านข้างของการแสดงผลเครื่องยนต์ ประการที่สอง ทดสอบได้ด้วยการผสมเทียมและนักพัฒนามีแนวโน้มต่อต้านการเพิ่ม API กับกรณีทดสอบจำไม่ได้



วันนี้วิวัฒนาการไปข้างหน้าอย่างรวดเร็ว และเว็บที่แตกต่างกันสัตว์พยายามที่จะส่องแสงไฟบวกในปลั๊กอินเทคโนโลยี และคุณจะโห่ปิดเวที สร้างความสนุกสนานและสิ่งที่โง่ใน HTML5 และคุณจะได้นับร้อยนับพันของผู้เข้าชม ตอกลงหน้าประตูของบล็อกของคุณให้พิจารณาความตายของ Flash มันปฏิเสธไม่ได้เลยว่าเทคโนโลยีใหม่ คือ การยึดรากในพื้นที่เว็บ และอยากจะบอกว่าผมมีคันใหม่เพื่อเริ่มต้น .

guimark 2

ชอบ guimark ครั้งแรก มาตรฐานใหม่นี้ถูกออกแบบมาสำหรับจุดประสงค์ที่จะเผาหลุมใน CPU ของคุณ ผมยังเชื่อว่าโดยสมบูรณ์สูงการแสดงผลท่อ เราสามารถรับความคิดที่ดีของเทคโนโลยีที่เหมาะสมที่สุดสำหรับการทำงาน เนื้อหาบนเว็บ นักพัฒนามีแนวโน้มที่จะเน้นหลักในความเร็วของโปรแกรมภาษาตัวเอง แต่ในความเป็นจริงส่วนใหญ่ของเวลา CPU ของคุณจะใช้เวลาข้างในการภายใน APIs ผมยังเชื่อมั่นว่ามาตรฐานการทดสอบการแสดงผล ประสิทธิภาพ ควรติด sub 60 fps ตัวเลข เกือบทั้งหมดของผู้ใช้บนเว็บวันนี้จะเรียกกับ 60Hz จอ LCD และไม่มีเหตุผลที่จะออกแบบการทดสอบที่ต้องทิ้งข้อมูลกรอบ

ส่วนมาตรฐานใหม่เกาะติดเดิมในทฤษฎีรุ่นนี้แนะนำบางมากต้องการการเปลี่ยนแปลง ครั้งแรก ผมแยก guimark ในการทดสอบแยก 3 : เวกเตอร์บิตแมปและการแสดงผลข้อความ , และฉันพยายามที่จะสร้างกรณีทดสอบเป็นโลกจริงที่เป็นไปได้ ประการที่สอง ได้ดำเนินการทดสอบเหล่านี้ใน HTML5 และ Flash ผมไม่คัดค้านการเพิ่ม Silverlight และ javafx สู่เกณฑ์มาตรฐานคือว่า ผมไม่ได้มีเวลาที่จะสร้างพวกเขาตอนนี้และ บางอย่างบอกฉันว่า ร้อยละขนาดเล็กมากของฝูงชนอินเทอร์เน็ตสนใจผลลัพธ์เหล่านั้นอยู่ดี ( รู้สึกฟรีเปลวไฟในส่วนความเห็นที่ 1 ) สุดท้ายนี้ ผมได้เพิ่มรุ่นมือถือของบางส่วนของการทดสอบ เราเคยได้ยินทั้งหมดจากงบซีอีโอบางอย่างเกี่ยวกับการแสดงโดยเว็บมือถือมาดูกันว่าตัวเลขที่ขึ้น

พออยู่แล้ว ในผลการทดสอบสภาพแวดล้อม .



ทุกการทดสอบด้านล่าง จำนวน 15 เพลง unibody MacBook Pro ด้วย 2.53 GHz Intel Core 2 Duo และ NVIDIA GeForce 9400m บน Mac ข้างฉันวิ่งเสือดาวหิมะกับ เล่นแฟลช 10.0.45.2 ติดตั้ง ทางด้าน PC ฉันมี Windows 7 32bit กับอากาศเปิดและอีกครั้งกับผู้เล่นแฟลช 10.0 .45.2 . สำหรับลินุกซ์ลินุกซ์มิ้นท์ 8 ผมรันซีดีอยู่กับ Firefox และ Flash Player 10.0.45.2 . แต่น่าเสียดายที่วิ่งออกซีดีอยู่หมายถึงไม่มีการเข้าถึงไดรเวอร์ NVIDIA .



นี้เวกเตอร์แผนภูมิการทดสอบมาตรฐานถูกออกแบบมาเพื่อเน้น APIs โดยจำลองแบบเวกเตอร์สต็อกแผนภูมิ การทดสอบทำให้การใช้งานหนักของจังหวะที่เราเติมฉันได้เพิ่มการไล่ระดับสีเติมลงในส่วนผสมเพื่อให้แน่ใจว่าส่วนใหญ่ของเวกเตอร์ APIs ถูกงอ แต่ไม่มีความแตกต่างในผลลัพธ์ดังนั้นฉันดึงพวกเขาออก เพื่อให้ภาพที่สะอาด ในขณะที่แหล่งอาจจะหนักบน JavaScript ด้านความเร็วที่แท้จริงของรหัสยกเว้นผ้าใบวาดสายน้อยกว่า 1 มิลลิวินาที

HTML5 แฟลช 10

7 หน้าต่างInternet Explorer 8.0.7600 N / A หรือ

Chrome Firefox ดาวน์โหลด 15.73 กระทบฝาผนัง 4.1.249 6.41 26

4.0.5 โอเปร่า 12.44 , 10.53 24.77 ทีซาฟารีซาฟารี * 29.5

AVG AVG ( 15.64 ) FPS FPS ( ปี )

4.0.5 4.04 เสือดาวหิมะ Safari 20.55
3
Chrome Firefox ดาวน์โหลด 23.92 5.0.342 2.86 25.48 Opera 10.10 12.22 15.24

AVG ( 5.53 ) FPS
AVG ( 21.29 ลินุกซ์มิ้นท์

) FPS Firefox 3.5.9 14.61

22.88 FPS FPS* Safari บน Windows 7 จะไม่เคลื่อนไหวแผนภูมิก็จะแสดงหนึ่งเฟรมในแต่ละครั้งที่ผมกดลงบนปุ่มของเมาส์ของฉัน

ผลทั้งผ่านสถานที่ สำหรับการทดสอบนี้ ใน HTML5 ด้านโอเปร่าส่งมอบประสิทธิภาพที่ดีที่สุดในทั้งสองแพลตฟอร์ม แฟลชบนคอมพิวเตอร์มีสูงอย่างต่อเนื่อง แต่บน OS X , Chrome จะจุดด้านบน ลินุกซ์ดึงปิดตัวเลขที่ดีแม้จะวิ่งออกซีดีสด .HTML5 บน Mac ข้างต้องตรวจสอบใกล้ชิดนะ เมื่อแรกที่ผมได้ทดสอบ และให้เพื่อนร่วมงานของฉัน จอห์น ซิ เขาเริ่มหั่นเป็นชิ้นๆรหัสเพื่อหาข้อผิดพลาดใด ๆที่ฉันอาจจะทำ สิ่งที่เขาค้นพบก็คือ โดยการเปลี่ยนจังหวะ ขนาดบนบรรทัดจาก 2 พิกเซลต่อ 1 พิกเซล การแสดงใน Safari , Firefox และ Chrome ยิงถึงราคาที่ใกล้ชิดกับแฟลชในขณะที่ Opera อยู่ที่แน่นอนเดียวกัน fps .

ผลลัพธ์ 1 จังหวะ ซาฟารี ( 23.59 FPS Firefox Chrome –– 17.43 FPS FPS 17.12 โอเปร่า– 12.12 FPS
แฟลชพิกเซลบน Mac เช่นเดียวกับ HTML5 และ Flash บน PC ส่วนใหญ่ได้รับผลกระทบจากการเปลี่ยนแปลงนี้ แต่ดึงดูดบางทีกรอบอัตราเดียว โดยเปลี่ยนเป็น 1 พิกเซล จังหวะ ผมไม่แน่ใจว่าสิ่งที่ต้องทำของการค้นพบเหล่านี้ชนิดของข้อผิดพลาดนี้และสิ่งที่ทำให้เกิดผลข้างเคียงที่อาจจะแนะนำโดยซ่อมมันเหรอ ? จะเปลี่ยนให้ทั้ง 1 และ 2 พิกเซลจังหวะวิ่งมาด้วยความเร็วสูง หรือจะพวกเขาจะปักหลักที่ไหนใกล้โอเปร่าตัวเลข



บิตแมปบิตแมปเกมทดสอบการทดสอบถูกออกแบบมาเพื่อจำลองทาวเวอร์กลาโหมเกมประเภท การทดสอบแรงผลักรอบหลายสินทรัพย์บิตแมปที่เคลื่อนไหวในแต่ละเฟรมดูสี่เหลี่ยมทั้งหมดต้องถูกล้างแต่ละเฟรมจะบัญชีสำหรับการเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นในฉาก การทดสอบสนับสนุนจำนวนน้อยที่สุดของ Z ความลึกสั่งแต่ไม่มากเพื่อให้สคริปต์ของผู้ใช้ที่จะใช้เวลามากกว่า 1 มิลลิวินาทีที่จะดําเนินการ ทั้งด้านการต่อต้าน aliasing ขนาดบิตแมปภาพ

HTML5 แฟลช 10

7 Windows Internet Explorer 8.0.7600 N / A ,
Firefox 3.63 4.1.249 10.1 Chrome 5.78 17.7

15.98 โอเปร่า 12.44 , 10.53 13.59 17.23
ซาฟารี 4.0.5 ข้อผิดพลาด * 17.29

AVG AVG ( ช้าๆ ) FPS FPS ( 17.1% )

4.0.5 11.76 เสือดาวหิมะ Safari 13.21

Chrome Firefox ดาวน์โหลด 7.5 14.09 5.0.342 7.4 19.96
Opera 10.10 5.86 14.53

AVG AVG ( 8.13 ) ( 15.44 FPS ลินุกซ์มิ้นท์

) FPS Firefox 3.5.9 บริษัท FPS FPS

10.91 Safari บน PC อีกเพียงแสดงหนึ่งเฟรมต่อ mousedown เหตุการณ์ดังนั้นผลลัพธ์จะเป็นไปไม่ได้ที่จะตรวจสอบ

ผลเหล่านี้เป็นที่น่าแปลกใจจริงๆ Chrome OS X จัดการดันแฟลชที่สูงแม้ Windows ใช้เบราว์เซอร์ ฉันประหลาดใจมาก ฉันสิ้นสุดขึ้นเครื่อง และวิ่งทดสอบอีกครั้งเพื่อให้แน่ใจว่าสิ่งที่ไม่ได้ผิดเราก็เริ่มเห็นแนวโน้มที่ HTML5 เฉลี่ยวิ่งช้าลงสำหรับผ้าใบตามภาพเคลื่อนไหว และผมจะอธิบายว่าทำไมบิตเพิ่มเติมด้านล่างครับ Linux ใช้งานอย่างมากในการทดสอบนี้ แต่เปอร์เซ็นต์ความแตกต่างกระจกแพลตฟอร์มอื่น ๆแน่นอน กับไดรเวอร์ Nvidia ผมจินตนาการว่า ตัวเลขที่แท้จริงน่าจะอยู่ใกล้กับประสิทธิภาพ Mac



คอลัมน์ทดสอบข้อความแบบทดสอบนี้ถูกออกแบบมาเพื่อผลักดันข้อความเค้าโครงและเครื่องมือการแสดงผลใน HTML และ Flash ทดสอบใช้รูปแบบตัวอักษรแนะนำด้วย CSS3 เป็นสตริงตัวอักษร multibyte . นี้คือการทดสอบอย่างน้อยที่ชื่นชอบในกลุ่ม เพราะมันไม่ได้จำลองการทดสอบใด ๆในโลกแห่งความเป็นจริง กรณี อย่างไรก็ตามควรให้ประมาณการที่ดีของวิธีการอย่างรวดเร็วหน้าเต็มรูปแบบของข้อความสามารถคํานวณผมเรียกมันว่า " ภูเขาน้ำแข็ง " ทดสอบตั้งแต่ 80% ของตีใน CPU เกิดขึ้นนอกดู renderable . มันทำงานเพราะแม้ว่าข้อความที่เอ่อล้นออกมานอก textblock ไม่ได้รับการแสดงผลมันไม่ต้องไปคำนวณเพื่อที่จะทราบว่าหลายบรรทัดของข้อความที่สามารถเลื่อนได้ . หน้า HTML ทำนี้ตลอดเวลาเมื่อคุณโหลดเว็บไซต์ที่ มีข้อความด้านล่างพับ

HTML5 แฟลช 10

7 หน้าต่างInternet Explorer 8.0.7600 21.79 * 1.51

Chrome Firefox ดาวน์โหลด 24.7 1.5 4.1.249 23.58 * 1.44

ซาฟารีโอเปร่า 12.44 , 10.53 17.85 1.49 4.0.5 30 * 1.46

AVG AVG ( 22.70 ) FPS FPS ( 1.48 )

4.0.5 27.26 16.24 เสือดาวหิมะ Safari Firefox ดาวน์โหลด 18.71

23.61 Chrome 5.0.342 26.07 * 22.25
Opera 10.10 22.72 15.22

AVG AVG ( 24.91 ) FPS FPS Linux Mint ( 18.25 )

Firefox 3.5.9 25.89 11.67
* ซาฟารียังคงแสดงปัญหาในเครื่องคอมพิวเตอร์ .ซาฟารีรายงาน 30 FPS แต่ดูเหมือนมันจะวิ่งที่ 10 fps ผมได้รวมผล แต่พวกเขาคิดผิดจริงๆ

* Internet Explorer แสดงมุมมอง แต่ไม่สามารถแสดงรูปแบบตัวอักษร .

Chrome บนแพลตฟอร์มทั้งสองไม่สามารถทำให้เจไดแบบอักษรกำหนดเอง .

ผมไม่ได้มีเวลาที่จะศึกษาว่าซุปเปอร์สโลว์พีซีประสิทธิภาพในแฟลชของฉัน ความผิดหรือ Adobe ,แต่คาดว่าจะเปิดในเร็วๆ นี้ สำหรับทั่วไปความแตกต่างระหว่าง HTML และ Flash ในข้อความทดสอบ นี้เป็นสิ่งที่ฉันคาดหวัง HTML ถูกสร้างขึ้นสำหรับข้อความแสดงและนี่คือหลักฐานว่าเบราว์เซอร์ที่ทำนี้ดีที่สุด



guimark มือถือเวกเตอร์บิตแมปและการทดสอบได้รับการ ported ในขนาดเล็กแบบทดสอบบนอุปกรณ์มือถือที่มีความละเอียดอย่างน้อย 320 × 480 .นี้คือพื้นที่ที่ผมคิดจะเห็นมากของการปรับปรุงในอีก 6 เดือน ผมสั่งให้มีผลวันที่ปล่อยของแต่ละโทรศัพท์ทดสอบ

HTML5 เวกเตอร์เวกเตอร์แฟลชแฟลช HTML5 บิตแมปบิตแมป
Palm Pre C / O เควิน โอเช 21.46 32.89
iPhone 3GS 10.79 12.86

Nokia N900 Motorola Droid X มีแฟลช 9 9.51 9.59 16.69 19.78
Nexus หนึ่ง 15.86 18.83
HTC HD2 C / o แมท emory 10.43 17.59 29.91 3762
สองโทรศัพท์มือถือใช้ Flash Player ไม่ได้หลักฐานเกี่ยวกับประสิทธิภาพของแฟลชโดยทั่วไปในพื้นที่มือถือ แต่มันทิ้งความสงสัยทันที อ้างว่า แฟลชบนแขนยึดโทรศัพท์สมาร์ทช้า ในขณะเดียวกันถ้าคุณต้องการประสิทธิภาพที่ดีที่สุดใน HTML5 โดยใช้เนื้อหาเว็บ , Palm Pre และ Nexus