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

 <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. 使用钩子参与到TCP拥塞事件的处理中

    TCP定义了几个拥塞事件,当这些事件发生时,我们可以通过TCP的拥塞控制算法,调用自定义的处理函数, 来做一些额外的事情的.也就是说,我们可以很简便的参与到TCP对拥塞事件的处理过程中. Author ...

  2. C# / VB.NET合并PDF指定页

    在前面的文章中,我们已经知道如何合并.拆分多个PDF文件,在这篇文章中的合并.拆分PDF文档主要是以方便文档管理的目的来操作文档,在文档查阅.管理及存储上很方便实用.但是我们如果想要合并多个文档中的部 ...

  3. Course4-Python ftp/ssh

    1. ftp Python 自带有模块支持ftp. 可以参看一下代码. #!/usr/bin/env python import sys import os import time import ge ...

  4. AngularJs 指令directive之require

    controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require An ...

  5. Spring Cloud 入门教程 - 搭建配置中心服务

    简介 Spring Cloud 提供了一个部署微服务的平台,包括了微服务中常见的组件:配置中心服务, API网关,断路器,服务注册与发现,分布式追溯,OAuth2,消费者驱动合约等.我们不必先知道每个 ...

  6. 什么才是java的基础知识？

    近日里,很多人邀请我回答各种j2ee开发的初级问题,我无一都强调java初学者要先扎实自己的基础知识,那什么才是java的基础知识?又怎么样才算掌握了java的基础知识呢?这个问题还真值得仔细思考. ...

  7. java并发包分析之———Atomic类型

    一.何谓Atomic?   Atomic一词跟原子有点关系,后者曾被人认为是最小物质的单位.计算机中的Atomic是指不能分割成若干部分的意思.如果一段代码被认为是Atomic,则表示这段代码在执行过 ...

  8. easyui 在编辑状态下，动态修改其他列值。

    首先是自定义了一个方法uodateColumn更新列值 /** *自定义的修改列值方法 */ $.extend($.fn.datagrid.methods, { updateColumn: funct ...

  9. MTCNN人脸检测 附完整C++代码

    人脸检测 识别一直是图像算法领域一个主流话题. 前年 SeetaFace 开源了人脸识别引擎,一度成为热门话题. 虽然后来SeetaFace 又放出来 2.0版本,但是,我说但是... 没有训练代码, ...

  10. Javascript二（函数详解）

    一.函数            Javascript是一门基于对象的脚本语言,代码复用的单位是函数,但它的函数比结构化程序设计语言的函数功能更丰富.JavaScript语言中的函数是"一等公 ...