流浪のwolf

卷帝

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

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   朱龙旭的网络  阅读(185)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· Blazor Hybrid适配到HarmonyOS系统
· 支付宝 IoT 设备入门宝典(下)设备经营篇
· 万字调研——AI生成内容检测
· 解决跨域问题的这6种方案,真香!
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库
点击右上角即可分享
微信分享提示