JavaScript在加载head和body时有很多不同的地方,当把Script标签放到开头的head里会发现与在body末尾的Script标签有很大的区别。
一、相对于对body标签而言,head标签的js不同
由于html的加载顺序为从上到下运行,会先解析head标签中的代码。
而head标签中会包含一些引用外部文件的代码,从开始运行就会下载这些被引用的外部文件当遇到script标签的时候,浏览器暂停解析(不是暂停下载),将控制权交给JavaScript引擎(解释器)
如果 < script >标签引用了外部脚本,就下载该脚本,否则就直接执行,执行完毕后将控制权交给浏览器渲染引擎
但JavaScript 会操作html元素, 如果在body加载完之前写JavaScript 会造成JavaScript 找不到页面元素
另外,js文件不会与DOM并行加载,因此需要等待js整个文件加载完之后才能继续DOM的加载,倘若js脚本文件过大,则可能导致浏览器页面显示滞后,出现“假死”状态,这种效应称之为“阻塞效应”;会导致出现非常不好的用户体验。js阻塞其他资源的加载的原因是:浏览器为了防止js修改DOM树,需要重新构建DOM树的情况出现;
对于放在head中js的函数而言,若该函数未实现与html元素的交互,则是可以放到head中提前加载的;但是这样做除了阻塞效应外还有一个需要注意的地方:要注意是否有在函数作用域外的执行语句,如果有不在函数中的执行语句(专指获取DOM结点的),比如与DOM结点相关的变量初始化,在head中就不会执行。
因此在下文中的更改加载顺序方法中常会用一种思路,即将所有执行的代码放到一个匿名函数中进行使用
例如:
'use strict'
var right = document.getElementById('right');
window.addEventListener('load', function () {
right.onclick = function () {
right.style.backgroundColor = 'red';
}
})
👆上述这种的就不行,会造成js报空的错误,需改为下方这种将所有相关代码统一放置的格式
window.addEventListener('load', function () {
'use strict'
var right = document.getElementById('right');
right.onclick = function () {
right.style.backgroundColor = 'red';
}
})
二、解决措施
首先将script标签放到body标签的最末尾是一个非常稳妥的选择,但为了代码的可读性,很多人也会选择将script标签放于head标签中,这时就为大家提供以下几种常用原生js的方法。
1.window.onload()方法
- 该方法用于在网页加载完毕后立刻执行的操作,即当html加载完毕后,立刻执行某个方法等。
简单的立刻执行函数,假设一个js中只有一个需要页面加载后,立刻执行的函数。则此时便直接调用,不需要加括号;或者直接使用匿名函数。
window.οnlοad=Func;
window.οnlοad=function(){...}
假设一个js中有多个需要页面加载后,立刻执行的函数,那就如下调用即可,需要加括号
window.οnlοad=function(){
Func1();
Func2();
Func3();
.....
}
2.window.addEventListener(‘load’,function( ) )方法
- 与上种方法相似,不过是使用监听的方式实现。使用时将函数主体放置到第二个参数的位置,可将其他函数放到主函数下。
js的window.onload方法是当网页中的所有元素(包括元素的关联文件,如图片)全部加载完毕后执行的,并且一个页面里面window只能绑定一次onload事件,多次绑定则执行最后一次绑定的处理函数。
三、注意
对于html的onclick属性,其对应的js函数应尽量放在head中提前加载(或放于该代码前),不能等html加载完再加载对应js函数,否则onclick对应的函数会调空。这时还需注意head中的js部分尽量不要有函数作用域外获取html元素的执行语句才行。所以建议将监听放到js内,尽量不要放于html中
例如:
<button id="right" onclick="r()">">></button>
上述代码中的r()函数调用就很容易调空