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 现象(即样式失效导致的页面闪烁问题);