เปรียบมวย Flash vs HTML5 วัดกันจะๆ ด้วยวิดีโอเดียวกันบน YouTube

By mk Founder on Tag: Adobe Flash, Browser, YouTube, HTML5
Adobe Flash

ประเด็นการถกเถียงเรื่อง "Flash กินซีพียู HTML5 ดีกว่า" ยังไม่จบไม่สิ้น คราวก่อน Adobe ขอเถียง "Flash ไม่ได้กินแรงซีพียูมากกว่า" แต่อาจมีสาวกบางค่ายเถียงว่า "เบนช์มาร์คไม่เป็นกลาง" (ฮา) คราวนี้ลองมาดูเบนช์มาร์คจากผู้ทดสอบอิสระ ที่ทดสอบด้วยวิดีโอเดียวกันบน YouTube ให้รู้กันไปเลย

ผู้ทดสอบคือคุณ Jan Ozer ใช้วิดีโอ Rosie tackles the new HP Z800 บน YouTube ซึ่งมีทั้งเวอร์ชันที่เป็น Flash และ HTML5 (ใช้ codec H.264) โดยทดสอบบนเบราว์เซอร์ 4 ตัวคือ Safari, Chrome, Firefox, IE ทั้งบนแมคและวินโดวส์ ในกรณีของ Flash นั้นใช้ทั้ง Flash Player 10.0 และ 10.1

การทดสอบครั้งนี้เขาดูอัตราการใช้งานซีพียูระหว่างเล่นวิดีโอ ใช้คอมพิวเตอร์อีกเครื่องเป็นตัววัด และวัดทั้งหมด 29 ครั้งตลอดการเล่นวิดีโอ จากนั้นจึงนำมาหาค่าเฉลี่ย อ่านวิธีการทดสอบอย่างละเอียดได้จากลิงก์ที่มา

เนื่องจาก YouTube ภาค HTML5 ใช้ codec H.264 ซึ่งมีแค่ Safari กับ Chrome เท่านั้นที่รองรับ (จริงๆ แล้วเฉพาะ Safari รุ่นบนแมคด้วย)

ผลการทดสอบบนแมค

  • Safari/HTML5 - กินซีพียู 12.39%
  • Safari/Flash 10.1 - กิน 32.07%
  • Chrome/HTML5 - กิน 49.89%
  • Chrome/Flash 10.1 - กิน 49.79%
  • Firefox/Flash 10.1 - กิน 42.07%

สรุปว่า Chrome บนแมคนั้นยังมีปัญหาด้านประสิทธิภาพ ไม่ว่าจะใช้อะไรเล่นวิดีโอ ส่วนเบราว์เซอร์ที่ดีที่สุดคือ Safari โดยเฉพาะเล่น HTML5 กินซีพียูเพียง 12.39% เท่านั้น

บน Safari นั้นเห็นชัดเจนว่า วิดีโอตัวเดียวกัน ใช้ HTML5 เล่นแล้วดีกว่าเกือบสามเท่าตัว ในขณะที่ Chrome แทบไม่ต่างกันระหว่างเทคโนโลยีสองตัว

ผมไม่ได้ลงตัวเลขของ Flash 10.0 ด้วย ตามไปอ่านกันเอง แต่บน Safari นั้น Flash 10.1 ดีกว่า 14% ในขณะที่บน Firefox กลับแย่กว่าเดิม 5%

คนของ Adobe ให้ความเห็นว่า Flash 10.1 บน Safari นั้นใช้ Core Animation ทำให้ประสิทธิภาพดีขึ้น ในขณะที่ Firefox นั้นแย่ลง เพราะ Flash ใช้ Quartz 2D แทน QuickDraw เดิมในการวาดหน้าจอ อาจแปลว่าระบบใหม่ยังไม่เข้าที่มากนัก

ผลการทดสอบบนวินโดวส์

  • Safari/HTML5 - เล่นไม่ได้
  • Safari/Flash 10.1 - กิน 7.43%
  • Chrome/HTML5 - กิน 25.66%
  • Chrome/Flash 10.1 - กิน 10.73%
  • Firefox/Flash 10.1 - กิน 6%
  • IE/Flash 10.1 - กิน 14.62%

