style 标签写在body 前后的区别？

知识储备：了解浏览器渲染页面的流程

a）首先 ， 解析（parse）html 标签 ， 获取DOM 树

b）解析html 的同时 ， 解析css  ， 获得样式规则 （style rules） CSSOM树

c）根据DOM 树 和 样式规则 ，生成渲染树 render tree

d）根据 render tree 进行节点布局layout ，即重排/回流

e）最后根据样式消息，进行重绘 patting

区别

1、 写在 body 标签前利于浏览器逐步渲染： resourcesdownloading （资源下载）->CSSOM+DOM->RenderTree(composite)->Layout->paint

2、写在 body 标签后： 由于浏览器以逐行方式对 html 文档进行解析； 当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待 加载且解析样式表完成之后重新渲染； 在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题）；