vision 0.5 【耗时2650ms】
上一个版本中的页面加载速度已经缩短到了2779ms。下面我们对代码进行进一步的优化。
我们看到代码中dom操作，绑定子元素的方法是由下至上包裹，这样的元素绑定方式会相对较慢。
create <TR>
create <TD>
create TextNode
第一步 insert TextNode into <TD>
第二步 insert <TD> into <TR>
第三步 insert <TR> into TBODY
现在我们将元素的绑定顺序颠倒过来，由上至下的包裹绑定元素
create <TR>
create <TD>
create TextNode
第一步 insert <TR> into TBODY
第二步 insert <TD> into <TR>
第三步 insert TextNode into <TD>
| <html> <body > <script defer> function init() { var _table, _tbody, tr, td, text, maxRow, maxCol; var docBody = document.body; var _doc = document; maxRow = 3000; maxCol = 8; _table = _doc.createElement("table"); _table.border = "1"; _tbody = _doc.createElement("tbody"); _table.insertBefore(_tbody, null); docBody.insertBefore(_table, null); for (var i=0; i<maxRow; i++) { tr = _doc.createElement("tr"); _tbody.insertBefore(tr, null); for(var j = 0; j<maxCol; j++){ td = _doc.createElement("td"); text = _doc.createTextNode("Text"); td.insertBefore(text, null); tr.insertBefore(td, null); } } } </script> </body> </html> |
