css新特性(如何提高css的性能)

  CSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于定义网页内容外观和样式的标记语言。CSS与HTML(超文本标记语言)一起使用,为网页提供了更丰富的样式和布局控制。

image.png

  通过使用CSS,您可以对网页中的元素(如文本、图像、链接等)进行样式设置,包括字体、颜色、背景、边框、布局和动画效果等。CSS使用选择器(Selector)来选择要应用样式的元素,并使用属性(Property)和值(Value)来定义元素的样式。

  一、CSS3 新特性

  1、颜色: 新增 RGBA , HSLA 模式

  2、文字阴影(text-shadow)

  3、边框: 圆角(border-radius) 边框阴影 : box-shadow

  4、盒子模型: box-sizing

  5、背景:background-size background-origin background-clip

  6、渐变: linear-gradient , radial-gradient

  7、过渡 : transition 可实现属性的渐变

  8、自定义动画 animate @keyfrom

  9、媒体查询 多栏布局 @media screen and (width:800px) {…}

  10、border-image 图片边框

  11、2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

  12、字体图标 iconfont/icomoon

  13、弹性布局 flex

  二、四个 CSS 性能优化技巧。

  1. 使用内联样式

  如果给定样式仅用于单个特定页面元素(例如图像滑块或轮播)并且该组件仅用于站点中的少数页面,请使用内联样式而不是通用加载的 CSS 文件。这不仅会减少外部样式表的大小,还会减少在不使用该组件的页面上发生的 CSS 选择器评估的数量。

  2. 使用特定的样式

  不要将样式应用于通用选择器、后代选择器和顶级 HTML 元素。这样做会触发许多布尔评估。相反,通过选择更细粒度的元素(例如单个类样式)来优化 CSS 性能。

  3. 使用 WebComponents 优化 CSS

  WebComponents 是自包含的,减少了对共享 CSS 和 JavaScript 的需求,WebComponents 框架是一种相对较新的基于标准的方法,用于创建可重用组件,其中 JavaScript 和样式是自包含和隔离的。当你将组件所需的样式保留在全局共享的 CSS 文件之外时,你不会看到对站点的其他区域的性能影响,因为未使用的样式应用程序会不必要地消耗时钟周期。

  4. 拆分你的 CSS 文件

  如果你的许多 CSS 文件是针对特定浏览器或设备定制的,请将这些样式分解为多个 CSS 文件。在运行时,仅加载必要的那些。

  这个 CSS 性能优化技巧将需要一些客户端 JavaScript 或服务器端处理来完成,但对用户的好处将值得付出额外的努力。

  例如,如果移动和桌面呈现显着不同,这可能会在每种设备类型上将文档对象模型 (DOM) 评估的数量减少 50%。


发表评论

评论列表

还没有评论,快来说点什么吧~