关于js无法获取图片宽高的问题的认识

今天写一个简单的代码段，目的是获取图片的尺寸，顺便想复习一下原生js获取元素宽高的几种用法：

<img src="./1.jpg"/>
<script>
var img=document.getElementsByTagName('img')
var width=img.width
console.log(width)
</script>

打开页面之后，却发现控制台输出的宽度为0。。。然后我以为是方法用错了，又用了offsetWidth clientWidth scrollWidth仍然输出为0。于是在网上查了一些资料，有网友推荐使用window.onload方法，果然解决了问题，对此感到不明白，继续搜索，然后又了解到在图片还未完全加载之前，图片标签的默认尺寸均为0。接着使用谷歌开发者工具查看了一下Network，发现js在图片资源获取之前就已经执行了。
于是，个人猜想，在浏览器解析html文件的时候，先遍历一遍源码，构建DOM树，由于js脚本文件是内联动态脚本，会立即执行，而图片资源这种外部资源加载会在内联js之后，导致内联js获取到的是图片还未加载时图片标签默认尺寸为0的状态下的值。解决方法就是使用window.onload或者将js脚本作为js外部文件引入

<img src="./1.jpg"/>
<script src="1.js"></script>