javascript执行上的一点总结
今天在为软件工程的的作业准备的时候发现代码执行上的一些问题,暴露了我的一些缺陷,先上代码
<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执行上的一点总结的更多相关文章
- javascript中的defer和async学习+javascript执行顺序
一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...
- JavaScript 执行机制
一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...
- 转载---JavaScript执行机制
很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...
- 《浏览器工作原理与实践》<11>this:从JavaScript执行上下文的视角讲清楚this
在上篇文章中,我们讲了词法作用域.作用域链以及闭包,接下来我们分析一下这段代码: var bar = { myName:"time.geekbang.com", printName ...
- javascript执行环境(执行期上下文)详解
javascript执行环境(执行期上下文) 当js控制器(control)进入可执行代码时,控制器会进入一个执行环境,活动的多个执行环境构成执行环境栈,最上面的是正在运行的执行环境,当控制器进入一个 ...
- JavaScript执行顺序分析
之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...
- AGS API for JavaScript 图表上地图
原文:AGS API for JavaScript 图表上地图 图1 图2 图3 -------------------------------------华丽丽的分割线--------------- ...
- 深入理解 JavaScript 执行上下文和执行栈
前言 如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制.执行上下文和执行栈是 JavaScript ...
- JavaScript 执行环境、作用域、内存管理及垃圾回收机制
前言 JavaScript具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存. [原理]找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时间间隔( ...
随机推荐
- 链路层 - SLIP,PPP,
最常使用的封装格式是RFC 894定义的格式.图2 - 1显示了两种不同形式的封装格式.图中每个方框下面的数字是它们的字节长度. 两种帧格式都采用48 bit(6字节)的目的地址和源地址( 8 0 2 ...
- TCP连接建立系列 — 连接请求块
连接请求块(request_sock)之于TCP三次握手,就如同网络数据包(sk_buff)之于网络协议栈,都是核心的数据结构. 内核版本:3.6 Author:zhangskd @ csdn blo ...
- 采用UltraISO制作U盘启动盘
采用UltraISO制作U盘启动盘 打开UltralSO,选择"文件"--->"打开",如下图: 图1 打开WIN7操作系统的ISO文件,如下图: 图2 ...
- UML类图的简单梳理
依赖关系 Dependency Class Car{} Class Person{ int a; static int b public void buy(Car c){ int c; .... } ...
- obj-c编程13:归档
这篇归档内容的博文也挺有趣的,笨猫对好玩的东西一向感兴趣啊!如果用过ruby就会知道,obj-c里的归档类似于ruby中的序列化概念,不过从语法的简洁度来说,我只能又一次呵呵了. 下面大家将会看到2种 ...
- jQuery事件控制点击内容下拉
1.设计实例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Django之admin的使用和源码剖析
admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLE ...
- Odoo 学习 【二】Environment 概览
Environment 参考链接: http://odoo-new-api-guide-line.readthedocs.io/en/latest/environment.html#environme ...
- RA layer request failed
新整的Eclipse环境出现这个问题,细化内容是不能connect,后来想起切换Eclipse底层库的事情,然后打开Eclipse的SVN设置.把SVN Client借口由JavaHL改为PureJa ...
- 2013-8:SDCE大会笔记
百度移动云三大开发框架:Clouda,SiteApp,AppBuilder MBaaS解决高性能Server很难的问题 百度开放云的区域运营服务于创业者 Pinterest架构变迁: 互联网就是把线下 ...