优化你的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. [RxJS] Reactive Programming - Rendering on the DOM with RxJS

    <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery- ...

  2. js方法调用

    <!DOCTYPE html> <html> <head> <title>测试</title> </head> <body ...

  3. C# winform带进度条的图片下载

    代码如下: public partial class FrmMain : Form { public FrmMain() { InitializeComponent(); } private void ...

  4. .NET开发人员必须知道的八个网站

    对于不熟悉.NET技术的朋友,需要说明一下,.NET提供了一个平台和一些相应的工具,.NET开发人员可以使用它们来在开发Windows桌面,互联网,甚至是手持移动设备上构建极富交互性的应用.很有可能你 ...

  5. C#上传图片同时生成缩略图,控制图片上传大小。

    #region 上传图片生成缩略图 /// <summary> /// 上传图片 /// </summary> /// <param name="sender& ...

  6. 理解SQL SERVER中的分区表(转)

    简介 分区表是在SQL SERVER2005之后的版本引入的特性.这个特性允许把逻辑上的一个表在物理上分为很多部分.而对于SQL SERVER2005之前版本,所谓的分区表仅仅是分布式视图,也就是多个 ...

  7. CSS 设计模式一 元素

    1.background  内置 是一种CSS内置设计模式,支持在元素下显示图片 HTML <!DOCTYPE html> <html lang="en"> ...

  8. 诡异的SpriteKit 游戏查错

    在Endless Runner 游戏中,做了一些atlas后,发现有个问题,当player跳跃起来的时候,发现他没有动画了,被默认的X图片代替.原来的图像是这样的. 在增加了一些动画后,我的效果就成这 ...

  9. int.Tryparse() 、int.parse()、Convert.To32() 的区别

    int.Tryparse()  Int32.TryParse(source, result)则无论如何都不抛出异常,只会返回true或false来说明解析是否成功,如果解析失败,调用方将会得到0值. ...

  10. 6、统计solr目录索引信息

    package com.main.java.solr.statistics; import org.apache.lucene.document.Document; import org.apache ...