流浪のwolf

卷帝

导航

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

posted on 2022-07-30 17:11  流浪のwolf  阅读(172)  评论(0编辑  收藏  举报