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

 <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. 基于MT6752/32平台 Android L版本驱动移植步骤

    基于MT6752/32平台 Android L版本驱动移植步骤 根据MK官网所述,在Android L 版本上Turnkey ABS 架构将会phase out,而Mediatek Turnkey架构 ...

  2. 《ZeroC Ice 权威指南》笔记

    Ice介绍         Ice(Internet Communications Engine)是ZeroC公司的杰作,继承了CORBA的血统,是新一代的面向对象的分布式系统中间件.Ice是RPC通 ...

  3. 面试之路（10）-BAT面试之java实现单链表的插入和删除

    链表的结构: 链表在空间是不连续的,包括: 数据域(用于存储数据) 指针域(用于存储下一个node的指针) 单项链表的代码实现: 节点类 构造函数 数据域的get,set方法 指针域的get,set方 ...

  4. Ubuntu安装java的最简单的命令行方式

    由于经常要安装java,因此 深受其烦! 分为两部: 1. sudo apt-get install openjdk-7-jdk 2. sudo vim /etc/environment 然后把下面的 ...

  5. gcc或clang中消除特定警告的方法

    一般在编译代码时会有相当多的警告信息,尤其当我们使用了-Wall选项的时候.-Wall绝不是像其字面意思一样打开所有警告.不过它打开的警告也相当多了.对于一些我们已知"无害"但仍然 ...

  6. oo第二次博客作业

    多线程协同与同步控制总结 第五次作业-多线程电梯 本次作业是我第一次接触多线程,建立了请求模拟器.调度器和电梯运行三种线程.请求模拟器负责在输入后识别有效请求:调度器在扫描有效请求后将新的请求加入请求 ...

  7. 飞鱼相册笔记(1)----外置SD卡文件夹名称不区分大小写

    飞鱼相册笔记(1)----外置SD卡文件夹名称不区分大小写 在飞鱼相册发布的第一个测试版中,很多用户表示无法查看外置SD卡中的照片.乍一听觉得加个外置SD卡的根目录,然后在扫描所有图片的时候把这个根目 ...

  8. Java小技巧输出26个英文字母

    相信有的童鞋写到过与字母有关的小东西,是否有写过全部的字母呢?26个这么多字母,一个个打会疯掉.所有咱们可以用一个小技巧使用for循环帮我们把26个字母自动搞出来,大家来瞅一眼把! 使用Java遍历2 ...

  9. myeclipse10破解

    原本一直使用eclipse,但是写起web还是不太方便,由于idea使用不太顺手不太爱用.原来一直不能破解,今天迫不得已又拿起myeclipse仔细搞一番.下面是遇到的问题的总结. 不成功原因一:.原 ...

  10. 百度技术沙龙之2013-2&3

    2013年2月2日技术沙龙 商业产品开发------谢马林 业务逻辑加大设计难度 集成难度大 降低学习成本 统一标准化开发模式 面向集成的架构平台 业务复杂,设计抽象的技术支撑不够 抽象6类数据流业务 ...