白屏和FOUC

白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。

我们可以通过一个实验来进行测试和模拟白屏、FOUC的现象，让我们更好的理解白屏、FOUC。

测试demo

https://github.com/evenyao/whitescreen-fouc-test
步骤README.md中已经大概有了，下面整合一些截图，方便理解。

具体分析

白屏测试 / 且js放在css之后
HTML
 
CSS加载完成后样式就出现了，js未加载完成，但并不影响样式显现 
 
 
FOUC测试 （使用FireFox浏览器）
HTML优先被加载出来了，但我们没有看到任何样式呈现
 
加载完成之后，我们看到了样式，即出现了FOUC
 
 

其他

白屏测试 / 且js放在CSS之前
HTML
 
 
可以看到CSS已经加载完成，但因为js并未加载完成，产生了堵塞，从而导致了样式没有展现
 
 
直到js也全部加载完成之后，样式才得以出现 
 
这个时候我们来测试一下 async
白屏测试 / 且js放在css之后 但加了async异步

HTML

 
可以看到即使js放在前面，且没有加载完成，样式还是成功显现了
 
测试async异步效果成功
 

defer也是同理，同时也更好的理解了异步加载。
关于白屏、FOUC和异步加载的概念，参考之前写的初涉 JavaScript

测试模拟 白屏 / FOUC的更多相关文章

  1. vue项目使用hbuilder打包后，真机测试白屏

    在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an ...

  2. android studio你可能忽视的细节——启动白屏？drawable和mipmap出现的意义？这里都有！！！

    android studio用了很久了,也不知道各位小伙伴有没有还在用eclipse的,如果还有,楼主真心推荐转到android studio来吧,毕竟亲儿子,你会知道除了启动速度稍微慢些,你找不到一 ...

  3. 【小贴士】【stringify神BUG】【localstorage失效】【消灭Safari alert框】【是否延迟加载】【页面10px白屏】

    前言 最近碰到几个恶心问题,也发现一点优化技巧,以及对Hybrid知识的一些整理,这里便一并拿出来做分享了,关于Hybrid的调试,会是我今后一个重点 我的博客首先是学习笔记,方便自己做知识沉淀,以后 ...

  4. Android高仿微信（一）——如何消除启动时的白屏

    默认情况下,APP启动时会先把屏幕刷成白色,然后才绘制第一个Activity中的View,这两个步骤之间的延迟会造成启动后先看到白屏(时间大概为1秒左右).时间不长,但是我们也看到,一般的APP时不存 ...

  5. Android -- 距离感应器控制屏幕灭屏白屏

    权限                                                                                             <u ...

  6. 提升html5的性能体验系列之一避免切页白屏

    窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟 ...

  7. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  8. 【bug小记】应用跳转白屏

    tv端项目 测试那边反馈我们的应用跳转到别的应用,再跳转回来会出现白屏的情况. 其实这个原因很简单,就是系统内存不足了把我们的app进程销毁了 所以再回到我们的应用的时候需要重新绘制,而这个" ...

  9. C# Winform继承窗体打开设计器白屏的一例解决方法

    环境VS2017 15.5.4,Win10开发过程中,发现一些窗体打开设计器会卡死白屏,另外有一些不会,(两者运行时正常),最小化vs后甚至能把工具箱连带搞黑,严重影响开发效率,经过一天多的对比研究, ...

随机推荐

  1. M4修改外部晶振8M和25M晶振的方法

    共计修改三个参数: 1.HSE_VALUE   具体位置在stm32f4xx.h中 2.PLL_M          具体位置在system_stm32f4xx.c中 3.Keil编译器 工程的Opt ...

  2. 提示AttributeError: 'module' object has no attribute 'HTTPSHandler'解决方法

    今天在新机器上安装sqlmap,运行提示AttributeError: 'module' object has no attribute 'HTTPSHandler' 网上找了找资料,发现一篇文章ht ...

  3. platform平台总线

    一.何为平台总线 (1)相对于usb.pci.i2c等物理总线来说,platform总线是虚拟的.抽象出来的.(2)CPU与外部通信的2种方式:地址总线式连接和专用协议类接口式连接.平台总线,是扩展到 ...

  4. Ubuntu更换国内源

    打开终端,输入:sudo gedit /etc/apt/sources.list 在文件最底部输入以下内容: deb http://mirrors.ustc.edu.cn/ubuntu/ xenial ...

  5. CF1066D Boxes Packing（二分答案）

    题意描述: 你有$n$个物品,每个物品大小为$a_i$,$m$个盒子,每个盒子的容积为$k$.$Maksim$先生想把物品装入盒子中.对于每个物品,如果能被放入当前的盒子中,则放入当前盒子,否则换一个 ...

  6. php 将富文本编辑后的内容取出

    背景:项目中用了富文本编辑器,讲写完的内容存入了数据库,但是取出的时候因为有些展示地方并不需要样式,只想获取到内容,所以需要将带了html编码的信息解析出来. 原始信息如下 [task_desc] = ...

  7. Python之函数装饰器

    在实际中,我们可能需要在不改变函数源代码和调用方式的情况下,为函数添加一些新的附加功能,能够实现这种功能的函数我们将其称之为装饰器.装饰器本质上其实还是是一个函数,用来装饰其它函数,为函数添加一些附加 ...

  8. UART学习之路（二）基本时序介绍

    这次我们来介绍一下UART的基本时序,了解一下底层信号怎么传送的.方便以后使用Verilog HDL实现收发逻辑. 9600bit/s 的意思是每秒发送9600bit,因此可以理解为将1s分解为960 ...

  9. Java中的File.separator用法

    在Windows下的路径分隔符和Linux下的路径分隔符是不一样的,当直接使用绝对路径时,跨平台会暴出“No such file or diretory”的异常. 比如说要在temp目录下建立一个te ...

  10. R语言爬虫：CSS方法与XPath方法对比（表格介绍）

    css 选择器与 xpath 用法对比 目标 匹配节点 CSS 3 XPath 所有节点 ~ * //* 查找一级.二级.三级标题节点 <h1>,<h2>,<h3> ...