浅谈前端性能优化（三）——将CSS文件放在顶部

最新推荐文章于 2022-03-04 20:47:49 发布
最新推荐文章于 2022-03-04 20:47:49 发布
阅读量1.4k 收藏 1
点赞数 1
分类专栏： Web 文章标签： 前端性能优化 将CSS文件放在顶部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouziyu2011/article/details/71330543
版权
本文探讨了CSS文件放置在HTML head标签中与body底部对页面加载和用户体验的影响。由于浏览器为避免样式变化导致重绘或重排，会阻塞内容呈现直至所有CSS加载完成，CSS放在顶部能防止长时间白屏，提高用户体验。而CSS放底部虽能逐步呈现内容，但在样式应用时可能触发重绘，影响性能。通过测试比较，证明了CSS置于头部的优化效果。
摘要由CSDN通过智能技术生成

CSS文件放置在head中和放在body底部，对CSS本身的下载时间不会有影响，但对页面的呈现有非常大的影响，与用户体验密切相关。

 

CSS文件放在顶部的原理：

1) CSS的下载是按照其在文档中出现的顺序进行的，所以很容易想到将不需立即使用的CSS，如弹出框CSS，放在底部，这似乎可以得到一个加载很快的页面。然而这其实是错误的，IE8及以下浏览器的工作方式是：为了避免样式变化导致页面重绘or重排，会阻塞内容呈现，在所有CSS

