javascript执行上的一点总结
今天在为软件工程的的作业准备的时候发现代码执行上的一些问题，暴露了我的一些缺陷，先上代码
1 <html>
2 <head>
3 <script type="text/javascript">
4 function he(){
5 var s=document.getElementById('he').value;
6 alert(s);}
7 he();
8 </script>
9 </head>
10 <body>
11 <input type="button" >
12 <input type="button" >
13 </body>
14
15 </html>这段代码在FF和chrome中执行均会产生问题，用firebug来调试，发现var s=document.getElementById('he').value;为空，一开始百思不得其解，后来调整了一下顺序改为：
1 <html>
2 <head>
3
4 </head>
5 <body>
6 <input type="button" >
7 <input type="button" >
8 </body>
9 <script type="text/javascript">
10 function he(){
11 var s=document.getElementById('he').value;
12 alert(s);}
13 he();
14 </script>
15 </html>问题得解，其根源其实是我前几天谈到过的，因为web浏览器本质上是个单线程，所以执行js代码会阻塞渲染，这个时候dom树还没建立，自然会出现为空的情况。
按照yahoo优化网站的35条建议，要尽可能的把js代码放在代码的底部，除了可以加快渲染避免用户等待还可以防止此种情况出现。
当然从这个也可以看出来，与操作domtree有关的，要尽可能的放在代码的底部，要等加载完了才能执行，不然就会报错。
当然，很多人都知道，以window.load（）{/js代码/}来开始，这的确一劳永逸了，但是其实是使初学者变蠢了，使他们远离了他们所写的，远离了原理。
还有，我经常看到一些书上强调<script></script>标签要放在<head></head>内，这也加重了这种误解。
- 上一篇 »js在html中的加载执行顺序
- 下一篇 »初学HTML5的一点理解