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 现象(即样式失效导致的页面闪烁问题);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Blazor Hybrid适配到HarmonyOS系统
· 支付宝 IoT 设备入门宝典(下)设备经营篇
· 万字调研——AI生成内容检测
· 解决跨域问题的这6种方案,真香!
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库