白屏和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操作步骤

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,970评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 10,088评论 0 20
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,378评论 0 7
  • 说明: 之前通过学习html+css用写博客的方式记录知识点,因为方方老师(方应杭老师)的缘故有幸获得一些人的关注...
    饥人谷_远方阅读 4,276评论 0 1