บนวินโดวส์นั้น Flash 10.1 ดีกว่า Flash 10.0 มากบนทุกเบราว์เซอร์ กรณีของ Firefox นั้นประสิทธิภาพดีขึ้นถึง 73% (เดิมกินซีพียู 22% ลงมาเหลือ 6%)

ส่วนการเทียบ HTML5 vs Flash ทำได้บน Chrome เพียงตัวเดียวเท่านั้น ผลกลับกับบนแมค เพราะ Flash 10.1 บน Chrome ได้ประสิทธิภาพดีกว่า HTML5 บน Chrome ถึง 1.5 เท่า

คนของ Adobe อธิบายว่า การที่ Flash 10.1 บนวินโดวส์มีประสิทธิภาพดีขึ้นอย่างชัดเจน เป็นเพราะว่า Flash รุ่นวินโดวส์สามารถใช้ GPU ช่วยเร่งประสิทธิภาพได้ ในขณะที่บนแมคยังทำไม่ได้ เพราะแอปเปิลไม่อนุญาตให้ Adobe เข้าถึงความสามารถนี้

สรุปว่า

  • Flash กับ HTML5 ยังผลัดกันแพ้ชนะ
  • HTML5 ยังมีปัญหาเรื่อง codec ที่ไม่จบง่ายๆ และถ้าไม่แก้ มันจะเล่นไม่ได้บนทุกเบราว์เซอร์ กลายเป็นจุดอ่อน
  • Flash 10.1 บนวินโดวส์ดีกว่า 10.0 มาก ออกเมื่อไร ควรรีบอัพเกรดโดยด่วน
  • Flash 10.1 บนแมค ยังไม่ดีเท่าที่ควร เพราะการเมืองของแอปเปิลกับ Adobe

ที่มา - Streaming Learning Center, ReadWriteWeb

Hiring! บริษัทที่น่าสนใจ

Carmen Software company cover
Carmen Software
Hotel Financial Solutions
 Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
 KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
 Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
 Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
 Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
 Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
 CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
 Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
 Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
 CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
 Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
 MuvMi (Urban Mobility Tech Co.,Ltd.) company cover
MuvMi (Urban Mobility Tech Co.,Ltd.)
Shape the future of urban mobility towards affordable, clean, and safe solutions
 T.N. Digital Solution Co., Ltd. company cover
T.N. Digital Solution Co., Ltd.
TNDS has been involving in every first move of banking’s major digital transformation.
 KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
 Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
 Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
 REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
 H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
 The Gang Technology Co., Ltd. company cover
The Gang Technology Co., Ltd.
We're a Digital Agency that helps our customers transform their business into digital with ease.
 LTMH company cover
LTMH
LTMH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
 Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
 Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
 MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
 Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
 LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
 LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

latesleeper Fri, 12/03/2010 - 10:00

GPU บน Mac พัฒนาช้าจะตาย (เปลี่ยนอะไรก็ไม่ได้มากด้วย)
มันเป็นข้อเสียตามข้อจำกัดที่น่าเศร้าพอสมควร

บางทีเห็นคนเค้าเล่นเกมกันบน Win ก็แอบอิจฉาเหมือนกันนะ (ฮา-ฮา)

John Fri, 12/03/2010 - 10:41

Apple มี API สำหรับให้โปรแกรมทั่วไปเรียกใช้งาน GPU ได้อัตโนมัติครับชื่อ OpenCL เป็นมาตราฐานของทางฝั่งแอปเปิ้ลทุกโปรแกรมใช้ตัวนี้ แต่ทาง ADOBE ไม่ยอมใช้ตัวนี้จะให้ทำ API ที่ทาง Adobe อยากจะใช้ให้

McKay Fri, 12/03/2010 - 11:11

คนละเรื่องกันแล้วครับ API ที่ Flash(as plug-in) เรียกใช้ได้บน Mac มี 3 ตัวในตอนนี้และแต่ละ API นั้น browser จะต้องรองรับด้วยคือ CoreAnimation(Safari+Webkit nightlies), Quartz 2D(ทุกตัว), QuickDraw(ทุกตัว)

