先看这两句代码：
window.addEventListener(‘load’, loaded, false);
document.addEventListener(‘DOMContentLoaded’, loaded, false);
问题回顾：
这问题可把我郁闷死了，网上找的一个demo里头，他把样式直接用style内联（这种引进方式是dom方式）进来，然后用DOMContentLoaded来处理js，本来是没问题的。
但是当你把内联的样式写在一个外联的样式文件里头然后再进来的时候，问题就出现了。
什么原因？
DOMContentLoaded在外联样式加载前（dom加载完后）就触发了，外联的样式还没来得及渲染dom，这样导致DOMContentLoaded捕获的状态是外联样式渲染前的状态。
改变窗口大小可以重新触发样式的渲染，所以会形成一个假象：
页面进来的时候某个被样式定义过高度的元素的offsetHeight在你改变一下窗口（或者别的可以引起reflow的操作）时，js获取的这个offsetHeight居然不一样的，而在我们看来页面进来时跟窗口改变后，元素本身就没发生高度变化。
总结：
load事件是在页面所有元素都加载完后触发；
DOMContentLoaded，它是指dom tree加载完就触发。这个事件要小心使用，当然它是个强大的事件，起码用上它在某一层面上防止了页面加载被堵塞。