技巧 : 测试白屏 F12- network - No throttling 选择下载速度 Disable cache 禁用缓存
网页的渲染机制
- 下载 --> 解析 -->执行 -->预先下载 渲染
- 下载的过程 服务器和浏览器
浏览器请求，服务器返回内容 - 解析 一行一行看
Doctype html 启动html渲染引擎
<link> 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。当发现<link rel="stylesheet">后即停止渲染，在所有css加载完成之前，页面上不会显示任何东西。
Firefox。head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容；而body标签中的<link rel="stylesheet">则不阻塞任何内容显示。
IE/Edge。未加载完成的<link rel="stylesheet">标签只阻塞其后面的HTML内容显示，而对其前面的HTML内容则不阻塞。
即 白屏和闪烁 二选一 。
css和js在网页中的放置顺序 chrome放哪都无所谓，firefox放head里不闪，ie css往前放不会闪。js越往后越好，这样能更早看到样式
