动态创建script和动态创建的img赋值src时为什么不同。

Question

在动态创建script和动态创建img的过程中，为什么img赋值src之后能立即请求资源，而script必须添加到页面中才能加载资源
window.onload=function(){
varimg=newImage();
img.src='./function.JPG';
img.onload=function(){
console.log('图片加载完毕');
}
setTimeout(function(){
console.log('10秒之后执行');
document.getElementsByTagName('body')[0].appendChild(img);
},10000)
/*
图片加载完毕
10秒之后执行--->等待10s
*/
//测试是否和createElement有关
varimg2=document.createElement('img');
img2.src='./function.JPG';
img2.onload=function(){
console.log('图片加载完毕');
}
setTimeout(function(){
console.log('10秒之后执行');
document.getElementsByTagName('body')[0].appendChild(img);
},10000)
/*
图片加载完毕
10秒之后执行--->等待10s
*/
varscript=document.createElement('script');
script.src='./zepto源码.js';
script.onload=function(){
console.log('script加载完毕');
}
setTimeout(function(){
console.log('10秒之后执行');
document.getElementsByTagName('body')[0].appendChild(script);
},10000)
/*
10秒之后执行--->等待10s
script加载完毕
*/
}
都是给动态创建的script和img赋值，为什么img就能直接请求，script是添加到页面才会请求？并且第二个测试说明和document.createElement没关系啊。。

Answer 1

我的理解是，图片本身就是一个元素，你直接访问图片的地址时，是可以展示这个图片的，不需要依赖页面。但是js不一样，js必须依赖浏览器页面这样一个执行环境，才能执行，你浏览器直接访问一个js，得到的其实只是一堆字符串而已。img和script本身就是不一样的。所以浏览器才会有这种特性：img就能直接请求，script是添加到页面才会请求。自己的理解，不一定对。

Answer 2

这个是浏览器处理或者规范要求的img可以直接加载还有一个原因是可以方便预加载处理，以提升体验，而js并不需要这样的处理，而且往往js的执行会影响到html显示，所以需要专门进入到html位置后才实际加载比较恰当。