OpenCL เป็น framework ตัวหนึ่งซึ่งจะถูกเรียกใช้โดยโปรแกรม และไม่สามารถเรียกใช้งานโดย plug-in บน browser ได้ เอาเข้าจริงๆถึงเรียกใช้ OpenCL ได้ ผลก็คงไม่ต่างไปจาก CoreAnimation เพราะมันก็ไม่ใช่ GPU accelerated video decoding API อยู่ดี

และเรื่องนี้ก็ไม่ได้มีแต่ Adobe เพียงเจ้าเดียวที่บ่น Apple

McKay Fri, 12/03/2010 - 13:49

Core Animation เรียกใช้ Core Video ได้ครับ(ถ้าจะพูดให้ถูกคงต้องบอกว่าเป็นโมเดลส่วนหนึ่งของ Core Animation หรืออีกชื่อหนึ่งคือ QuartzCore.framework)

อย่างไรก็ตาม Core Video เป็นการทำงานในส่วน rendering(buffering, rendering, composition) เท่านั้น ไม่ได้เป็นการ decoding ซึ่งครับ

McKay Fri, 12/03/2010 - 09:52

แสดงว่า CoreAnimation ให้เรียกใช้ GPU acceleration ได้ แต่ไม่ถึงขั้น GPU accelerated video decoding สินะ

Jonix Fri, 12/03/2010 - 10:09

จ๊อบส์ ที่กล่าวหาว่า Adobe ขี้เกียจ จะว่ายังไงล่ะครับ
เลิกกั๊ก API ดีกว่ามั้ง เพื่อผลประโยชน์แก่ชาวโลก ไม่เฉพาะ Adobe

jirayu Fri, 12/03/2010 - 11:07

ส่วนตัวผมยังไม่ได้ลอง บนหมูทุบ แต่เคยเห็นภาพเปรียบเทียบว่าแฟลชยังแสดงผลได้สวยกว่า ตรงนี้คงต้องรอจนกว่า HTML5 จะได้มตารฐานกลาง

ปล.จะแขวะ "ใคร" เล่นกันเฉพาะในคอมเมนต์ก็พอมั๊งครับ ?

ปล.ไม่แน่ใจว่าเบนช์มาร์ค หรือคนนำเสนอเบนช์มาร์คกันแน่ ที่ไม่เป็นกลาง ?
ปล.mobile web น่าจะมี remember login นะครับ

mk Fri, 12/03/2010 - 13:14

ถ้าไม่ดักเอาไว้ก่อน เราจะเจอปรากฎการณ์ "Opera เร็วที่สุด" แต่พอ benchmark ออกมาแล้วแพ้ ก็จะโวยวายว่า "ใช้จริงแล้วเร็วกว่า" น่ะครับ

jirayu Fri, 12/03/2010 - 11:12

ต่อจากข้างบนนิดนึง mobile web น่าจะมีแก้ไขคอมเมนต์ด้วยนะ แอบเสียดายเล็ก อยากเล่นมุกเบนช์มาร์คไม่เป็นกลาง หรือมาร์คไม่เป็นกลางต่ออีกอัน แต่ไม่อยากโพสต์ใหม่ :P

animateex Fri, 12/03/2010 - 11:20

ผมว่าการโยนบาปไปให้ GPU มันไม่ค่อยถูกนะ

มันเหมือนกับว่านับวัน Flash ยิ่งซับซ้อนก็ยิ่งกินระบบ แต่แทนที่จะทำ codec ที่ดีขึ้น ดันต้องไปพึ่ง GPU แทนโดย adobe ไม่ต้องเหนื่อยมาก

ทีนี้มันก็จะกลายเป็นลูกโซ่เรื่อง hardware การกินไฟ ราคา ที่ไม่จบสิ้นเพราะคนเขียน Flash ก็เขียนใหญ่ขึ้นกินระบบขึ้นทุกวันเช่นกัน

สำหรับผมคำว่า Adobe ขี้เกียจ นะสมควรแล้วละ

แค่ซื้อการ์จอที่รองรับ DX หรือ Engine ใหม่ๆ ก็เบื่อแล้ว อย่าให้ถึงขั้นที่ว่าการ์ดรุ่นี้รองรับ Flash 11 เลย ....

tekkasit Fri, 12/03/2010 - 12:15

มันก็จะว่า Adobe ผิดก็ไม่เชิง คนผลิตต้องการทำชิ้นงานออกมาให้สวยเด้งเตะตา ถูกใจลูกค้า ที่ต้องการทั้งถูก และเร็ว เครื่องมือมันทรงพลังทำงานยากๆได้ง่าย แต่ไม่เลือกฟีเจอร์ใช้งานอยากเหมาะสม และพอปั่นเสร็จหมาดๆก็รีบโยนออกไป ไม่นั่งอ็อปติไมซ์กันหรอก ถ้าลูกค้ารับได้ ไม่บนก็โอเค

ใครล่ะ อยากแสดงวิดิโอสวยๆคมกริบ ใครล่ะอยากได้อนิเมชั่นวี๊บๆ ใครล่ะอยากได้กึ่งโปร่งใส เสียง FM Quality ไม่เอา ต้องเสียงใสกิ๊ง แล้วคนจ่ายเงิน นั่งดูรึเปล่า เฮ้ นี่กินซีพียูไป 50% บนเครื่อง Intel Quad Core ไม่ได้ๆ ต้องเหลือ 10% เฟ้ย .... ไม่เคยเห็น

ปลูกอะไร ได้อย่างงั้นครับ

lew Fri, 12/03/2010 - 12:37

เขียนโปรแกรมให้ "รองรับ" การทำงานบน GPU เป็นคนขี้เกียจ

โอ้โห หาคนขี้เกียจอย่างนี้ได้ที่ไหนครับ ผมว่าใน Blogone Jobs หากันอยู่หลายคน

JavaDevil Fri, 12/03/2010 - 13:17

ไม่อยากเป็นคนขี้เกียจเลย แต่ชอบ GPU นะขอขี้เกียจหน่อยละกัน
และอีกอย่างถ้า adobe สามารถทำได้ทุก platform จริงๆละก็ สนุกแน่นอน (แต่ๆอ่านคร่าวๆ แล้วคนที่พัฒนาโปรแกรมให้ทำงานบน mobile ด้วยต้อง optimize ขนาดหนัก เช่น กรุณาอย่าใช้ memory เกิน 50 mb) สู้ๆนะพวกขี้เกียจ

mk Fri, 12/03/2010 - 13:51

ผมอ่านคอมเมนต์ของคุณแล้ว ขอเปลี่ยนเป็น

มันเหมือนกับว่านับวัน Quake ยิ่งซับซ้อนก็ยิ่งกินระบบ แต่แทนที่จะทำ engine ที่ดีขึ้น ดันต้องไปพึ่ง GPU แทนโดย id Software ไม่ต้องเหนื่อยมาก

ทีนี้มันก็จะกลายเป็นลูกโซ่เรื่อง hardware การกินไฟ ราคา ที่ไม่จบสิ้นเพราะคนเขียน Quake ก็เขียนใหญ่ขึ้นกินระบบขึ้นทุกวันเช่นกัน

สำหรับผมคำว่า id Software ขี้เกียจ นะสมควรแล้วละ

rabbitch Fri, 12/03/2010 - 23:53

นี่แหละเหตุผลที่ไม่เล่นเกม PC ... ใครมันจะไปอัพเกรดเครื่องตามเกมทัน ว่าแล้วไปเอา Galaga มาเล่นดีกว่า

lawender Fri, 12/03/2010 - 14:06

แล้วจะพัฒนา hardware มาทำพรื้ออะไรล่ะน้องชาย
เค้าทำ hardware มาก็พอยังไงมันมันทำงานเร็วกว่า

"เหมือนมี BTS แล้วมาบอกว่า จะมาใช้ BTS ทำไม ทำไมไม่หาทางเดินให้เร็วกว่าเดิม ขี้เกียจนะเนี่ย"

rattananen Fri, 12/03/2010 - 15:58

ไม่เห็นด้วยกับคุณ animateex ครับ
เพราะ GPU ชื่อมันก็บอกแล้วครับว่าเกิดมาเพื่อทำงานด้าน Graphic โดยเฉพาะครับ
ใน GPU มีชุดคำสั่งเพื่อใช้ในงาน image processing อยู่แล้วครับ
แต่ CPU มันไม่มี ฉะนั้นเวลาจะใช้ CPU เพื่องาน image processing จะต้องเขียน library เพิ่มครับ
ทำให้ CPU ประมวลผลภาพได้ช้ากว่า GPU ครับ
ถ้าผมเป็น abobe ผมก็เลือกที่จะเขียนโปรแกรมประมวลผลโดยใช้ GPU ครับ

