- From: Tim Streater <tim@clothears.org.uk>
- Date: 19 Oct 2013 18:03 +0100
- To: Boris Zbarsky <bzbarsky@MIT.EDU>
- Cc: whatwg <whatwg@lists.whatwg.org>
- Message-Id: <20131019170308.C3044984268@zapata.dreamhost.com>
On 18 Oct 2013 at 22:56, Boris Zbarsky <bzbarsky@MIT.EDU> posted, inter alia, this code:
> [1] The testcase:
>
> <!DOCTYPE html>
> <script>
> document.write("<svg id='root' width='0' height='0'>");
> for (var i = 0; i < 100; ++i) {
> document.write("<rect/>");
> }
> document.write("<rect id='test'/>");
> document.write("</svg>\n");
> </script>
> <pre><script>
> var node;
> var count = 200000;
> function doTests(root, elementId, descQS, descQSNoConcat, descGEBI) {
> var start = new Date;
> for (var i = 0; i < count; ++i)
> node = root.querySelector("#" + elementId);
> var stop = new Date;
> document.writeln(descQS + ((stop - start) / count * 1e6));
> var start = new Date;
> for (var i = 0; i < count; ++i)
> node = root.querySelector("#test");
> var stop = new Date;
> document.writeln(descQSNoConcat + ((stop - start) / count * 1e6));
> var start = new Date;
> for (var i = 0; i < count; ++i)
> node = root.getElementById(elementId);
> var stop = new Date;
> document.writeln(descGEBI + ((stop - start) / count * 1e6));
> }
> var root = document.getElementById("root");
> var start = new Date;
> for (var i = 0; i < count; ++i)
> node = document.getElementById("test");
> var stop = new Date;
> document.writeln("document.getElementById: " + ((stop - start) /
> count * 1e6));
> doTests(root, "test",
> "In-tree querySelector: ",
> "In-tree querySelector, no string concat: ",
> "In-tree getElementById: ");
> root.remove();
> doTests(root, "test",
> "Out-of-tree querySelector: ",
> "Out-of-tree querySelector, no string concat: ",
> "Out-of-tree getElementById: ");
> </script>
I've tested this here on five browsers and it runs to completion Ok apart from iCab, which didn't like root.remove so I did that bit longhand. But I'm left confused. The other day I ranted about needing to use a document fragment and having to use querySelector on a table body. Now this code appears to imply that I need neither and could have used getElementById all along, since your application of getElementById above is mostly not to a document. I'm sure that when I tested that, a year or so back, it didn't work. Could you elucidate?
Thanks,
--
Cheers -- Tim
Received on Saturday, 19 October 2013 17:03:37 UTC