如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性。

 

1、尽量将样式写在单独的css文件里面,在head元素中引用

(1)内容和样式分离,易于管理和维护

(2)减少页面体积

(3)css文件可以被缓存、重用,维护成本降低

2、不使用@import

如果你使用@import属性引入css的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格

3、避免使用复杂的选择器,层级越少越好

项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。建议选择器的嵌套最好不要超过三层,简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

4、精简页面的样式文件,去掉不用的样式

(1)样式文件偏大,影响加载速度

(2)浏览器会进行多余的样式匹配,影响渲染时间。

根据当前页面需要的css去合并那些当前页面用到的CSS文件, 合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。

5、利用CSS继承减少代码量

我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。

6、慎重使用高性能属性:浮动、定位;

一方面,浮动的种种复杂的布局规则注定了它是一种试探性局部 reflow 式的布局算法。浏览器需要花费很多精力来处理它。另一方面,浮动元素的布局牵涉到的因素更多。在同一布局空间中,所有浮动元素均存在于“静态层”之上的“浮动层”,不仅浮动层中的多个浮动元素会相互影响,浮动元素与静态层也有互动。

7、css样式前缀

标准化各种浏览器前缀,带浏览器前缀的在前,标准的在后

8、css属性值

属性值为0时,不加单位
属性值为浮点数0.**时,可以省略小数点前的0

CSS Lint

