老站排名技巧

您当前的位置: 首页> 老站排名技巧> 网站前端性能优化CSS优化

网站前端性能优化CSS优化

发表日期:2021-04-16 09:33:00

使用缩写的CSS样式规则使用简短的CSS样式规则可以减小样式文件的大小。这种方法在短期内不会为您节省太多,但如果您在大型样式表中使用它,则会有很大的不同。所以制定简短的规则是个好习惯。

在大样式表中使用较浅的CSS选择器,使CSS选择器保持简单可以节省空间。通过降低复杂性,您可以通过保持样式表精简和低加载时间来提高页面性能。为了使CSS选择器保持简单,那么HTML的结构需要保持简单,并且不要嵌套太深的结构。

使用csscs来消除冗余csscs是在CSS中查找冗余的命令行工具。在重构CSS时,这是一个很好的起点。要安装csscs,您需要Ruby的gem安装程序,它类似于node的NPM可执行文件,但是对于Ruby包。OSX预装了ruby。如果安装了sass,gem就可以使用了。

从上一列可以看出,这三种CSS样式是共享flex的三种样式规则,所以我们应该使用multi-element选择器来合并样式

放入CSS,你应该尽量把CSS放在标签里,因为标签中的内容会先被加载,这样才能尽快加载样式文件并呈现样式。这会阻止用户看到尚未呈现的站点。这种现象称为未格式化内容的闪光。这是因为浏览器从上到下读取HTML。在读取HTML文档时,浏览器会查找对外部资源的引用。由于CSS加载速度慢,HTML已经构建,但是CSS还没有下载和呈现。

尽可能使用flexbox。Flexbox是现代浏览器中的CSS3布局引擎。它简化了页面上元素的布局。它自动处理两个轴上的间距、对齐和对齐。它不仅是在页面上布局元素的一种更健壮的方法,而且通常比传统方法性能更好。

关键CSS当你的网页很长时,你的网页不能在查看器上完全显示整个网页,只能显示页面的顶部主要部分。然后这个部分显示的页面样式称为临界CSS(key-style)。因此,没有风格,分为:

区分关键CSS和非关键CSS的好处:

处理关键CSS和非关键CSS:将关键CSS内联到HTML中以实现更快的解析,即更快的解析。内联CSS之所以能很好地工作,是因为浏览器不必等待那么长时间。但也有一个缺点:当你以这种方式加载站点的所有CSS时,你就失去了它的可移植性。这可以通过后端语言来完成,例如PHP的file_put_u要加载的内容:

对于非关键CSS,可以通过rel=preload预加载内容

这种机制使资源能够更早地加载和使用,并且更难阻止页面的初始呈现,从而提高性能。当CSS完成下载后,标签上的onload事件处理程序将被触发。下载后,rel属性的值将从preload转换为样式表值。

上一篇: 为什么百度刚刚收录的新站排名会更好,过了几天又没有了

下一篇: 网站推广经验分享

技巧精选

热门推荐

地址:浙江省杭州市余杭区联胜路10号 电话:0571-88730320 联系人:方经理

Copyright © 2015-2020 daowen.net