Javascript 是否在文档解析之外执行动态创建的脚本？
是否在文档解析之外执行动态创建的脚本 见： 关于动态创建的脚本，作者说： 但是，通过动态创建，它们在文档解析之外执行，因此在下载它们时不会阻止渲染 现在检查此示例： INDEX.PHPJavascript 是否在文档解析之外执行动态创建的脚本？,javascript,html,dynamic,rendering,createelement,Javascript,Html,Dynamic,Rendering,Createelement,是否在文档解析之外执行动态创建的脚本 见： 关于动态创建的脚本，作者说： 但是，通过动态创建，它们在文档解析之外执行，因此在下载它们时不会阻止渲染 现在检查此示例： INDEX.PHP <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> <script> ['script.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script>
['script.js'].forEach( function( src ) {
var script = document.createElement( 'script' );
script.src = src;
script.async = true;
document.head.appendChild(script);
});
// Some other javascript execution, let's say execution delay of 2 seconds.
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 2000 );
</script>
</head>
<body>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
<div id="a5">a5</div>
<div id="a6">a6</div>
<div id="a7">a7</div>
<div id="a8">a8</div>
<div id="a9">a9</div>
<div id="a10">a10</div>
<div id="a11">a11</div>
<div id="a12">a12</div>
<div id="a13">a13</div>
<div id="a14">a14</div>
<div id="a15">a15</div>
<div id="a16">a16</div>
<div id="a17">a17</div>
<div id="a18">a18</div>
<div id="a19">a19</div>
<div id="a20">a20</div>
<div id="a21">a21</div>
<div id="a22">a22</div>
<div id="a23">a23</div>
<div id="a24">a24</div>
<div id="a25">a25</div>
<div id="a26">a26</div>
<div id="a27">a27</div>
<div id="a28">a28</div>
<div id="a29">a29</div>
<div id="a30">a30</div>
<div id="a31">a31</div>
<div id="a32">a32</div>
<div id="a33">a33</div>
<div id="a34">a34</div>
<div id="a35">a35</div>
<div id="a36">a36</div>
<div id="a37">a37</div>
<div id="a38">a38</div>
<div id="a39">a39</div>
<div id="a40">a40</div>
<div id="a41">a41</div>
<div id="a42">a42</div>
<div id="a43">a43</div>
<div id="a44">a44</div>
<div id="a45">a45</div>
<div id="a46">a46</div>
<div id="a47">a47</div>
<div id="a48">a48</div>
<div id="a49">a49</div>
<div id="a50">a50</div>
<script>
alert('We are half way...');
</script>
<div id="a51">a51</div>
<div id="a52">a52</div>
<div id="a53">a53</div>
<div id="a54">a54</div>
<div id="a55">a55</div>
<div id="a56">a56</div>
<div id="a57">a57</div>
<div id="a58">a58</div>
<div id="a59">a59</div>
<div id="a60">a60</div>
<div id="a61">a61</div>
<div id="a62">a62</div>
<div id="a63">a63</div>
<div id="a64">a64</div>
<div id="a65">a65</div>
<div id="a66">a66</div>
<div id="a67">a67</div>
<div id="a68">a68</div>
<div id="a69">a69</div>
<div id="a70">a70</div>
<div id="a71">a71</div>
<div id="a72">a72</div>
<div id="a73">a73</div>
<div id="a74">a74</div>
<div id="a75">a75</div>
<div id="a76">a76</div>
<div id="a77">a77</div>
<div id="a78">a78</div>
<div id="a79">a79</div>
<div id="a80">a80</div>
<div id="a81">a81</div>
<div id="a82">a82</div>
<div id="a83">a83</div>
<div id="a84">a84</div>
<div id="a85">a85</div>
<div id="a86">a86</div>
<div id="a87">a87</div>
<div id="a88">a88</div>
<div id="a89">a89</div>
<div id="a90">a90</div>
<div id="a91">a91</div>
<div id="a92">a92</div>
<div id="a93">a93</div>
<div id="a94">a94</div>
<div id="a95">a95</div>
<div id="a96">a96</div>
<div id="a97">a97</div>
<div id="a98">a98</div>
<div id="a99">a99</div>
<div id="a100">a100</div>
</body>
</html>
试验
['script.js'].forEach（函数（src）{
var script=document.createElement（'script'）；
script.src=src；
script.async=true；
document.head.appendChild（脚本）；
});
//其他一些javascript执行，比如说执行延迟2秒。
var timeWhile=new Date（）.getTime（）；
while（new Date（）.getTime（）-timeWhile<2000）；
a1
a2
a3
a4
a5
a6
a7
a8
a9
a10
a11
a12
a13
a14
a15
a16
a17
a18
a19
a20
a21
a22
a23
a24
a25
a26
a27
a28
a29
a30
a31
a32
a33
a34
a35
a36
a37
a38
a39
a40
a41
a42
a43
a44
a45
a46
a47
a48
a49
a50
警惕（‘我们已经走了一半……’）；
a51
a52
a53
a54
a55
a56
a57
a58
a59
a60
a61
a62
a63
a64
a65
a66
a67
a68
a69
a70
a71
a72
a73
a74
a75
a76
a77
a78
a79
a80
a81
a82
a83
a84
a85
a86
a87
a88
a89
a90
a91
a92
a93
a94
a95
a96
a97
a98
a99
a100
// Count divs, followed by a synchronous delay of 1 second
console.log( 'COUNT DIVS:' + document.body.getElementsByTagName( 'div' ).length );
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 1000 );
// Count divs, followed by a synchronous delay of 1 second
console.log( 'COUNT DIVS:' + document.body.getElementsByTagName( 'div' ).length );
var timeWhile = new Date().getTime();
while( new Date().getTime() - timeWhile < 1000 );
// Synchronous delay of 500 milliseconds, followed by counting the amount of divs
setTimeout( function() {
console.log( 'COUNT DIVS:' + document.body.getElementsByTagName( 'div' ).length );
}, 500 );
//计数divs，后跟1秒的同步延迟
log（'COUNT DIVS:'+document.body.getElementsByTagName（'div'）.length）；
var timeWhile=new Date（）.getTime（）；
while（new Date（）.getTime（）-timeWhile<1000）；
//计数div，然后同步延迟1秒
log（'COUNT DIVS:'+document.body.getElementsByTagName（'div'）.length）；
var timeWhile=new Date（）.getTime（）；
while（new Date（）.getTime（）-timeWhile<1000）；
//同步延迟500毫秒，然后计算div的数量
setTimeout（函数（）{
log（'COUNT DIVS:'+document.body.getElementsByTagName（'div'）.length）；
}, 500 );