优化你的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:

1、不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释:因为ID选择器是唯一的,加上div反而增加不必要的CSS匹配。
2、不要在class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
3、尽量少使用层级关系
一般写法:#divBoxp.red{color:red;}
更好写法:.red{..}
4、使用class代替层级关系
一般写法:#divBoxullia{display:block;}
更好写法:.block{display:block;}
5、在css渲染效率中id和class的效率是基本相当的
class最在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。

PC--CSS优化的更多相关文章

  1. 常用CSS优化总结——网络性能与语法性能建议

    在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...

  2. (转)常用CSS优化总结——网络性能与语法性能建议

    原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...

  3. 关于js优化和css优化

    css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...

  4. 教你如何写出高效整洁的 css 代码——css优化(转载)

    css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...

  5. css优化,提高性能

    CSS 优化主要是四个方面: 加载性能比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积.减少阻塞加载.提高并发方面入手,任何 hint ...

  6. CSS优化压缩

    顾名思义缩写有简写意思,那就总结一下CSS缩写知识点.为什么要让CSS属性缩写?1.简化代码.一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节.加快网页下载速度和网页加载速度.2.优化 ...

  7. css优化篇

    平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿. 首先,CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都 ...

  8. PHP中,JS和CSS优化工具Minify的使用方法

    为减少HTTP请求,我们往往需要合并和压缩多个JS和CSS文件,下面记录下网上关于实现这个功能的PHP源码以及开源项目Minify的使用方法 一.实现合并和压缩多个JS和CSS文件的代码请参考 1.一 ...

  9. js css优化-- 合并和压缩

    在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...

  10. WEB前端性能优化之二——css优化

    1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...

随机推荐

  1. Oracle 中按条件过滤重复记录

    在数据处理中,经常会遇到类似这样的情况:数据库中存在多条记录,其中某些字段值相同,其他字段值不同.实际的业务需要针对这样的情况,只保留一条数据,其他数据删除.如何做到呢?在sql中有top关键字相对容 ...

  2. 简学LINGO(三)——实例篇

    1. 装配线平衡模型 一个装配线含有一系列的工作站.在终于产品的加工过程中每一个工作站运行一种或者是几种特定的任务.装配线周期是指全部工作站完毕分配给他们各自任务所花费时间的最大值.平衡装配线的目标是 ...

  3. AVR32开发环境搭建

    下面是搭建AVR32开发环境的过程记录: 1.AVR32的编译环境下载  (到这里下载  as5installer-stable-5.1.208-full.exe) 如果你在安装的过程中碰到如下问题: ...

  4. [Redux] React Todo List Example (Filtering Todos)

    /** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...

  5. gcc/g++/make 编译信息带颜色输出

    假设编译一个项目错误警告太多.很不好找,所以很希望输出信息能够带有颜色. 但是 gcc 4.9.0 之前的版本号并不支持,非常多情况下是不能替换编译器的,比方使用交叉编译器, 也能够使用 colorg ...

  6. Sysbench - 一种系统性能benchmark

    SysBench是一款开源的.跨平台的.模块化的.多线程的性能测试工具,通过高负载地运行在数据库上,可以执行CPU/内存/线程/IO/数据库等方面的性能测试.用于评估操作系统的性能参数. 1      ...

  7. oracle监听

    启动实例时,监听程序进程会建立一个指向Oracle DB 的通信路径.随后,监听程序可接受数据库连接请求.使用监听程序控制实用程序可控制监听程序.使用lsnrctl,可以:• 启动监听程序• 停止监听 ...

  8. java基础之代理

    代理的定义,代理的应用,代理的特性

  9. IOC设计模式初步了解(day02)

    IOC(Inversion of Control):控制反转. *其他解释:依赖注入.依赖反转…… 设计目标:简化JEE的研发工作,提供IOC容器,控制bean的生成.注入,解耦. 看了网上的一些帖子 ...

  10. C/C++中的空类及抽象类大小

    代码: #include <iostream> using namespace std; struct A{ }; struct B{ int i; }; class C:B{ ; }; ...