首页 > 教程 > 关键词  > CSS+DIV,CSS,CSS教程最新资讯  > 正文

CSS的渲染效率----书写高效的CSS

2008-11-13 15:10 · 稿源:互联网

根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS。

1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。

* 不赞成 - color:#f3a;

* 建议用 - color:#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。

* 不赞成 - visibility:hidden;

* 建议用 - display:none;

3、border:none;与border:0;的区别

和display与visibility的关系类似,分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框,但它会为你保留border-color/border-style的使用权。

* 不赞成 - border:0;

* 建议用 - border:none;

4、不宜过小的背景图片平铺

一张宽高1px的背景图片,虽然文件体积非常之小,但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关,最大的图片文件体积保持约70KB。

* 不赞成 - 宽高8px以下的平铺背景图片

* 建议用 - 衡量适中体积及尺寸的背景图片

5、IE的滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜,可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明,因为IE7以上已经支持了PNG透明。

* 不赞成,滥用IE滤镜因为消耗资源外也有兼容性问题。

* 建议用,最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

*号通配符把所有标签都初始化一遍,浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异,或是某些已经不推荐使用的标签(因为你不会去用它),它们不需通配符要重新初始化一遍这样做能节省一点资源。

* 不赞成,使用*号通配符

* 不赞成,div span button b table等标签纳入通配符控制内外填充样式

* 建议用,有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

如果你有一个选择器是以id作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。

* 不赞成 - button#backButton { }

* 不赞成 - .menu-left #newMenuIcon { }

* 建议用 - #backButton { }

* 建议用 - #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。

* 不赞成 - treeitem[mailfolder=”true”] > treerow > treecell { }

* 建议用 - .treecell-mailfolder { }

9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。

* 不赞成 - treehead treerow treecell { }

* 好一点,但还是不行(参照下一条) - treehead > treerow > treecell { }

10、标签类中不要包含子选择符

不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)

* 不赞成 - treehead > treerow > treecell { }

* 建议用 - .treecell-header { }

11、留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。

* 不赞成 - treeitem[IsImapServer=”true”] > treerow > .tree-folderpane-icon { }

请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

* 建议用 - .tree-folderpane-icon[IsImapServer=”true”] { }

