CSS渲染性能优化

2024-01-03 08:39:35

? 专栏介绍

HTML/CSS专栏合集是一个涵盖HTML和CSS两个方面的栏目。HTML是一种标记语言,用于创建网页的结构和内容,而CSS是一种样式表语言,用于控制网页的外观和布局。

在HTML/CSS专栏合集中,我们将深入探讨HTML和CSS的基础知识和高级技术。我们将介绍HTML的标签、元素和属性,以及如何使用它们来构建网页结构。同时,我们还将讨论CSS的选择器、属性和样式规则,以及如何使用它们来美化网页并实现各种布局效果。

通过阅读HTML/CSS专栏合集,您将学习如何创建语义化的HTML结构、优化网页性能、响应式设计、动画效果等。我们还将分享一些实用的技巧和最佳实践,帮助您提高编写高质量HTML/CSS代码的能力。

在这里插入图片描述


CSS 渲染性能优化

我们可以从两个方面来看性能优化的意义:

  1. 用户角度

    网站优化能够让页面加载得更快,响应更加及时,极大提升用户体验,减少用户流失率。

  2. 服务商角度

    优化会减少页面资源请求数,减小请求资源所占带宽大小,从而节省可观的带宽资源。

网站优化的目标就是减少网站加载时间,提高响应速度。

这里我们主要来看 CSS 方面能够进行哪些性能优化。

1.使用 id selector 非常的高效

在使用 id selector 的时候需要注意一点:因为 id 是唯一的,所以不需要既指定 id 又指定 tagName

/* Bad  */
p#id1 {
  color:red;
}  

/* Good  */
#id1 {
  color:red;
}
2.避免深层次的 node

例如:

/* Bad  */
div > div > div > p {
  color:red;
} 

/* Good  */
p-class {
  color:red;
}
3. 不要使用 attribute selector

如:p[att1=”val1”]。这样的匹配非常慢。更不要这样写:p[id="id1"]。这样将 id selector 退化成 attribute selector

/* Bad  */
p[id="id1"] {
  color:red;
}  
p[class="blog"] {
  color:red;
}

/* Good  */
#id1 {
  color:red;
}
.blog {
  color:red;
}
4.通常将浏览器前缀置于前面,将标准样式属性置于最后

例如:

.foo {
  -moz-border-radius: 5px;
  border-radius: 5px;
}
5.遵守 CSSLint 规则
font-faces                 不能使用超过5个web字体
import                    禁止使用@import
regex-selectors              禁止使用属性选择器中的正则表达式选择器
universal-selector           禁止使用通用选择器*
unqualified-attributes       禁止使用不规范的属性选择器
zero-units                  0后面不要加单位
overqualified-elements       使用相邻选择器时,不要使用不必要的选择器
shorthand                 简写样式属性
duplicate-background-images    相同的url在样式表中不超过一次

更多的 CSSLint 规则可以参阅:https://github.com/CSSLint/csslint

6.不要使用 @import

使用 @import 引入 CSS 会影响浏览器的并行下载。使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后,浏览器才会知道还有另外一个 CSS 需要下载,这时才去下载,然后下载后开始解析、构建 Render Tree 等一系列操作。

多个 @import 会导致下载顺序紊乱。在 IE 中,@import 会引发资源文件的下载顺序被打乱,即排列在 @import 后面的 JS 文件先于 @import 下载,并且打乱甚至破坏 @import 自身的并行下载。

<!-- 不使用 @import -->
<link rel="stylesheet" href="style.css">

<!-- 使用 @import -->
<style>
  @import url("style.css");
</style>

7.避免过分重排(Reflow

重排是指浏览器根据DOM结构和CSS样式计算元素的几何属性(如位置、大小等),过多的重排会影响渲染性能。应尽量避免频繁改变元素的样式或布局,可以通过批量修改样式、使用 CSS3 动画等方式来减少重排。

常见的重排元素:

width 
height 
padding 
margin 
display 
border-width 
border 
top 
position 
font-size 
float 
text-align 
overflow-y 
font-weight 
overflow 
left 
font-family 
line-height 
vertical-align 
right 
clear 
white-space 
bottom 
min-height
8.依赖继承

CSS中的继承可以减少对特定元素的样式定义,从而减少渲染时间。可以利用继承来减少对子元素的样式定义,让样式在DOM树中向下传递。

/* 利用继承减少样式定义 */
.parent {
  color: red;
}
.child {
  /* 子元素继承父元素的颜色 */
}

/* 不使用继承,直接定义子元素的样式 */
.parent {
  /* ... */
}
.child {
  color: red;
}
9.值缩写

使用值缩写可以减少CSS代码量,并且可以提高解析速度。例如,将margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;改为margin: 10px 20px;

这样可以减少代码量,提高解析速度。

/* 不使用值缩写 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* 使用值缩写 */
margin: 10px 20px;
10. 避免耗性能的属性

一些CSS属性对于浏览器来说是比较昂贵的操作,会影响渲染性能。如果不是必要的话,应尽量避免使用这些属性。

例如,box-shadowborder-radius都是比较耗性能的属性。

/* 使用耗性能的属性 */
.box {
   box-shadow: 0 0 5px rgba(0,0,0,0.5);
   border-radius: 5px;
}
11. 背景图优化合并

将多个小背景图合并为一个大背景图可以减少请求次数和文件大小,提高加载速度。可以使用CSS的background-position来定位合并后的背景图。

/* 不优化合并的背景图 */
.box1 {
   background-image: url('image1.jpg');
   /* ... */
}

.box2 {
   background-image: url('image2.jpg');
   /* ... */
}

/* 优化合并的背景图 */
.box {
   background-image: url('combined.jpg');
   /* ... */
}

/* 定位合并后的背景图 */
.box1 {
   background-position: 0 0;
}

.box2 {
   background-position: -100px 0;
}
12. 文件压缩

将多个CSS文件合并为一个文件,并进行压缩可以减少请求次数和文件大小,提高加载速度。可以使用工具如CSS压缩器来压缩CSS文件。

/* 不进行文件压缩和合并 */
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

/* 进行文件压缩和合并 */
<link rel="stylesheet" href="combined.min.css">

😶 写在结尾

前端设计模式专栏
在这里插入图片描述
设计模式是软件开发中不可或缺的一部分,它们帮助我们解决了许多常见问题,并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中,我们介绍了所有的前端设计模式,包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式,并将其应用于实际项目中,我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式,写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏
在这里插入图片描述
Vue.js是一款流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动和组件化的方式,使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中,我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面,并探索其强大的生态系统,如Vue Router和Vuex、Pinia。通过学习这些内容,你将能够成为一名熟练的Vue.js开发者,并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript(ES6)专栏在这里插入图片描述
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点,是构建现代Web应用程序的重要工具之一。在这个专栏中,我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6(ECMAScript 2015)及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript(ES6)专栏

文章来源:https://blog.csdn.net/csdn9_14/article/details/135337215
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。