PC--CSS优化
优化你的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优化的更多相关文章
- 常用CSS优化总结——网络性能与语法性能建议
在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时多少会用到一些,但突然问我,很难把自己知道的都说出来.页面优化明显不是一两句能够说完的,这两天总结了一下 ...
- (转)常用CSS优化总结——网络性能与语法性能建议
原文地址:http://www.cnblogs.com/dolphinX/p/3508657.html 在前端面试中最常见的问题就是页面优化和缓存(貌似也是页面优化),被问了几次后心虚的不行,平然平时 ...
- 关于js优化和css优化
css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...
- 教你如何写出高效整洁的 css 代码——css优化(转载)
css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1. ...
- css优化,提高性能
CSS 优化主要是四个方面: 加载性能比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积.减少阻塞加载.提高并发方面入手,任何 hint ...
- CSS优化压缩
顾名思义缩写有简写意思,那就总结一下CSS缩写知识点.为什么要让CSS属性缩写?1.简化代码.一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节.加快网页下载速度和网页加载速度.2.优化 ...
- css优化篇
平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿. 首先,CSS的优化工作主要从两个方面着手 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些 语法性能:同样都 ...
- PHP中,JS和CSS优化工具Minify的使用方法
为减少HTTP请求,我们往往需要合并和压缩多个JS和CSS文件,下面记录下网上关于实现这个功能的PHP源码以及开源项目Minify的使用方法 一.实现合并和压缩多个JS和CSS文件的代码请参考 1.一 ...
- js css优化-- 合并和压缩
在项目框架中,首先要引用很多css和js文件,80%的用户响应时间都是浪费在前端.而这些时间主要又是因为下载图片.样式表.JavaScript脚本.flash等文件造成的.减少这些资源文件的Reque ...
- WEB前端性能优化之二——css优化
1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...
随机推荐
- Laravel Eloquent ORM
Eloquent ORM 简介 基本用法 集体赋值 插入.更新.删除 软删除 时间戳 查询范围 关系 查询关系 预先加载 插入相关模型 触发父模型时间戳 与数据透视表工作 集合 访问器和调整器 日期调 ...
- Android Fragment详解(四):管理Fragment
要管理fragment们,需使用FragmentManager,要获取它,需在activity中调用方法getFragmentManager(). 你可以用FragmentManager来做以上事情: ...
- JavaScripts学习日记——ECMAscript
1.Function对象 Function是一个很特殊的对象,特殊在该对象就像java中的方法一样,可以运行,可以传参数. 三种定义function对象的方法: 1.function fun1(a,b ...
- sybase从表A创建表B
sybase从表A创建表B 例如:需要创建一张表B,表的内容及结构跟表A完全一样,类似于SQL SERVER中的CREATE TABLE A AS SELECT * FROM B; 在sybase中只 ...
- Oracle CheckPoint进程
在实例经过分配内存结构,加载控制文件后,然后要打开数据库的时候,需要做到控制文件,数据文件,联机重做日志保持相互状态一致性,数据库才可以打开.当数据库发生实例不正常关闭时(比如系统掉电或者Shutdo ...
- XMLHttpRequest取得响应
RresponseText:获得字符串形式的响应数据 responseXML:获得XML形式的响应数据 status和statusText:以数字和文本形式返回HTTP状态码 getAllRespon ...
- zookeeper应用——集中配置管理系统的实现
http://blog.csdn.net/huangfengxiao/article/details/8844239
- POJ 1286 Necklace of Beads(项链的珠子)
Necklace of Beads Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7874 Accepted: 3290 ...
- myeclipse 不能添加非myeclipse开发的项目
这是因为以前的项目不是用myEclipse创建的,所以用myeclipse deploy的时候找不到你的项目.可以这样做:右击原项目名 - myeclipse - Add Web Project Ca ...
- 百度ueditor 上传图片后如何设置样式
最近项目中遇到一个问题,UEditor上传图片后,在内容展示会修改图片样式.但是表情也是img标签,所以全局修改是有问题的, 所以只能着手修改一下插件的代码. 首先找到图片上传的服务器段文件.这里主要 ...