2 月10日 白屏和FOUC知识点

技巧 : 测试白屏 F12- network - No throttling 选择下载速度 Disable cache 禁用缓存

网页的渲染机制

• 下载 --> 解析 -->执行 -->预先下载 渲染

1. 下载的过程 服务器和浏览器
   浏览器请求，服务器返回内容
2. 解析 一行一行看
   Doctype html 启动html渲染引擎
   style.css 下载css，再次发请求下载
   Q：下载css的时长在50到300ms之间，在这段时间内浏览器要不要去看后面的东西？
   有些浏览器（Chrome）下载完成后停止读取进行解析， 但是解析过程中另外一个线程预下载后面的请求的文件（css）， 改行解析完成才会继续读下一行。
   chrome、safari和opear等webkit内核的浏览器是等到所有的css文件全部解析完成后才会开始渲染一个标签的样式（早饭全部吃完了再出门）
   firefox就是边下载变渲染（快点出门，路上边走边吃），遇到文件停止渲染开始下载，但是之前的已经渲染好了，所以遇到下载的时候会闪烁

参考 http://blog.shaochuancs.com/new-css-loading-method/

Chrome和Safari。当发现后即停止渲染，在所有css加载完成之前，页面上不会显示任何东西。
Firefox。head标签中的行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容；而body标签中的则不阻塞任何内容显示。
IE/Edge。未加载完成的标签只阻塞其后面的HTML内容显示，而对其前面的HTML内容则不阻塞。

即 白屏和闪烁 二选一 。

css和js在网页中的放置顺序 chrome放哪都无所谓，firefox放head里不闪，ie css往前放不会闪。js越往后越好，这样能更早看到样式