Re: [閒聊] 過時的架構

看板Web_Design作者LyinZ (琳子)時間16年前 (2008/07/31 16:11)推噓5(5推 0噓 3→)

留言8則, 5人參與討論串8/11 (看更多)

※ 引述《albb0920 (么柏)》之銘言： : : 推 alpe:好像 innerHTML innerXXX 都不是標準之內的東西 XD 07/31 09:50 : 還真的不是囧" : http://www.w3.org/TR/WCAG20-TECHS/SCR21.html : Description : The objective of this technique is to demonstrate how to use functions of the : Document Object Model (DOM) to add content to a page instead of using : document.write or object.innerHTML. The document.write() method does not work : with XHTML when served with the correct MIME type (application/xhtml+xml), : and the innerHTML property is not part of the DOM specification and thus : should be avoided. If the DOM functions are used to add the content, user : agents can access the DOM to retrieve the content. The createElement() : function can be used to create elements within the DOM. The createTextNode() : is used to create text associated with elements. The appendChild(), : removeChild(), insertBefore() and replaceChild() functions are used to add : and remove elements and nodes. Other DOM functions are used to assign : attributes to the created elements. innerHTML 有一個特性, 是標準 DOM 作法無法達到的, 就是效率. 在程式執行的時候「new (memory allocate)」是一個相當花時間的動作, 而且一次 new 一堆, 會比一個一個 new 省很多時間. 標準 DOM 裡面沒有「一口氣 new 一堆 element」的方法, 而 innerHTML 一次指定好, 就天生是一口氣 new 一堆. 據我所知, innerHTML 是 IE 先提供的功能, 那時候 IE 只有 innerHTML, 沒有類似 createElement/appendChild 這類的; 同時間的 Netscape/Mozilla/Firefox(我搞不清楚那個時候是哪一個 ^^|) 只有類似 createElement/appendChild 這類的 (函數名可能沒有完全一樣, 但性質大概是這樣), 而沒有 innerHTML.. 所以, IE 底層的設計可能較適合 innerHTML, 而 Firefox 比較適合 appendChild, 即使現在他們互相都支援彼此的功能, 但是 IE 對 innerHTML 做得比較好(效率方面), 而 Firefox 對 appendChild 比較好. 我以前在 IE6 和 FF2 上作過測試, 我試了 1000 層 div, 分別用 innerHTML 和 createElement/appendChild 的作法. 速度大概是這樣: (即使在比較適合 createElement 的 FF 上, innerHTML 還是比較快) IE6 innerHTML > FF2 innerHTML > FF2 createElement > IE createElement 剛剛拿到 FF3 來測, 順序還是一樣, 只是 FF3 的 innerHTML 比 FF2 的快了很多. (因為現在我已經在用 FF3 了 XD) /* 修改註: 剛剛發現我測試的程式有一點問題, 所以改了一下重測 (也把 1000 改成 10000); 在 IE6 vs FF3 上是 IE6 innerHTML > FF3 innerHTML > IE6 createElement >> FF3 createElement 費時 4 5 7 30 (心測時間單位 :p) 程式碼: <html> <head> <script> function ByInner(elem){ var html = ''; var i; for(i=0; i<10000; ++i) html = '<div>a' + html + '</div>'; elem.innerHTML = html; alert(3); } function ByCreate(elem){ var i; for(i=0; i<10000; ++i){ elem.appendChild(document.createElement('div')); elem = elem.lastChild; elem.appendChild(document.createTextNode('a')); } alert(3); } </script> </head> <body> <button onclick=ByInner(document.getElementsByTagName('body')[0])>ByInner</button> <button onclick=ByCreate(document.getElementsByTagName('body')[0])>ByCreate</button> </body> </html> */ 現在 javascript 越寫越兇, 越來越耗資源 (GMail 超嚴重) javascript 的執行效率變得越來越重要了. 如果 DOM 不出能夠 bulk createElement 的東西, innerHTML 實在有它無法取代的優勢在. -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.63.25.221 ※ 編輯: LyinZ 來自: 61.63.25.221 (07/31 16:20) ※ 編輯: LyinZ 來自: 61.63.25.221 (07/31 16:21)