读了高性能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毫秒时间