Web前端性能优化——CSS优化

最新推荐文章于 2024-07-24 06:54:05 发布

转载最新推荐文章于 2024-07-24 06:54:05 发布 · 1.3k 阅读

文章标签：

#CSS #web前端 #性能优化

前端性能优化专栏收录该内容

7 篇文章

订阅专栏

本文介绍了四种CSS优化的方法：避免使用@import以减少页面加载时间；尽可能使用CSS动画提高效率；在CSS文件中包含多种介质类型以减少请求次数；使用媒体查询加载指定大小的背景图片提升用户体验。

1、避免使用 @import

@import 最常见的用法是把所有的 CSS 文件通过 @import 链接到一个 CSS 文件中，如 main.css

这样往往会导致嵌套的发生，就是被 import 的文件也通过 @import 链接其他 CSS 文件。

这样的结果会导致页面加载变慢。

（参考：http://www.gbtags.com/gb/share/1441.htm）

2、尽可能使用 CSS 动画

使用 CSS3 中的 transformation 和 keyframe 制作动画效果相比使用 JS 会更高效，同时需要的代码也更少。当然，对于不支持 CSS3 的浏览器，就得使用 JS 实现动画效果了。

（参考：http://www.gbtags.com/gb/share/1374.htm）

3、在 CSS 文件中包含多种介质类型

将所有的介质合并在一个文件中，以减少请求的次数，除非其中一个介质所占的比例比起其他大了许多。

@media screen{
    /*所有默认的结构设计和元素样式写在这里*/
}
@media print{
    /*调整打印时的样式*/
}
@media only screen and (max-width: 1024px){
    /*使用移动终端时的样式设定*/
}

（参考：http://www.gbtags.com/gb/share/1448.htm）

4、使用媒体查询加载指定大小的背景图片

利用 @media CSS媒体查询来改变背景图片，使得不同的媒体设备对应不同的背景图片，提升用户体验。

/*默认图片*/
.someElement {
     background-image: url(someImg.jpg);
}

@media only screen and (max-width: 1024px){
    .someElement{
        background-image: url(otherImg.jpg);
    }
}