js放到head中失效的原因与解决方法

原文链接：https://www.jb51.net/article/107727.htm

延伸：前端 js 页面加载完成事件 - onload，五种写法（https://www.cnblogs.com/xuxiaoyu/p/11554944.html

https://www.cnblogs.com/eleven24/p/8649513.html）

 

1.无效原因：

因为文档还没有加载，就读了js,js就起不了作用

2.延伸：

1》head 内的js 会阻塞页面的传输和页面的渲染。head 内的js需要执行结束才开始渲染body,所以尽量不要将js 文件放在Head 内。未来避免head 引入的js脚本阻塞浏览器中主解析引擎对dom的解析工作，对dom的渲染，一般原则是样式在前面，dom 文档，脚本在最后面，遵循先解析在渲染在执行script 这个顺序。

2》js 分为外部和内部的，外部的一般放到head 内，内部的一般放到body内，这样的目的有很多:

　　a.不阻塞页面的加载(事实上会被缓存)

　　b. 可以在js里操作dom,这时候dom 是准备好的，即保证js运行时dom是存在的

　　c.建议方式是放在页面的底部，监听window.onload或readystate 来触发js.

3》名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

3.解决方案

   a. js放到body 中,最好放在底部

    b.用window.onload =function(){} 代码包裹通过文件引入或者直接放在head中