Use facts to prove the high performance of cssText in js_javascript skills

Copy code The code is as follows:

||

<script> <br>var container = document.getElementById('container' ); <br>function appendElement(){ <br>var ary = []; <br>container.innerHTML = ''; <br>for(var i=0;i<=1000;i ){ <BR> var div = document.createElement('div'); <BR>ary.push(div); <BR>container.appendChild(div); <BR>} <BR>return ary; <BR>} <BR>function test1(){ <BR>var ary = appendElement(); <BR>var d1 = new Date; <BR>for(var j=0;j<ary.length;j ){ <BR>ary[j]. style.width = '50px'; <BR>ary[j].style.height = '50px'; <BR>ary[j].style.backgroundColor = 'gold'; <BR>} <BR>var d2 = new Date; <BR>console.log('Time consuming:' (d2-d1)); <BR>} <BR>function test2(){ <BR>var ary = appendElement(); <BR>var d1 = new Date; <BR>for(var j=0;j<ary.length;j ){ <BR>var sty = ary[j].style; <BR>sty.cssText = 'width:50px;height:50px ;background-color:red;'; <BR>} <BR>var d2 = new Date; <BR>console.log('Time consuming:' (d2-d1)); <BR>} <BR>< /script> <br></body> <br></html> <br> </div> <br>Test 1 and Test 2 both add 1000 divs to the page. <br><br>Test 1 Use the following three lines of code<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="85661" class="copybut" id="copybut85661" onclick="doCopy('code85661')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code85661"> <br>ary[j].style.width = '50px'; <br>ary[j].style.height = '50px'; <br>ary[j].style.backgroundColor = 'gold'; <br> </div> <br>Test 2 Use cssText to do it in one line<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="25182" class="copybut" id="copybut25182" onclick="doCopy('code25182')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code25182"> <br>sty .cssText = 'width:50px;height:50px;background-color:red;'; <br> </div> <br> <p>Test 1 and Test 2 both add 1000 divs to the page. </p> <p>Test 1 Use the following three lines of code<br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="6619" class="copybut" id="copybut6619" onclick="doCopy('code6619')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code6619"> <br>ary[ j].style.width = '50px';<br>ary[j].style.height = '50px';<br>ary[j].style.backgroundColor = 'gold';<br> </div> <br>Test 2 Use cssText to do it in one line<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="88866" class="copybut" id="copybut88866" onclick="doCopy('code88866')"><u>Copy the code</u></a></span> The code is as follows:</div> <div class="codebody" id="code88866"> <br>sty.cssText = 'width:50px;height:50px;background-color:red;';<br> </div> <br>Test code: <br><div class="htmlarea"> <textarea id="runcode15974"> <p>Click here to test directly: </p> <div> <input onclick="test1()" value="测试1" type="button"> || <input onclick="test2()" value="测试2" type="button"> || <input onclick="stop()" value="停止测试" type="button"> <div id="container"></div> </div> </textarea> <br><input onclick="runEx('runcode15974')" type="button" value="运行代码"><input onclick="doCopy('runcode15974')" type="button" value="复制代码"> <input onclick="doSave(runcode15974)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A select all Note: </a>If you need to introduce external Js, you need to refresh to execute </div>]<script type="text/javascript">// <![CDATA[ var container = document.getElementById('container'); function appendElement(){ var ary = []; container.innerHTML = ''; for(var i=0;i<=1000;i++){ var div = document.createElement('div'); ary.push(div); container.appendChild(div); } return ary; } function stop(){ container.innerHTML = ''; } function test1(){ var ary = appendElement(); var d1 = new Date; for(var j=0;j<ary.length;j++){ ary[j].style.width = '50px'; ary[j].style.height = '50px'; ary[j].style.backgroundColor = 'gold'; } var d2 = new Date; alert('耗时：' + (d2-d1)); } function test2(){ var ary = appendElement(); var d1 = new Date; for(var j=0;j<ary.length;j++){ var sty = ary[j].style; sty.cssText = 'width:50px;height:50px;background-color:red;'; } var d2 = new Date; alert('耗时：' + (d2-d1)); } // ]]></script>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn