在Github被微软收购之后的第52天,宣布改版,并放弃JQuery,作为一个后端开发者,没有了JQuery,基本告别JS了,但是听说原生JS已经完善了很多,不再依赖JQuery的封装了,还是要学习一下的。
这次因为初始化Code Mirror,把初始化函数放在了head里面,导致未加载页面的时候就执行js,找不到元素,一直得不到想要的结果,对比以下前后的代码可以很明显的看到。
修改之前
修改之后
把js放在要操作的元素之后才起作用
js可以分为外部的和内部的,外部的js一般放到head内。内部的js也叫本页面的JS脚本,建议把本页面的js放在页面底部
原因
1.不阻塞页面的加载(事实上js会被缓存)。
2.可以直接在js里操作dom,这时候dom是准备好的,即保证js运行时dom是存在的。
3.建议的方式是放在页面底部,监听window.onload 或 readystate 来触发js。
4.延伸:
head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body,所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时,或者特定区块后引入和执行 JavaScript。head 内的 JavaScript 需要执行结束才开始渲染 body,所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时,或者特定区块后引入和执行 JavaScript。
所以在head内的js一般要先执行完后,才开始渲染body页面。为了避免head引入的js脚本阻塞流浪器中主解析引擎对dom的解析工作,对dom的渲染,一般原则是,样式在前面,dom文档,脚本在最后面。遵循先解析再渲染再执行script这个顺序。
文档加载完成的两种事件
- ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
- onload,指示页面包含图片等非文字媒体文件在内的所有元素都加载完成。
window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
1、DOM ready
文档加载的顺序:域名解析–>加载HTML–>加载JavaScript和CSS–>加载图片等非文字媒体文件。
DOM ready在加载JavaScript和CSS与加载图片等非文字媒体文件之间,表示DOM加载完成,可以对DOM进行操作。
例如,只要标签加载完成,不用等该图片加载完成,就可以设置图片的属性或样式等。
在原生JavaScript中没有Dom ready的直接方法。
jQuery的ready()方法:
$(function(){
...
});
等价于
$(document).ready(function(){
...
});
等价于
$().ready(function(){
...
});
2、DOM load
文档加载的顺序:域名解析–>加载HTML–>加载JavaScript和CSS–>加载图片等非文字媒体文件。
DOM load在加载图片等非文字媒体文件之后,表示在document文档加载完成后才可以对DOM进行操作,document文档包括了加载图片等非文字媒体文件。
例如,需要等该图片加载完成,才可以设置图片的属性或样式等。
在原生JavaScript中使用onload事件。
window.onload = function() {
...
}
图片load:
document.getElementsByTagName("img")[0].onload = function() {
...
}