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

 <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. android bitmap压缩几种色彩详解

    android中的大图片一般都要经过压缩才显示,不然容易发生oom,一般我们压缩的时候都只关注其尺寸方面的大小,其实除了尺寸之外,影响一个图片占用空间的还有其色彩细节. 打开Android.graph ...

  2. 解决os x下gdb不能调试的问题

    在较新的os x中使用gdb调试程序会发生 Unable to find Mach task port 之类的错误,这是由于新的os x内核禁止未授权的程序随意控制其他进程,如果不用root权限的话, ...

  3. JNI技术简介-android学习之旅（92）

    分为5步 !!!注意本地方法是java中的方法,本地函数指的是c语言中的对应函数 1.在java类中声明本地方法 2.使用javah命令,生成包含jni本地函数原型的头文件 3. 实现jni本地函数 ...

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

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

  5. OpenCV手写数字字符识别(基于k近邻算法)

    摘要 本程序主要参照论文,<基于OpenCV的脱机手写字符识别技术>实现了,对于手写阿拉伯数字的识别工作.识别工作分为三大步骤:预处理,特征提取,分类识别.预处理过程主要找到图像的ROI部 ...

  6. obj-c编程15[Cocoa实例02]:KVC和KVO的实际运用

    我们在第16和第17篇中分别介绍了obj-c的KVC与KVO特性,当时举的例子比较fun,太抽象,貌似和实际不沾边哦.那么下面我们就用一个实际中的例子来看看KVC与KVO是如何运用的吧. 该例中用到了 ...

  7. Sublime Text3激活

    Sublime Text 3激活 最近Sublime Text3总是自动将激活码移除,查了下解决办如下: 首先.修改hosts文件,路径位:C:\Windows\System32\drivers\et ...

  8. Spring Boot 添加jersey-mvc-freemarker依赖后内置tomcat启动不了解决方案

    我在我的Spring Boot 项目的pom.xml中添加了jersey-mvc-freemarker依赖后,内置tomcat启动不了. 报错信息如下: org.springframework.con ...

  9. 《MySQL必知必会》读书笔记_2

    通配符:(尾空格可能会干扰通配符匹配) % 匹配任意字符 _ 匹配任意单个字符 正则表达式:REGEXP 用法就是替换掉LIKE的位置,后面配合正则表达式. 默认不区分大小写,如果区分的话添加关键字B ...

  10. javap

    本词条缺少概述.信息栏.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! javap是jdk自带的一个工具,可以反编译,也可以查看java编译器生成的字节码,是分析代码的一个好工具. j ...