举报

  • 相关推荐
  • SSD Fans评测:忆联消费级SSD AM541|强性能 高可靠 长守护

    国内知名技术社区SSD Fans对忆联消费级SSD AM541进行了深度评测。这款PCIe4.0固态硬盘采用3D NAND闪存颗粒和最新主控芯片,1TB版本顺序读取速度达7143MB/s,写入6037MB/s,远超标称值。评测显示AM541在性能、压力测试和可靠性方面表现优异,采用无缓存DRAM-Less设计配合智能SLC缓存机制,在CDM、SNIA标准测试中均展现业界领先水平。游戏实测《FF14》加载仅7.445秒,《黑神话:悟空》启动快40%,充分满足消费级用户对高性能存储的需求,展现了忆联在存储领域的技术实力。

  • Checkout.com携手Visa推出发卡业务 (Card Issuing)

    Checkout.com与Visa达成战略合作,在英国及欧洲地区推出全方位发卡业务。通过Visa全球支付网络,商户可即时获取收款资金用于支付供应商款项,显著提升资金使用效率。该合作特别针对旅游业企业,解决其支付流程分散、资金周转慢的痛点。Checkout.com每年处理数千亿交易的技术能力与Visa网络结合,帮助商户消除预存资金需求,优化现金流管理。双方表示这将大幅提升欧洲商户运营效率,释放增长潜力。

  • 免费入场+高能福利!AGON爱攻ChinaJoy CS水友赛玩家招募通道即刻开启

    2025年ChinaJoy将于8月1-4日在上海举办,AGON爱攻将携手完美世界电竞打造精彩赛事活动。亮点包括:水友可报名与传奇战队"钢盔队"对决,还有机会与三大CS主播组队;现场将展示多款电竞显示器新品,包括CS24A定制款;参与互动问答和抽奖有机会赢取AGON大礼包。活动地点为N1-G201完美世界展区主舞台,14:00开赛。线上观众关注B站AGON官方账号参与话题互动也有福利。这是一�

  • BOSS直聘通报“王某香”涉黄简历:男子恶意编造 已被刑拘

    今日,@BOSS直聘在微博就近日网络热议的“简历涉黄”事件作出回应。 此前,网络流传BOSS直聘平台上一名自称“王某香”的求职者与招聘方沟通时出现低俗信息。这些截图在社交媒体迅速热传,引发公众对BOSS直聘存在“色情招聘”的强烈声讨。 针对这一事件,BOSS直聘迅速与警方展开核实工作。经查,账号使用人为一尹姓男子,该男子为寻求刺激,盗用他人信息,冒充女性�

  • OpenAI发布2款开源模型:gpt-oss系列 能力接近o3和o4-mini

    OpenAI发布开源模型系列GPT-OSS,包含120B和20B两个版本。120B旗舰模型适配单H100 GPU架构,20B轻量版适合边缘计算。两款模型均开放完整推理链监控接口,支持动态参数调节和任务微调优化,性能接近闭源的GPT-O3和O4-mini。该系列突破性地支持代理功能,包括网页交互和Python代码执行,在标准化测试中表现优异。开源策略为开发者提供高性能替代方案,重新定义了AI模型的应用边界。

  • Custouch市场易AI技术入选Topdigital2025全球AI营销图谱

    《TopDigital2025全球AI营销图谱》近日发布,Custouch市场易入选"内容智能生成"板块。该图谱为AI技术重构营销提供全链路产业地图,整合企业官网、学术报告、专利库等多维度信息。Custouch凭借AI技术在B2B营销领域的创新应用入选,其智能解决方案能有效满足企业实际需求。作为数字营销技术服务商,Custouch已为300+国际头部企业提供一站式营销管理体系,涵盖内容、活动、线索等全流程,助力企业实现高质量增长。此次入选既是对其AI成果的肯定,也是对其未来发展的激励。

  • Razer(雷蛇)在新加坡设立AI CENTER OF EXCELLENCE,加速人工智能投资布局

    雷蛇宣布在新加坡设立全球AI卓越中心,并计划在欧洲和美国建立类似机构,推动游戏与开发者工具领域的创新。新加坡中心将招聘150名AI工程师,专注于下一代AI游戏技术研发。雷蛇还推出AI工具套件,包括Game Co-AI和QA Co-AI,帮助开发者提升游戏质量和开发效率。该战略布局正值全球游戏市场快速增长期,预计2033年AI游戏市场规模将达280亿美元。新加坡数字产业发展局表示,此举将巩固该国作为区域AI创新中心的地位。

  • 阿里云vTrus SSL证书夏季大促,最高直降60%!

    阿里云推出vTrus+SSL证书服务,简化HTTPS部署流程,提升云上证书管理效率。该国产证书已通过国际WebTrust认证,兼容360、奇安信等主流浏览器,并深度参与Tongsuo开源社区建设。2025年7月1日至31日,阿里云推出SSL证书限时优惠活动:GeoTrust证书首购4折起,全系列证书享"新老同享"75折优惠,助力企业实现安全高效的国产化证书部署需求。

  • 深化中坦经贸合作 谱写东非璀璨新篇!东非商贸物流中心(EACLC)正式启航

    2025年8月1日,东非商贸物流中心(EACLC)在坦桑尼亚达累斯萨拉姆隆重开业,标志着这一中坦重点合作项目正式投入运营。该项目总投资超1.7亿美元,建筑面积7.5万平方米,可提供2060个商铺和1000个停车位,将打造连接非洲与全球市场的战略枢纽。坦桑尼亚总统哈桑出席典礼,盛赞该项目对促进当地经济现代化、提升贸易效率的示范作用。作为"一带一路"务实合作项目,EACLC已促成中非进出口总额达9亿美元,其中山东企业贡献占比60%,极大提升了中国商品在非洲的影响力。项目计划到2026年扩展至13万平方米,目标实现年贸易额20亿美元,服务超千家中资企业,成为中国商品进入非洲的前沿窗口。

  • AI CRM如何跨越落地鸿沟?场景驱动与数据闭环成关键

    销售易发布中国首款AI CRM产品NeoAgent,标志着CRM行业进入智能化变革。该产品基于腾讯混元大模型+DeepSeek开源模型,提供多场景智能解决方案。AI CRM的核心价值在于数据驱动,通过构建统一客户数据平台,实现销售全流程智能化。目前已在客户服务、销售助理等场景落地,其中销售助理Agent可提升70%事务性工作效率。企业应用AI需关注数据基础与场景适配性,销售易通过"场景需求-产品供给-使用反馈-快速迭代"的闭环模式,推动AI CRM持续进化。在Agentic AI时代,数据能力成为企业智能化转型的关键竞争力。

热文

  • 3 天
  • 7天