最低0.47元/天 解锁文章
筱葭
关注
专栏目录
前端性能优化第四篇-为什么在head中引入CSS
Raaabbt GO!!
10-14 941
前端性能优化第四篇-为什么在head中引入CSS 写在前面：有很长一段时间没有更新这个专栏，是因为在准备一些课程上的东西，不过这个专栏一定不会烂尾的~ 写这篇文章的原因是因为从我初学前端开始，就一直有人告诉我：“样式表文件在head中通过link引入，script文件在body的末尾引入，这样页面加载速度更快。”那么着一切究竟是为什么呢，下面我们来看一下~ （如果真的不想看这些铺垫内容，不妨直...
浅谈前端性能优化（四）——将script放在底部
筱葭的博客
05-07 2242
CSS文件放置在head中和放在body底部，对CSS本身的下载时间不会有影响，但对页面的呈现有非常大的影响，与用户体验密切相关。   script的两个属性——async和defer： ①　没有defer或async，浏览器会立即加载并执行指定的JS脚本，不等待后续文档元素，读到JS脚本就加载并执行。 ②　有async，加载后续文档元素的过程将和JS的加载与执行并行进行（异步）。 ③
前端性能优化—将CSS文件放在顶部
红目香薰
04-01 503
CSS文件放置在head中和放在body底部，对CSS本身的下载时间不会有影响，但对页面的呈现有非常大的影响，与用户体验密切相关。 CSS文件放在顶部的原理： 1) CSS的下载是按照其在文档中出现的顺序进行的，所以很容易想到将不需立即使用的CSS，如弹出框CSS，放在底部，这似乎可以得到一个加载很快的页面。然而这其实是错误的，IE8及以下浏览器的工作方式是：为了避免样式变化导致页面重绘or重排，会阻塞内容呈现，在所有CSS加载并解析完之前不会呈现内容，导致整个浏览器显示空白，出现“白屏”（浏览器.
css应该放在哪里,css文件应该放在哪
weixin_39618173的博客
08-04 1696
css文件应该放在HTML顶部的head中。原因：浏览器解析html文档是自上而下的，如果将CSS放在底部，页面可以逐步呈现，但在CSS下载并解析完毕后，已经呈现的文字和图片就要需要根据新的样式重绘，这是一种不好的用户体验。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。css文件应该放在HTML顶部的head中。why?link标签里面的hre...
网站前端开发--css篇
03-08 250
Ⅰ 全局：global.css全局样式为全站公用，为页面样式基础，页面中必须包含。结构：layout.css页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有：style.css独立页面所使用的样式文件，页面中必须包含。模块 module.css产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。主题 themes.css实现换肤功能时应用。...
性能优化(6)：为什么一定要将css置顶？
qq_24520459的博客
08-05 152
样式表(css)放在网页的head中会让网页显得加载速度更快。因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要。用户不用一直等待在一个白屏上...
浅谈web布局系列问题——浮动，定位，弹性容器。
苦艾酒
11-19 1169
首先，在页面中的div是一个行属性标签，独占一行，也就是说无论宽度多少，div所在的一行只能有一个div。 浮动布局：浮动可以轻易的让div脱离文档流，轻松实现布局上的问题。浮动--见名思意，就是让东西浮起来从而进行移动。然而浮动也会带来一些麻烦，影响后面容器的布局，所有这里就有了清浮动的方法。 清除浮动的关键字是clear，可以写在行间，或样式表中。语法： clear :
前端面试笔记-CSS篇
qq_46354688的博客
03-04 793
目录选择器的权重和优先级盒模型标准盒模型和替代模型（IE）块级盒子与内联盒子隐藏一个元素Position文档流定位z-index浮动如何清除浮动包含块与控制框BFC外边距折叠（合并外边距与BFC、margin叠加）margin塌陷BFC 可以包含浮动的元素（清除浮动）BFC 解决文字环绕的问题层叠上下文层叠水平层叠上下文的特性DisplayFlex布局Grid布局各种居中块级元素水平居中（左右居中）块级元素垂直居中负外边距绝对居中容器内居中**视区内居中**变形（Transform）flex块中不定行的文字
前端面试总结三
我是谁的博客
10-26 1117
离线资源 前端兼容 CSS3 GPU加速 SPDY协议 单页面应用 GZIP压缩 CSS表达式和CSS滤镜 HTTP长连接、短连接 安全 重点： 类 安全、csrf、xss Vue原理 vuex vue-router的两种模式及区别 webpack是什么，用过什么 ...
建立自己的高效前端项目（css/html）
weixin_33910460的博客
09-15 208
最近在看一本《高效前端》的书籍，从中受益良多，也将获得的东西记录下来，方便以后查看和使用，书中写道：‘’切图‘’三境界，第一，长得好看；第二，灵活；第三，友好的交互。下边的记录的东西大部分都是针对于第二境界来说的。能用html/css解决的东西就不用js 相对于就js实现部分效果来说，如果html、css能够完全实现的尽量使用html、css实现。使用js实现部分效果的，将可...
[译] 多网站项目的 CSS 架构
weixin_30576827的博客
07-26 147
原文地址：CSS Architecture for Multiple Websites 原文作者：Elad Shechter 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：Baddyo 校对者：xionglong58，lgh757079506 多网站项目的 CSS 架构 CSS 架构 —— 第三部分 复杂的 CSS 架构，可不是你在科班里能...
样式表放在顶部的好处
jishublog
03-21 296
在Internet Explorer中，将样式表放在文档底部会导致白屏问题的情形： 1. 在新窗口中打开时， 2.重新加载时； 单击刷新按钮是另外一种导致白屏的方式，这是一种常见的用户操作。在页面加载时最小化然后恢复窗口就能看到白屏； 3.作为主页： 为了避免白屏，请将样式表放在文档顶部的HEAD中，不管页面是如何加载的---在新窗口打开.重新加载或者作为主页---页...
44. 将样式表放在顶部(5)
enlyhua的专栏
10-09 314
将样式表放在顶部(Put Stylesheets at the Top) 1.逐步呈现(Progressive Rendering) http://stevesouders.com/hpws/css-bottom.php http://stevesouders.com/hpws/css-top.php
高效抒写CSS&Js优化
只会HTML的楼主
06-25 203
渲染机制（右往左） 浏览器如何读取你的CSS选择器？我们需要明白的最重要的一点是从右向左。比如这个选择器ul > li a[title=”home”]，浏览器首先读取的是a[title=”home”]。这个首先被读取的部分我们叫它key selector，它是浏览器最終要选择的元素。 ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、...
有的js为什么放在body里面
hello world
02-26 1507
理论上来说js标签放在html文档的任何位置都可以，规范起见，推荐放到body结束标签的末尾，包含到body标签内： <body> <!-- 这里是其他的HTML标签 --> <script> // 这里是代码 </script> </body> 这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢造成页面卡死的问题。另外，Yahoo的前端优化指南里就有这一条。 放
为什么要把js放在页面底部，css放在顶部
一个在全能之路上越走越远的男人。
12-06 3001
先了解一下 浏览器的渲染原理： 当我们在浏览器输入URL 时，浏览器会返回我们一个HTML文档，将文档下载下来后，便开始从上到下开始解析。解析完成之后就会生成DOM。如果页面中有css,会根据css的内容生成cssom, 然后DOM会和cssom结合生成一个渲染树，最后浏览器会根据渲染树的内容，计算出各个节点的大小和位置绘制在页面上。 js 会阻碍浏览器的解析，解析遇到js会停止渲染，优先...
html让一个页面在最上端,为什么把css放到顶部？
weixin_29758513的博客
06-03 583
在web页面设计中，一般在HTML中不直接写样式，而是通过link标签引用一个CSS文件。在下载页面过程中，document最早开始下载，然后浏览器解析document，下载相关的css、js、图片、字体、视频等资源。css文件放置在head中和放在body底部，对css的下载时间不会有影响，但是对页面的呈现有着非常大的影响，与用户的体验密切相关。那么为什么把css文件放到顶部？CSS文件放在顶部...
css深入浅出系列之：css文件放在页面顶部
qq_43693520的博客
03-17 581
css深入浅出系列只是自己在学习css的时候的一些个人见解，有错误的地方，欢迎在评论中指正噢~ 我们可以看到，大多数的html页面在用link引入外部css文件的时候，都是把css文件放在页面的顶部，即放在&lt;head&gt;标签里面，那么，这样做的原因是什么呢？ 答案：可以让前端性能更优化 那么，为什么就可以让前端性能更加优化呢？这时，我们就需要先了解脚本和样式文件对页面渲染的影响。 浏览器...
css如何让div显示在最上层
热门推荐
LYoungJ的博客
04-21 5万+
方法：设置div样式 z-index:autoauto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。前提是div是定位元素。
前端性能优化与HTML/CSS理解
"前端概括性问题，HTML+CSS面试知识点，前端性能优化，PHP结合Swoole和WebSocket，Redis实现Web一对一聊天" 前端概括性问题主要涉及前端性能优化，包括减少HTTP请求次数、使用前端模板、优化DOM操作、合理管理全局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值