document.ready和windo(w).onload的区别

在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() {
    ...
}