JavaScript问题01 js代码放在header和body的区别
1 body和header中JavaScript执行的时机
1.1 header中
放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。
坑01:header中的JavaScript只是比页面先加载,但是header中哪些JavaScript并没有执行,只有被调用时才会执行header中那些JavaScript
坑02:header中的JavaScript脚本会在页面加载前执行,事件会在被触发后执行
技巧03:通常外部脚本都是在header中引入
<script src="/js/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
1.2 body中
放在body中的JavaScript代码会在页面加载完成后才进行加载,当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
坑01:body中的JavaScript脚本会按照页面的加载顺序加载执行,事件也会在被触发后再执行
1.3 放在header和body的区别
1.3.1 加载顺序不同
header中的在页面加载之前就会进行预加载,body中的会在按照页面从上到下的顺序进行加载,所以向获取DOM节点这种操作必须在目标节点对应的标签被加载后才可以进行,否则是获取不到的哟。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JavaScriptTest</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet"> <!-- <script src="/js/jquery.js"></script> -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
alert("Hello Boy");
var a = 100;
console.log(a);
var b = document.getElementById("test");
alert("header中获取 -->> " + b);
</script> </head>
<body>
<p>Hello Boy</p>
<script>
var b = document.getElementById("test");
alert("body中获取(PS: id为test的标签还未完成加载) -->> " + b);
</script>
<button id="test">测试按钮</button> <script>
var b = document.getElementById("test");
alert("body中获取(PS: id为test的标签完成了加载) -->> " + b);
</script> </body>
</html>
1.3.2 功能不同
heaer中的通常用来加载一些外部的JavaScript文件,从而提高效率;body中的主要用来实现一些页面内容的动态创建,比如:制作鼠标跟随事件,肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果
1.4 技巧
外部js文件的加载放在header中的<script>标签中
动态创建内容的代码放在body中的<script>标签中
函数放在header或者body中的<script>标签中没有区别
像 alert() console.log() 这些如果放在header中的<script>标签中会在页面加载之前执行,如果放在body中的<script>标签中就会在按照页面的加载顺序进行加载
JavaScript问题01 js代码放在header和body的区别的更多相关文章
- JavaScript之将JS代码放在什么位置最合适
1.放到<head></head>标签里面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- JavaScript代码放在head和body的区别(QRCode生成)
1.在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始. 2.在body中时,直接加载并执行 典型的区别: 如果有不在函数中的执行语句,比如变量初始化,如果在hea ...
- JS代码放在哪里比较好!
在页面上加上<script></script>只有2个地方:head中,body体中 如果外部的JS文件,在head中加,写页面特效js放在body后面. <html&g ...
- JS代码放在head和body中的区别分析
最近一直在忙工作,没有时间来写博客了,不过今天做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同.起初我没在意这个问题,后来一直解决不了,通过上网与查资料问同事,终于我明白了,原来我碰到了这 ...
- javascript 代码放在head和body的区别
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt239 1,在head中时,所代表的functions只加载而不执行,执行是在 ...
- jquery的js代码兼容全部浏览器的解决方法
//以下均可console.log()实验 var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网 ...
- 关于js代码位置的第一次总结
最近在学习dom树节点操作时,发现查找结点总是返回null,原因在于将js代码放在了head里,因为页面是从上往下逐行加载,在还未加载相关节点时当然查找不到,返回值为null. 而对于另一句老生常谈的 ...
- 刷新页面后,让控制台的js代码继续执行
在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...
- QQ空间自动点赞js代码
1.jQuery().each(): each() 方法为每个匹配元素规定要运行的函数. 提示:返回 false 可用于及早停止循环. 函数原型: function(index,element) 为每 ...
随机推荐
- tsne pca 自编码器 绘图(CC2)——一定记得做无量纲化处理使用standardscaler,数据聚类更明显
tsne 数据不做预处理: # coding: utf-8 import collections import numpy as np import os import pickle from skl ...
- oracle for loop 简单
declare i NUMBER; begin loop INSERT INTO emp VALUES(i,i); end LOOP; END;
- 利用wtl的CDialogResize自动调整atl ActiveX控件布局
前言 利用atl 开发activex控件时,如果使用atl复合控件时,acitvex控件上的界面元素不会自动改变大小,如果自己在OnSize中处理每个子控件的布局是一件非常麻烦的事,我们可以借助wtl ...
- Nhibernate系列学习之(二) 简单增删改查
实例中解决方案简单的创建三层架构,符合开发过程中最简单的运用: 1:首先在数据库中创建一个表T_School,脚本如下: USE [TestDb] GO /****** 对象: Table [dbo] ...
- Effective C++ 条款10
令operator=返回一个reference to *this 将operator=返回一个reference是为了什么呢?答案很简单,就是为了实现连锁形式. 什么是连锁形式,如int x,y,z: ...
- CCEditBox
EditBox 创建添加 以及 一些函数参数的解析 #include "GUI/CCEditBox/CCEditBox.h" #include "GUI/CCContro ...
- 统计日志中ip出现的次数
grep -r 'GET /weixin/weixin_izp/index.html' ./chunyun.access.log > ~/access.log cat access.log |a ...
- CodeForces - 156C:Cipher (不错的DP)
Sherlock Holmes found a mysterious correspondence of two VIPs and made up his mind to read it. But t ...
- MySQL实战 | 05 如何设计高性能的索引?
原文链接:MySQL | 05 如何设计高性能的索引? 上回我们主要研究了为什么使用索引,以及索引的数据结构.今天带你了解如何设计高性能的索引. 其中,有这么一个点,说的是 InnoDB 引擎中使用的 ...
- LeetCode Target Sum
原题链接在这里:https://leetcode.com/problems/target-sum/description/ 题目: You are given a list of non-negati ...