JS代码应该放在head还是放在body中
JavaScript脚本应该放在HEAD里面还是BODY里面呢？
首先你要了解：
HTML代码是从上往下执行，
HTML body中的JS代码，会在整个页面加载完成之后读取，body中的JS脚本会在页面加载完的时候被执行。
HTML head中的JS代码会在页面加载完成之前就读取，head中的JS脚本会在被调用的时候才执行。
但是也要注意，如果HEAD和BODY顺序写颠倒比如：
head内的js如果过大过于复杂，可能会阻塞页面的传输和页面的读取，这类的大块头JS，要尽量想办法精简或者放到页面末端或者特定区块。为了避免head引入的js脚本阻塞读取页面，一般原则是，样式在前面，文档，脚本在最后面。虽然是这么说但是还是有很多JS脚本还是要放在HEAD里面使其预先装载，实现在页面未加载完成情况下就需要完成的工作。
另外有些JS放在HEAD里面可能没法使用，比如我们想定义一个全局对象，而这个对象是页面中的某个按钮时，我们必须将其放入body中，道理很明显：如果放入head，那当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefind。
先看一个例子：
一个二级级联动态下拉列表框，一级分类（即大类别）id="vSort0".
代码如下:
<head>
function changelocation(id)
{…………}
</head>
<body><select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);" style="width:100px;">……省略……</select>
………………
</body>
现在有个js脚本：
代码如下:
<script LANGUAGE= "JavaScript" >
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类，去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表
</script>
那么把这个js脚本放head里面还是body里面呢？
答案是不仅要放到body里面，而且还得放到定义id='vSort0'的列表框后面，因为这个js脚本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，页面加载后顺序执行代码，执行到这个js发现vSort0未定义（即undefind），这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢？对！
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们，如果我们想定义一个全局对象，而这个对象与页面中的某个按钮（等等）有关时， 我们必须将其放入body中，道理很明显：如果放入head，那当页面加载head部分的时候，那个按钮（等等）都还没有被定义（也可以说是还没有被加 载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。
首先你要了解：
HTML代码是从上往下执行，
HTML body中的JS代码，会在整个页面加载完成之后读取，body中的JS脚本会在页面加载完的时候被执行。
HTML head中的JS代码会在页面加载完成之前就读取，head中的JS脚本会在被调用的时候才执行。
但是也要注意，如果HEAD和BODY顺序写颠倒比如：
<html>
<body>
<script type="text/javascript">
alert("in body");
</script>
</body>
<head>
<script type="text/javascript">
alert("in head");
</script>
</head>
</html>
结果是先弹出body，再弹出head. 因为HTML读取是按从上到下读取，先读取到的当然就被先执行了
head内的js如果过大过于复杂，可能会阻塞页面的传输和页面的读取，这类的大块头JS，要尽量想办法精简或者放到页面末端或者特定区块。为了避免head引入的js脚本阻塞读取页面，一般原则是，样式在前面，文档，脚本在最后面。虽然是这么说但是还是有很多JS脚本还是要放在HEAD里面使其预先装载，实现在页面未加载完成情况下就需要完成的工作。
另外有些JS放在HEAD里面可能没法使用，比如我们想定义一个全局对象，而这个对象是页面中的某个按钮时，我们必须将其放入body中，道理很明显：如果放入head，那当你定义的时候，那个按钮都没有被加载，可能获得的是一个undefind。
先看一个例子：
一个二级级联动态下拉列表框，一级分类（即大类别）id="vSort0".
代码如下:
<head>
function changelocation(id)
{…………}
</head>
<body><select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);" style="width:100px;">……省略……</select>
………………
</body>
现在有个js脚本：
代码如下:
<script LANGUAGE= "JavaScript" >
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类，去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表
</script>
那么把这个js脚本放head里面还是body里面呢？
答案是不仅要放到body里面，而且还得放到定义id='vSort0'的列表框后面，因为这个js脚本中有document.form4.vSort0.selectedIndex，如果放到head里或者body的id='vSort0'前，页面加载后顺序执行代码，执行到这个js发现vSort0未定义（即undefind），这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢？对！
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们，如果我们想定义一个全局对象，而这个对象与页面中的某个按钮（等等）有关时， 我们必须将其放入body中，道理很明显：如果放入head，那当页面加载head部分的时候，那个按钮（等等）都还没有被定义（也可以说是还没有被加 载，因为加载的过程就是执行代码的过程，包括了定义），你能得到的只可能是一个undefind。
顶(1)
踩(0)
- 最新评论