js代码放在html中不同位置的区别

浏览器解析html是从上到下的

js代码可以出现在 HTML 的任意地方

使用window.onload函数，可以减少错误发生（这个函数就是在文档加载完成之后立即加载js代码）

window.onload = function(){/*要执行的js代码*/}

1.放置在head标签中

• 在HTML head部分中的js代码会在被调用的时候才执行（页面加载完成之前读取）。
• 当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
• 由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数（即需调用才执行的脚本或事件触发执行的脚本），立即执行的语句则很可能会出错。
• 例如按钮等需要触发的事件适合。

2.放置在body标签中

• 在HTML body部分中的js代码会在页面加载的时候被执行。
• 不在最底部时，这里可以放函数也可以放立即执行的语句，但是如果需要和网页元素互动的（比如获取某个标签的值或者给某个标签赋值），js代码需要在标签的后面。
  放在最底部时，这时候整个网页已经加载完毕了，所以这里最适合放需要立即执行的命令，而自定义函数之类的则不适合。
• 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
• 例如走马灯等一些不触发（自动特效）就能实现的事件适合。

3.写在html标签外

特点：

• 代码会显得更加的整洁,也减少了标签的嵌套层级。
• 因为html标签中没有script标签,极大的有利于搜索引擎的抓取与性能优化，搜索引擎应该优先考虑这样写。

简单的结论：

• 使用谷歌浏览器做了简单的测试，只要相关js代码写在要获取的对象下方console.log()就可以输出，反之则输出null（无论是在head、body、html里面或者外面）。

• 网上查询结果说写在html结束标签外效果等同于放在body 中的尾部；虽然把 script 标签放在body 之外,但是解析结果是在body的尾部。