高性能JavaScript笔记测试

读了高性能javascript部分章节，顺便在项目里测试一下

一:加载和执行

1、<body>闭合标签之前，将所有的<script>标签放到页面的底部。这能确保在脚本执行前页面已经完成了渲染。

未放在底部：测试时间

放在底部渲染：测试时间

加载时间明显缩短。

二、DOM访问与修改

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>性能优化测试例子</title>
<style type="text/css">
 div {
   width : 500px;
   overflow:auto;
   height : 50px;
   background-color : pink;
 }
 
</style>
<script type="text/javascript">
   
   function loop(){
     var d = new Date();
      document.getElementById('start').innerHTML =d.getMinutes()+"分    "+ d.getSeconds()+"秒   "+  d.getMilliseconds()+" 毫秒";
       for(var count=0;count<15000;count++){
           document.getElementById('here').innerHTML +='a';
        }
     var dd = new Date();
      document.getElementById('end').innerHTML =dd.getMinutes()+"分    "+ dd.getSeconds()+"秒    "+  dd.getMilliseconds()+" 毫秒";
   }
  function load(){
     var d = new Date();
      document.getElementById('start2').innerHTML =d.getMinutes()+"分    "+ d.getSeconds()+"秒   "+  d.getMilliseconds()+" 毫秒";
      var content = "";
       for(var count=0;count<15000;count++){
          content +='a';
        }
        document.getElementById('here2').innerHTML += content;
     var dd = new Date();
      document.getElementById('end2').innerHTML =dd.getMinutes()+"分    "+ dd.getSeconds()+"秒    "+  dd.getMilliseconds()+" 毫秒";
   }
 
</script>
</head>
<body onload="loop()"> 
   <h3>优化前例子</h3>
   <div id="here"></div>
   <div id="start"></div>
   <div id="end"></div>
   <input type="button" onclick="load()" stype="width=100px">测试</input>
    <h3>优化后例子</h3>
    <div id="here2"></div>
  <div id="start2"></div>
   <div id="end2"></div>

</body>
</html>

测试结果：

优化前运行15000次需要2 秒多的时间

优化后运行15000次只需要1毫秒时间

posted on 2012-09-13 16:38 justincai 阅读(119) 评论(0) 编辑收藏举报