เพราะเขียนก็สั้นกว่า, ประสิทธิภาพก็ดีกว่า หรือเป็นแบบนี้คุณยังจะเลือก CPU ล่ะครับ?

การที่เราเลือกของสิ่งใดโดยไม่มี bias จะทำให้เราได้ของทีี่ดีที่แท้จริงนะครับ

ampz Sat, 13/03/2010 - 11:05

thin app กับ rich app มันต่างกัน

มันขึ้นอยู่กับว่าจะใช้งานอะไร ไม่มีอะไรที่ดีที่สุดหรือแทนกันได้หมดหรอก เหมือนสมองซีกซ้ายกับซีกขวาแหละ

McKay Fri, 12/03/2010 - 14:09

เสร็จเรื่อง video บน Flash Player แล้วคงไปกลับไปแก้ Flash(โปรแกรม) กันไม่ให้นักพัฒนาใช้ฟีเจอร์ต่างๆพร่ำเพรื่อด้วยนะอย่าลืม - -

แต่เห็นคุณ mr_tawan บอกว่า AS3 เร็วกว่า AS2 มาก แสดงว่าต้องให้คนเขียนโดยใช้ AS3 กันมากขึ้นสินะ

JavaDevil Fri, 12/03/2010 - 16:49

เร็วกว่าจริงจังครับ code loop 10000 ทุกอย่างเหมือนกัน ทั้ง code และ environment จะได้เวลาที่ต่างกันอย่างแรง
AS3 ~ 1ms
AS2 ~ 30ms
ตอนนี้ก็ยังงงว่าทำไม

jirayu Fri, 12/03/2010 - 14:52

@mk ผมว่าโพสต์ข่าวเสร็จ รีบมาดักในคอมเมนต์แรกก็ไม่น่าถึงตายนะครับ ?

เอาเถอะครับ ยังไงผมก็อาจจะพูดเตือนพี่ไม่ได้นัก แต่ก็เก็บไปพิจารณาด้วยนะครับ ว่าแขวะตั้งแต่ในข่าว มันสมควรหรือไม่ แค่ย้ายมาแขวะในคอมเมนต์แทน จะตายไหม ?

ปล.ขอโทษที mobile web มัน reply comment ไม่ได้

ปล.ผมเองก็เคยพูดไว้บ่อยๆ แค่ว่า "ส่วนติดต่อผู้ใช้" ของ Opera ทำงานได้ไหลลื่นที่สุดแฮะ (ซึ่งส่วนนี้แหละ ที่ทำให้มีความรู้สึกว่า Opera เร็วกว่า)

mk Fri, 12/03/2010 - 22:20

คุณพูดกับผมแรง ผมไม่มีปัญหาหรอกครับ

แต่ที่ผมมีปัญหามากๆ คือ พวกที่มีผลการทดสอบที่เป็นวิทยาศาสตร์ออกมา แล้วไม่ยอมรับ อ้างโน่นนี่ เช่น การทดสอบไม่เป็นกลาง พอบอกให้ทำการทดสอบแบบ หรือแสดงข้อมูลที่ตัวเองคิดว่าเป็นกลางออกมา ก็ไม่ยอมทำ

jirayu Sat, 13/03/2010 - 00:18

คือผมก็พยายามบันทึกวิดีโอการใช้งานนะ (อย่างที่ผมบอกคือผมไม่ได้เทียบความเร็วเอ็นจิ้น แต่เทียบความเร็วของส่วนติดต่อผู้ใช้) แต่ว่าด้วยว่าเครื่องผมแก่ มันเลยกระตุกไปหมดทุกตัวเลย

JPorsh Thu, 08/07/2010 - 16:03

เป็นอีก ๑ รายการที่คอมเม้นต์อ่านแล้วยาวมาก เพลินๆเหมือนอ่านเว็บดราม่าเลย