8-3 页面加载 - 几种示例

没有css，只有一个p，马上渲染出来

页面加载过程：第一html，可能是url加载的，也可能是页面跳转过来的。先加载html代码，分析到6，有个css，加载css，生成cssom，再渲染div时候，生成div结构的时候，已经知道样式，就可以渲染出来。渲染是顺序的过程。

body出来前，加载css，已经知道渲染规则，再渲染body的时候，直接把规则考虑进去。

如果把css放到下面9行，渲染到div时候，并不知道样式，后来发现还有css，又重新渲染一遍。会出现渲染默认情况，然后又改成css样式。用户体验差，会出现跳动，性能差，一次事情，非要干两次。

首先输入url，或者跳转页面，把html加载出来。

浏览器解析，一直到8行，渲染一个div，第9行，加载script，执行这一行，下面第10行一直等着。阻塞的过程。根据9行改变8行。如果不是阻塞，比如9行改10行，那么一边渲染10行，一边改10行，咋办？所以不得不让js执行过程中，不得不阻塞。

思考：为啥把js 放在body最后？

一，不会阻塞html渲染，先让页面更快出来。

二，js阻塞渲染，如果在上面执行，可能下面的标签拿不到。下面的标签还没有开始渲染。script在下面，可以拿到所有标签。

先加载一个html页面，之后开始渲染，9行是异步请求，比如图片很大，加载慢，不会阻塞DOM树的渲染，异步加载。图片是异步加载，但是script是阻塞的。

上面都是页面加载之后要触发什么事件。但是有个区别，比如上面12行代码渲染10ms就够了，但是图片比较大，加载需要2s。第一个是把所有资源加载完，才能触发。包括图片，视频。第二个，DOM只需要渲染完，可能只需要2ms之后，就可以触发。时间的快慢，体现在性能上。从加载过程，和渲染过程考虑区别。图片什么的不影响DOM结构。