白屏和FOCU 测试

一：测试脚本的放置顺序对元素加载的影响

（Chrome）

01：我们更改script的加载时间为20秒放在三个css文件的前面，

最后结果是

我们可以看到先加载完成index.html 然后接着是图片和css，但是页面始终是白屏，这是因为script放在了页面dom等元素的前面导致阻塞后面内容的呈现。只有当js加载完成并立即执行后页面内容才能呈现到用户面前。

那这里就有个问题：为什么我看到是css先加载完成的，那为什么页面时白色的？因为script影响了css的计算，只有当script获取到才能进行页面的绘制。

02：那css为什么要放前面？是因为我希望css优先加载。那假如我们把css放在后面会发生什么？

可以看到浏览器先加载完成html和图片以及三个css文件后没有展示页面，当前是白屏状态，但是加载完成js文件后才立即呈现到用户面前，所以css不优先执行会被js给阻塞导致白屏时间长等bug。

（Firfox）

我们知道Chrome和Firfox的加载机制不同

Chrome是白屏加载，而Firfox是无样式内容闪烁

意思就是火狐浏览器会先显示已经加载完成DOM树，然后逐步加载无样式的内容，等css加载完成后突然展现样式。而谷歌浏览器是会同时加载html和css分别构建dom树和cssom树等两者构建完成之后绘制渲染树，然后页面显示。所以Chrome的后果是用户看到的都是最终渲染完成的。而火狐我们可以看到为未渲染的html。

测试脚本的放置顺序对元素加载的影响、

可以看到Firfox是先加载完成html然后加载完成一个css就执行一个css，页面就渲染一次。

github操作步骤