javascript执行上的一点总结
2015-04-12 14:45
337 查看
今天在为软件工程的的作业准备的时候发现代码执行上的一些问题,暴露了我的一些缺陷,先上代码
这段代码在FF和chrome中执行均会产生问题,用firebug来调试,发现var s=document.getElementById('he').value;为空,一开始百思不得其解,后来调整了一下顺序改为:
问题得解,其根源其实是我前几天谈到过的,因为web浏览器本质上是个单线程,所以执行js代码会阻塞渲染,这个时候dom树还没建立,自然会出现为空的情况。
按照yahoo优化网站的35条建议,要尽可能的把js代码放在代码的底部,除了可以加快渲染避免用户等待还可以防止此种情况出现。
当然从这个也可以看出来,与操作domtree有关的,要尽可能的放在代码的底部,要等加载完了才能执行,不然就会报错。
当然,很多人都知道,以window.load(){/js代码/}来开始,这的确一劳永逸了,但是其实是使初学者变蠢了,使他们远离了他们所写的,远离了原理。
还有,我经常看到一些书上强调<script></script>标签要放在<head></head>内,这也加重了这种误解。
<html> <head> <script type="text/javascript"> function he(){ var s=document.getElementById('he').value; alert(s);} he(); </script> </head> <body> <input type="button" id="he" value="click" name="he"> <input type="button" id="she" value="y"> </body> </html>
这段代码在FF和chrome中执行均会产生问题,用firebug来调试,发现var s=document.getElementById('he').value;为空,一开始百思不得其解,后来调整了一下顺序改为:
<html> <head> </head> <body> <input type="button" id="he" value="click" name="he"> <input type="button" id="she" value="y"> </body> <script type="text/javascript"> function he(){ var s=document.getElementById('he').value; alert(s);} he(); </script> </html>
问题得解,其根源其实是我前几天谈到过的,因为web浏览器本质上是个单线程,所以执行js代码会阻塞渲染,这个时候dom树还没建立,自然会出现为空的情况。
按照yahoo优化网站的35条建议,要尽可能的把js代码放在代码的底部,除了可以加快渲染避免用户等待还可以防止此种情况出现。
当然从这个也可以看出来,与操作domtree有关的,要尽可能的放在代码的底部,要等加载完了才能执行,不然就会报错。
当然,很多人都知道,以window.load(){/js代码/}来开始,这的确一劳永逸了,但是其实是使初学者变蠢了,使他们远离了他们所写的,远离了原理。
还有,我经常看到一些书上强调<script></script>标签要放在<head></head>内,这也加重了这种误解。
相关文章推荐
- NO.17 【转载】JavaScript程序执行顺序问题总结
- Javascript执行顺序的总结
- JavaScript执行效率总结
- SQL优化——SQL子句执行顺序和Join的一点总结
- Javascript执行效率总结
- Javascript's Event 的一点总结 http://www.playes.net/Blog/242.asp
- JavaScript核心:对象 原型链 构造函数 执行上下文栈 执行上下文 变量对象 活动对象 作用域链 闭包 This 总结
- Javascript执行效率全面总结
- JavaScript程序执行顺序问题总结
- Javascript 作用域链 活动对象 执行环境 与 this 的纠结 总结~
- JavaScript一点总结
- JavaScript 程序执行顺序问题总结
- JavaScript 程序执行顺序问题总结
- Javascript执行效率全面总结
- JavaScript程序执行顺序问题总结
- JavaScript程序执行顺序问题总结
- JavaScript程序执行顺序问题总结(转)
- javascript学习总结:变量强制转换和执行效率
- 优化javascript的执行效率一些方法总结
- SQL子句执行顺序和Join的一点总结