[removed] vs appendChild

问题:

Is there a difference in load \ execution time between the following two ways of adding a script to a page ?

<script>
document.write('<script src=someScript.js></script>');
</script>

vs this:

<script>
var s=document.createElement('script');
s.src='someScript.js';
document.body.appendChild(s);
</script>

assuming both are added at the same location on the page (before the closing body tag).

Any info is appreciated!

Edit: Thanks all for the comments and answers. I'm actually looking for specific information on differences in load time and\or execution (if there are any?). Also, I can place both while the DOM is still being parsed. Thanks again for any pointers on this!!

回答1:

I came across this while researching for the same. After some testing, I conclude that, yes, there is a major difference between those two methods. On modern browsers, this is not so much on the loading or execution time but the sequence in which the scripts are being evaluated. For example, if you have the following:

someScript.js

console.log('2');

index1.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.write(script.outerHTML);
</script>
<script>
console.log('3');
</script>

index2.htm

<script>
console.log('1');
 var script = document.createElement('script');
 script.src = 'someScript.js';
 document.body.appendChild(script);
</script>
<script>
console.log('3');
</script>

Running index1.htm on your console will give you the sequence "1, 2, 3". Running index2.html will give you the sequence "1, 3, 2" instead. If there are external scripts being requested, these will load ahead of the dynamically requested someScript for both methods.

Important thing to note is the order of execution. As Jack noted in the comment, using document.write is frowned upon. This is true if your scripts are not located at the end of the html document as it will block the rendering of your webpage. I am not so sure, if this is still the case if your scripts are at the bottom though.

Nevertheless, you can still use a callback function to enforce order in the execution of javascript.

回答2:

document.write() writes in the document where it is executed.
Whereas appendChild appends the element to the specified element.