优化你的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. C# WPF 建立无边框(标题栏)的登录窗口

    前言:笔者最近用c#写WPF做了一个项目,此前未曾做过完整的WPF项目,算是一边学一边用,网上搜了不少资料,效率当然是不敢恭维的,有时会在一些很简单的问题上纠结很长时间,血与泪的教训可不少. 不过,正 ...

  2. 监控工具nagios

    Nagios 简介是一个开源软件,可以监控网络设备网络流量.Linux/windows主机状态,甚至可以监控打印机它可以运行在Linux上或windows上基于浏览器的web界面方便运维人员查看监控项 ...

  3. asp.net操作xml(增删查改)

    asp.net操作xml 1.xml文档Products.xml <?xml version="1.0" encoding="utf-8"?> &l ...

  4. <经验杂谈>查询表结构的SQL语句

    在我们使用SQL数据库的过程中,经常会遇到查询表结构的情况,以下就是sql语句的写法: --查询非系统数据库 SELECT name FROM Master..SysDatabases 查询数据库下所 ...

  5. c# 鼠标操作

    1#region 3using System; 4using System.Runtime.InteropServices; 6#endregion 8namespace Windows.Forms. ...

  6. 分享一个在线制作GIF格式loading图片的好网址

    等待您寻找惊喜:http://preloaders.net/

  7. sealed 修饰符

    当对一个类应用 sealed 修饰符时,此修饰符会阻止其他类从该类继承. 在下面的示例中,类 B 从类 A 继承,但是任何类都不能从类 B 继承. class A {} sealed class B ...

  8. Material Design说明

    原文链接: Material Design 引言 我们挑战自我,为用户创造了一种视觉语言,综合了好设计的经典原则,革新以及科技的可能性.这就是material design.这份说明是一个动态的文档, ...

  9. css 文本域textarea显示成label标签

    <html> <head>     <title>textarea显示为label</title> <style type="text/ ...

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

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