innerHTML VS DOM

innerHTML VS DOM อะไรเร็วกว่ากัน?
คุณ Gleb Lebedev ได้ เขียนblog http://www.gloo.ru/blogs/gloom.dhtml_javas…_l_en.wiki.aspx เกี่ยวกับการทดสอบ innerHTML VS DOM ระหว่าง FF 1.5, IE 6, and Opera 9! ด้วยเครื่อง Acer notebook , Microsoft Windows XP x64 Pro, AMD Turion 64 x2 Mobile, 1.60GHz, 1.37GB Ram.

ผลการทดสอบ

innerHTML property


DOM .createElement javascript code


DOM .cloneNode javascript code


FF เร็วกว่า IE อันนี้ไม่น่าแปลกใจ……….. แต่ Opera นี่มันเร็วกว่าชาวบ้านเยอะจัง!!

และ Windows 64 Bit & IE 64bit ไม่ได้ช่วยให้ JavaScript ทำงานเร็วขึ้น

น่าเสียดาย คุณ Gleb Lebedev ไม่มี Safari เลยไม่ได้ทดสอบ ใครมีก็ช่วยทดสอบหน่อยแล้วกันครับ
ที่หน้าเพจ http://www.gloo.ru/app/jsbenchmarks/DHTMLBenchmark.aspx

สำหรับผม
FF (Thai Firefox Community Edition, 1.5.0.7) 32bit
Result: node.innerHtml=… 354.4 377.1 375.7 377.1 363.3
Result: document.createElement(‘… = 41.5 106.6 107.6 110.6 108.6
Result: document.cloneNode(‘… = 109.5 100.7 108.6 108.6 107.6


IE 6.0.2900 32bit
Result: node.innerHtml=… 184.6 141.2 120.4 97.7 81.9
Result: document.createElement(‘… = 33.6 30.6 28.2 27.2 17.5
Result: document.cloneNode(‘… = 25.8 23.7 26.7 25.7 21.7

อ้อ ใครมี IE 7, Safari หรือ Browser อื่นๆ ช่วยทดสอบก็ดีนะครับ

Links
http://www.gloo.ru
DHTML JavaScript Benchmark (DOM and innerHTML)

[นาย อภิศักดิ์ ชนชนะกุล]

เห็น ๆ ก็DOMกินขาดรึปล่าวครับ

[เขียนเมื่อ 22 ต.ค. 2549 13:53 น.22 ต.ค. 2549]

รู้น้อยครับ ไม่เข้าใจ

ทดสอบความเร็ว

ความเร็วของการทำงานชนิดไหน? อะไรครับ?

ความเร็วออกมาเป็นหน่วยอะไรครับ ทำไมกราฟ บอกแค่ xxx per second?

 อยากรู้ครับ กรุณาด้วย

[Patrickz 2.0]

เป็นการทดสอบความเร็วเฉพาะการประมวลผลของ innerHTML VS DOM ครับ  ซึ่งไม่ได้หมายความว่า Browser ใดจะทำงาน"โดยรวม" เร็วกว่ากัน

 เป็นที่รู้กันว่า JavaScript มีความเร็วในการประมวลผลช้า  ดังนั้นคุณ Gleb Lebedev จึงทดสอบว่า ระหว่าง innerHTML และ DOM อะไรจะเร็วมากกว่ากัน

การทดสอบใช้วิธีวนรอบและเขียนข้อความ ด้วยการอ้างอิง DOM และ innerHTML

เมื่อทราบว่า innerHTML มีความเร็วในการทำงานมากกว่า  จะมีประโยชน์ในการเลือกใช้งาน โดยเฉพาะ นักพัฒนาที่ใช้ Ajax

ลองศึกษาเรื่อง HTML, DHTML, JavaScript, DOM ครับ

[นาย อภิศักดิ์ ชนชนะกุล]

่อ่อครับเข้าใจขึ้นมาหน่อยนึงแล้วครับ ขอบคุณครับ

[เขียนเมื่อ 19 ม.ค. 2550 12:05 น.19 ม.ค. 2550]

เอาผลไออี7กับff2.0มาให้ครับ

ff -

Result: node.innerHtml=... 272.0 143.0 125.0 131.0 116.0

Result: document.createElement(‘… = 103.0 82.8 50.0 53.0 31.6  <div id="divResult3">Result: document.cloneNode(‘… = 101.0 105.0 100.0 22.0 107.0</div><div id="divResult3"> </div><div id="divResult3">ie7 -</div><div id="divResult1">Result: node.innerHtml=… 294.0 265.0 264.0 246.0 242.0</div>Result: document.createElement(‘… = 95.0 100.0 90.0 90.0 78.0
<div id="divResult3">Result: document.cloneNode(‘… = 103.0 99.0 94.0 92.0 87.0</div><div id="divResult3"> </div><div id="divResult3">ie7ประมวลเร็วกว่าffครับ ไม่น่าเชื่อ </div><p> </p>

[เขียนเมื่อ 27 มิ.ย. 2550 16:57 น.27 มิ.ย. 2550]

IE 7
Result: node.innerHtml=… 227.0 253.0 302.0 286.0 274.0
Result: document.createElement(‘… = 103.0 101.0 96.0 92.0 89.0
Result: document.cloneNode(‘… = 105.0 100.0 97.0 93.0 89.0


FF 2
Result: node.innerHtml=… 313.0 285.0 256.0 342.0 154.3
Result: document.createElement(‘… = 105.0 121.0 115.0 121.0 117.0
Result: document.cloneNode(‘… = 123.0 118.0 125.0 115.0 122.0


Safari 3 for windows
Result: node.innerHtml=… 1614.0 1638.0 1667.0 1658.0 1655.0
Result: document.createElement(‘… = 470.0 469.0 435.0 486.0 454.0
Result: document.cloneNode(‘… = 269.6 387.0 276.0 325.0 316.0


Netscape 9
Result: node.innerHtml=… 400.0 412.0 397.0 404.0 404.0
Result: document.createElement(‘… = 108.0 124.0 125.0 124.0 125.0
Result: document.cloneNode(‘… = 116.0 109.0 124.0 120.0 118.0


Safari กินขาด