今天在为软件工程的的作业准备的时候发现代码执行上的一些问题，暴露了我的一些缺陷，先上代码

 <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>内，这也加重了这种误解。

javascript执行上的一点总结的更多相关文章

  1. javascript中的defer和async学习+javascript执行顺序

    一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...

  2. JavaScript 执行机制

    一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...

  3. 转载---JavaScript执行机制

    很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...

  4. 《浏览器工作原理与实践》<11>this：从JavaScript执行上下文的视角讲清楚this

    在上篇文章中,我们讲了词法作用域.作用域链以及闭包,接下来我们分析一下这段代码: var bar = { myName:"time.geekbang.com", printName ...

  5. javascript执行环境（执行期上下文）详解

    javascript执行环境(执行期上下文) 当js控制器(control)进入可执行代码时,控制器会进入一个执行环境,活动的多个执行环境构成执行环境栈,最上面的是正在运行的执行环境,当控制器进入一个 ...

  6. JavaScript执行顺序分析

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...

  7. AGS API for JavaScript 图表上地图

    原文:AGS API for JavaScript 图表上地图 图1 图2 图3 -------------------------------------华丽丽的分割线--------------- ...

  8. 深入理解 JavaScript 执行上下文和执行栈

    前言 如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制.执行上下文和执行栈是 JavaScript ...

  9. JavaScript 执行环境、作用域、内存管理及垃圾回收机制

    前言 JavaScript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存. [原理]找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔( ...

随机推荐

  1. Leetcode_190_Reverse Bits

    ), return 964176192 (represented in binary as00111001011110000010100101000000). 思路: (1)题意为给定无符号32位整数 ...

  2. ActiveMQ系列之三：理解和掌握JMS

    JMS是什么 JMS Java Message Service,Java消息服务,是Java EE中的一个技术. JMS规范 JMS定义了Java 中访问消息中间件的接口,并没有给予实现,实现JMS  ...

  3. ROS探索总结（十三）——导航与定位框架

    导航与定位是机器人研究中的重要部分.         一般机器人在陌生的环境下需要使用激光传感器(或者深度传感器转换成激光数据),先进行地图建模,然后在根据建立的地图进行导航.定位.在ROS中也有很多 ...

  4. objective-c中线程编程一例

    /* print with threads : print every file's first n char contents under the path that pass to this pr ...

  5. python下实现二叉堆以及堆排序

    python下实现二叉堆以及堆排序 堆是一种特殊的树形结构, 堆中的数据存储满足一定的堆序.堆排序是一种选择排序, 其算法复杂度, 时间复杂度相对于其他的排序算法都有很大的优势. 堆分为大头堆和小头堆 ...

  6. webpack安装使用

    一.安装 1.安装node.js,Webpack 需要 Node.js v0.6 以上支持 2.使用npm(软件包管理 )安装webpack (1)全局安装    npm install webpac ...

  7. 面向对象（this的问题二）

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  8. 设置firefox每次访问网页时检查所存网页的较新版本

    我们做技术,经常在写页面的时候需要多次刷新测试,可是浏览器都有自己的缓存机制,一般CSS和图片都会被缓存在本地,这样我们修改 的CSS就看不到效果了,每次都去清空缓存,再刷新看效果,这样操作太麻烦了. ...

  9. 一道面试题引发的思考（C#值类型和引用类型）

    某年某月,笔者去面试招行的一个外包项目,辗转来到面试地点以后,面试官给了我一份试卷,试卷只有两道题目,其中一道是这样的: 阅读以下程序 class Program { struct Point { p ...

  10. Bagging与方差

    在集成学习中,通常认为Bagging的主要作用是降低方差,而Boosting的主要作用是降低偏差.Boosting能降低偏差很好理解,因为其原理就是将多个弱学习器组合成强学习器.但Bagging为什么 ...