动态创建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秒之后执行--->等待10sscript加载完毕*/}都是给动态创建的script和img赋值，为什么img就能直接请求，script是添加到页面才会请求？并且第二个测试说明和document.createElement没关系啊。。

Answer 1

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

Answer 2

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