这是一个发现CSS书写问题,提升性能的工具 ,如:

  • 修复解析错误(Parsing errors should be fixed)

  • 避免使用多类选择符(Don't use adjoining classes)

IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确

  • 移除空的css规则(Remove empty rules)

这个规则不包含任何属性,类似:.foo { }

空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

  • 正确使用display的属性(Use correct properties for a display)

由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。

  • 不滥用浮动(Don't use too many floats)

虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。

  • 不滥用web字体(Don't use too many web fonts)

对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

  • 不声明过多的font-size(Don't use too may font-size declarations)

这是设计层面的问题,设计精良的页面不会有过多的font-size声明。

  • 不在选择符中使用ID标识符(Don't use IDs in selectors)

主要考虑到样式重用性以及与页面的耦合性。

  • 不给h1~h6元素定义过多的样式(Don't qualify headings)

全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。

  • 不重复定义h1~h6元素(Heading styles should only be defined once)

  • 值为0时不需要任何单位(Zero values don't need units)

  • 标准化各种浏览器前缀(Vendor prefixed properties should also have the standard)

通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:

.foo {-moz-border-radius: 5px;border-radius: 5px; }
  • 使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require all browser prefixes)

  • 避免让选择符看起来像正则表达式(Avoid selectors that look like regular expressions)

CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。

  • 遵守盒模型规则(Beware of broken box models)

如何提高CSS性能?CSS优化、提高性能提升总汇的更多相关文章

  1. 使用ant对JS/CSS 进行压缩以提高网站性能

    减少HTTP请求是优化网站速度的一个重要手段, 所以对javascript/css两种文件进行压缩或合并都是非常必要的. 这里介绍利用ANT来自动进行文件合并和压缩. 3.1. javascript文 ...

  2. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  3. Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%。再往后,每提高0.1%,优化难度成指数级增长了。哪怕是千分之一,也直接影响用户体验,影响每天上万张机票的销售额。 在高并发场景下,提供了保证线程安全的对象、方法。比如经典的ConcurrentHashMap,它比起HashMap,有更小粒度的锁,并发读写性能更好。线程安全的StringBuilder取代S

    Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%.再往后,每提高0.1%,优化难度成指数级增长了.哪怕是千分之一,也直接影响用户体验,影响每天上万张机 ...

  4. 在ASP.NET Core中用HttpClient(四)——提高性能和优化内存

    到目前为止,我们一直在使用字符串创建请求体,并读取响应的内容.但是我们可以通过使用流提高性能和优化内存.因此,在本文中,我们将学习如何在请求和响应中使用HttpClient流. 什么是流 流是以文件. ...

  5. 推荐 greenrobot eventbus,简化安卓开发,提高安卓维护性,优化安卓性能

    最近在研究移动开发,广泛的阅读有关cordova,apicloud,android资料.发现安卓的开发还是很简单的.再发现greenrobot eventbus开源框架不仅可以简化安卓开发,有可以大幅 ...

  6. CSS重构:样式表性能调优

    这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章 ...

  7. 怎么提高ArcGIS for Desktop10.x的性能

    Esri新公布了一篇提高ArcGIS for Desktop10.x的性能的文章.大家能够关注一下 http://support.esri.com/en/knowledgebase/techartic ...

  8. 17款提高编码效率的CSS工具

    摘要:作为WEB前端开发人员,你的工作可能很大一部分都在编写CSS代码,为了提高前端开发人员编写CSS代码的效率,编程文库从 网上搜集了17款可以提高你CSS代码效率的CSS工具,它们可以帮助你快速生 ...

  9. 提高mysql memory(heap) engine内存性能的开源补丁_XMPP Jabber即时通讯开发实践_百度空间

    提高mysql memory(heap) engine内存性能的开源补丁_XMPP Jabber即时通讯开发实践_百度空间 提高mysql memory(heap) engine内存性能的开源补丁

  10. 8个提高效率的CSS实用工具

    CSS,也就是Cascading Style Sheets,推出于1997年,差不多是17年前,至此为我们开发网页大开方便之门,协助我们制作出一个又一个惊艳绝伦的网站设计和模板,提升了我们的创造能力, ...

随机推荐

  1. Java实现有理数的循环节

    1/7 = 0.142857142- 是个无限循环小数. 任何有理数都可以表示为无限循环小数的形式. 本题目要求即是:给出一个数字的循环小数表示法. 例如: 输入: 1,5 则输出: 0.2 输入: ...

  2. 第一章01-正常情况下Activity的生命周期

    一.Android下能见到的界面 Window Dialog Toast Activity 二.Activity的生命周期分析 典型情况下的生命周期 ​是指在有用户参与的情况下,Activity所经过 ...

  3. 2019-02-02 Python学习之死锁和Rlock

    死锁:"当一个线程永远地持有一个锁,并且其他线程都尝试去获得这个锁时,那么它们将永远被阻塞" e.g. import threading import time mutexboy ...

  4. (六)POI-操作Excel的poi的字体设置

    原文链接:https://blog.csdn.net/class157/article/details/92817286 package com.java.poi; import org.apache ...

  5. MySQL ORDER BY:对查询结果进行排序

    在 MySQL SELECT 语句中,ORDER BY 子句主要用来将结果集中的数据按照一定的顺序进行排序. 其语法格式为: ORDER BY {<列名> | <表达式> | ...

  6. linux安装mysql使用yum安装

    安装MySQL 安装mysql客户端: yum install mysql 安装mysql 服务器端: yum install mysql-server 至此我就可以使用Yum简单地管理MySQL更新 ...

  7. 宝塔面板成功部署Django项目流程

    宝塔面板部署Django项目完整流程 上线Django项目记录,超简单,避免无意义的踩坑! 第一步:安装python管理器 在宝塔在线面板安装“python项目管理器” 第二步:安装适配python版 ...

  8. .Net Core微服务入门全纪录(六)——EventBus-事件总线

    前言 上一篇[.Net Core微服务入门全纪录(五)--Ocelot-API网关(下)]中已经完成了Ocelot + Consul的搭建,这一篇简单说一下EventBus. EventBus-事件总 ...

  9. Java基础-Java中transient有什么用-序列化有那几种方式

    此文转载于知乎的一篇文章,看着写的非常全面,分享给大家. 先解释下什么是序列化 我们的对象并不只是存在内存中,还需要传输网络,或者保存起来下次再加载出来用,所以需要Java序列化技术. Java序列化 ...

  10. Kali中密码暴力破解工具hydra的使用

    前言 hydra是著名黑客组织thc的一款开源的暴力破解密码工具,功能非常强大,kali下是默认安装的,几乎支持所有协议的在线破解.密码能否破解,在于字典是否强大.本文仅从安全角度去讲解工具的使用,请 ...