美文网首页
CSS:CSS的优化

CSS:CSS的优化

作者: meow_possion | 来源:发表于2020-05-24 18:46 被阅读0次

提升css渲染性能

  • 谨慎使用expensive属性
    比如nth-child伪元素,position: fixed, position: absolute等,因为这些是比较耗费浏览器的性能的
  • 减少样式层级数
  • 尽量避免使用占用CPU和内存的属性。
    比如:text-indent: -99999px(文字缩进)
    首先这个值比较大,其次text-indent 就是比较耗费CPU
  • 尽量避免使用耗电量大的属性,使用到GPU加速的
    如css3 transforms、 css3 transitions、Opacity

合适使用css选择器

  • 尽量避免使用css表达式
    比如 background-color: expression((new Date()).getHours()%2 ? '#FFF': '#000');
  • 尽量避免使用通配选择器
    比如 body > a { font-weight: bold; }
    因为body里面可能有很多元素,这个选择器需要在body里面找到所有的元素,并从中选出a,非常耗费性能
  • 尽量避免类正则的属性选择器
    比如 *= , |= , ^=, $=

提升css文件加载的性能

  • 使用外链的css
    内联的css是放在html文件里面,不如用外链。外链的css文件可以放在cdn上,每次访问都有缓存。可以减少HTML页面体积的大小。
  • 尽量避免使用@import
    在css文件中使用@import的话,在加载css的时候,需要将这些文件都加载进来。也就是串行加载。而在外部引入css的话,浏览器支持并行下载。所以使用@import会阻塞到css的加载,也会影响到js的加载。

精简css的代码

  • 使用缩写语句
    比如margin-left和margin-right等可以放在margin里面设置。
  • 删除不必要的0
  • 删除不必要的单位,比如px
  • 删除过多的分号
  • 删除空格和注释
  • 尽量减少样式表的大小

合理使用web fonts

  • 将web fonts的字体文件部署到cdn上
  • 将字体以base64的形式保存在css中并通过localstorage进行缓存
  • Google字体库因为某些不可抗拒的原因了,应该使用国内托管服务。

css动画优化

  • 尽量避免同时动画
    在一个用户访问屏幕的这个区间里面不要有过多的动画,动画太多首先会打乱用户预览网站的节奏,其次是影响浏览器的性能
  • 延迟动画的初始化
    可以先保证其他css正常的渲染,而动画可以延迟0.5~1秒才开始
  • 结合svg
    因为svg是矢量的,可以把动画放到svg中展示

相关文章

  • 优化web前端性能

    优化css性能很多css需要通过HTTP请求来引入(除非使用内联css),所以尽量优化css。不要使用@impor...

  • CSS相关汇总

    CSS命名规范 CSS基础知识 CSS优化技巧 CSS的继承关系 CSS的选择器关系介绍

  • CSS样式优化(2019-02-18)

    对于CSS优化可以从网络性能和css语法优化两方面来考虑。 1.css压缩 压缩css代码的工具:A、YUI co...

  • Web 性能优化:21 种优化 CSS 和加快网站速度的方法

    摘要: 优化CSS。 原文:Web 性能优化:21 种优化 CSS 和加快网站速度的方法 作者:前端小智 Fund...

  • CSS性能优化的技巧

    CSS性能优化的技巧 1、内联首屏关键CSS 将CSS直接内联到HTML中能使CSS更快速地下载。而使用外部CSS...

  • 前端知识汇总(渲染篇)

    前端优化的手段 js css压缩合并 css在上,js在下(defer,async) 图片压缩、CSS-sprit...

  • css实现上下轮播

    利用css实现上下轮播,但是会出现卡顿,可以优化 css html

  • CSS:CSS的优化

    提升css渲染性能 谨慎使用expensive属性比如nth-child伪元素,position: fixed, ...

  • 12月7日的web前端面试

    一、代码优化的方法CSS优化:1、利用继承Css的继承机制可以帮我们在一定程度上缩减字节数,我们知道css很多属性...

  • 性能优化

    内容优化 服务器优化 Cookie优化 CSS优化 javascript优化 图像优化

网友评论

      本文标题:CSS:CSS的优化

      本文链接:https://www.haomeiwen.com/subject/fjirnhtx.html