浏览器解析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
的尾部。
- 使用谷歌浏览器做了简单的测试,只要相关js代码写在要获取的对象下方