style 标签写在 body 前和 body 后有什么区别？

最新推荐文章于 2024-07-13 19:15:00 发布

小王同学在这里

最新推荐文章于 2024-07-13 19:15:00 发布

阅读量486

点赞数 7

分类专栏：前端面经文章标签：前端 html css javascript

本文链接：https://blog.csdn.net/weixin_52401264/article/details/139304139

版权

24 篇文章 0 订阅

订阅专栏

对比项	`<style>` 放在 `<body>` 之前	`<style>` 放在 `<body>` 之后
渲染速度	【优】所有样式信息在页面加载时可用，用户能够快速看到格式化后的页面	【劣】浏览器需要先解析 body 内容再应用样式,用户可能会先看到未格式化的内容，但只要解析到样式表就会立即渲染格式化后的页面
页面加载时间	【劣】如果样式表很大，可能会延迟页面的渲染时间，影响整体加载速度	【优】页面内容先加载，样式表加载不会阻塞页面内容的显示，有助于提高首屏加载速度
搜索引擎优化（SEO）	【劣】样式信息位于文档顶部，可能影响搜索引擎对页面内容的快速抓取	【优】搜索引擎可以先抓取和索引页面的主要内容，不会被样式信息干扰
JavaScript 与样式的关系	【优】样式表在 JavaScript 之前加载和应用,不会被 JavaScript 阻塞	【劣】如果页面中有大量 JavaScript 代码，可能会阻塞样式的加载和应用，导致渲染延迟