JavaScript在head和body中加载的区别（含相关变量初始化问题）及原生js的解决方法

  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()">&gt;</button>

上述代码中的r（）函数调用就很容易调空