首页 > 优化 > 关键词 > 网站性能优化最新资讯 > 正文

网站性能优化之CSS无图片技术

2014-11-19 15:41 · 稿源:微博UDC

一、无图片技术定义

在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果的技术。

二、为什么要“无图片”?

首先我们通过yslow的statistics查看新浪微博最新版首页的文件,得到Stylesheet File(CSS文件)大小为206.8K, CSS Image大小为623.8K。明显发现CSS文件比CSS Image小很多。

当然单纯拿这两个来比,还不能说明什么。

下面我们通过计算来说下CSS文件与CSS Image关系

CSS Image是由一系列的图片组成,每一张图,即使最小一个小箭头(如下图),你存成一张图片,怎么也得1KB吧。

例如微博的这个小三角图形:

如果我们全部以CSS的形式模拟这个小箭头,空间资源会占多少?我们来计算一下,首先贴下代码

HTML代码如下:

CSS代码如下:

从上面的代码可以看出,在CSS文件中总共不到200个字符,如果我们按照1字符等于1B的来计算的话,200个字符大概等于0.2KB,比直接用图片做节约了4/5的下载资源,明显减少请求资源的大小。如果我们尽可能的使用无图片技术来实现,明显可以提高页面的加载速度;其次,我们知道每一个CSS image都需要一个http请求去加载,浏览器每次发出的请求个数是有限的,减少CSS image的个数,显然减少了http请求数,也就提高页面的呈现速度;再次,经常使用微博的同学都知道,微博是可以换肤,如果使用CSS无图片技术,我们仅需要简单换一下CSS属性就能实现换肤,提高了代码的可维护性。

通过以上分析,使用CSS无图片技术,可以总结得到以下3个优点:

减少请求资源的大小

减少http的请求个数

提高可维护性

三、CSS无图片技术,微博中有哪些实际应用呢?

通过上面的展示,我们可以看到,无图片技术,在微博上应用是十分普遍的。

  • 相关推荐
  • 大家在看
  • 如何将访客转化为潜在客户?这个8个网站优化策略了解下

    你是否已经将自己的网站优化到最佳状态了呢?通过优化来产生潜在客户是转化网站已经获得的流量的最好方法之一。然而,如果你认为在网站的主页上添加几个“点击这里”的CTA策略(注:Callto Action,行动呼吁),就能获取更多的潜在客户,很遗憾的说,这个想法大错特错。

  • 一张图片卖到3000元天价,收费图片网站哪家更好?

    新媒体人常用的收费图片网站主要有以下八个,都是需要在线注册,PC端下载。每个特点都有所差别,并没有哪个面面俱到。

  • SEO优化,4个独辟蹊径的策略!

    有的时候SEO工作就是一个数字游戏,每天看着数据的增长,不断的调整相关性的策略,但我们非常清楚,有的时候SEO优化会面临各种调整,特别是同行业之间的竞争。

  • 优速快递聚力品效,不断实践 不断优化

    品效驱动货量 货量牵引收益收益拉动盈利 加速赢取未来品效、品效、品效。打牢集团底盘,以持续、稳定的品效服务驱动网络盈利能力,是集团决胜千里的不二法宝。加之,当前疫情所带来的挑战与机遇的双面性影响,我们更要聚焦品质和效率,伺机而起,不放过任何一个逆势而起的机遇。基于此, 4 月 17 日集团在全网吹响了为期 120 天的“品效提升季——全网在行动”战役号角。即集团总部高管、省区高层管理人员集体深入分拨中心操作一线

  • 车轮"加油"频道,深入优化客户体验

    近年来,得益于我国经济高速发展,人们的生活水平稳定提升,汽车消费呈现井喷之势。众所周知,汽车的使用离不开汽油的支持,因此,汽车加油成为用车养车中的主要消费项目。而使消费者在加油中感到便利和实惠,在当今社会人们日益忙碌,压力越来越大的情况下,显得尤为重要。专注于全国汽车生活服务领域的移动互联网公司车轮互联想车主所想,解车主之难,在全国范围内推出了加油服务,"价格优惠"和"一键加油"是其服务的亮点。目前,

  • 阅文优化新合同,网文产业的质变何时才能到来?

    距离阅文集团与网文作者的“合同纠纷”已隔一月,昨天,这一事件终于有了阶段性的进展。 6 月 3 日,阅文集团新管理层发布了针对旗下作者的“单本可选新合同”。阅文方面表示,该合同根据不同授权分为三类四种,取消单一格式合同,并对此前充满争议的旧合同进行了十余项修改,以长图的形式为网友们划出重点。 阅文新领导团队在这份合同中表现出来的尊重与诚意,获得了网文大神与业内专家的支持与认可。 与此同时,作为内容产业的?

  • 教你挑选香烟陈列优化神器——自动补货推进器

    自动补货器、香烟推烟器、卷烟推进器,一款陈列神器——推进器已被应用在各大商超。众所周知,为提升店铺档次,降低人工成本,减少损耗,提升满陈列效率,会想到借助自动理货器对商品进行整理,也就是——货架自动推进器,我们以香烟推进器作优势分析:1、使用了香烟推进器,丰富了香烟陈列场景,完善香烟陈列场景化,使不同的香烟陈列美观,丰富香烟陈列效果。2、一体成型工艺降低了人工组装成本,提高生产效率。和陈列柜,货架,?

  • 信息流优化策略与SEO搜索排名,有关联吗?

    最近,在和SEO你问我答群里小伙伴,私下交流的时候,总是在说一些流量获取的问题,而最为常讨论的情况就是SEO流量与信息流平台的流量。

  • 壹米滴答“品效提升季”优化全网服务品效

    品效驱动货量 货量牵引收益收益拉动盈利 加速赢取未来品效、品效、品效。打牢集团底盘,以持续、稳定的品效服务驱动网络盈利能力,是集团决胜千里的不二法宝。加之,当前疫情所带来的挑战与机遇的双面性影响,我们更要聚焦品质和效率,伺机而起,不放过任何一个逆势而起的机遇。基于此, 4 月 17 日集团在全网吹响了为期 120 天的“品效提升季——全网在行动”战役号角。即集团总部高管、省区高层管理人员集体深入分拨中心操作一线

  • 内存新锐ZADAK首次转战SSD:性能、外观都没得挑

    ZADAK这个品牌大家可能还不太熟悉,此前专注于高性能内存,现在第一次转战SSD固态硬盘,而且出手不凡,首款产品“SPARK PCIe Gen 3x4 M.2 RGB SSD”从外观设计到规格性能都非常出色。

  • 你不知道的,抖音直播间流量优化细则

    大批的新人主播涌入抖音,不少小白主播开始遇到没人看、没人买、不会推广、不会合作的各种问题,希望今天的文章能够帮你解决这些问题。

  • iOS 14必升理由?iPhone摄像头大幅优化

    iOS 14已经正式公布,并面向开发者推送升级,公测版Beta1预计7月份上线。iOS 14带来了主屏幕小部件(支持层叠)、App Library自动归类聚合、App Clips小程序、弹窗式来电界面、消息置顶、地图

  • 微软准备Windows Core OS:全力优化Chromium使用体验

    微软正在全力准备新的Windows系统Core OS,作为Windows 10的模块化版本,该软件旨在容纳多种不同外形尺寸的设备。除了类似Chromebook的廉价上网本,Core OS还可在双屏/折叠设备、以及HoloLens 2

  • 阅文发布优化版新合同 推出“单本可选新合同”

    今日,阅文集团宣布发布“单本可选新合同”,阅文称,该合同针对此前合同中的十余项条款进行了大刀阔斧的改革,作家可以登录作家助手APP内页面查看。此次合同匹配作家不同的发展需求分为三类四种,取消单一格式合同,推出了基础协议、授权协议、深度协议,满足不同作家的发展诉求。

  • 采用多项新技术,AVS3整体性能再提升

    近日,从AVS工作组第73次会议传来消息, 由于采用多项新技术,使得AVS3视频标准的整体性能再次得以提升:采纳ESAO、串预测、EAWP/MVR等技术,AVS3视频性能预计提升2.0%左右;屏幕内容编码性能提升10%以上;采用智能编码技术研究,性能比HPM7.1提高约6%。同时,为满足业界需求,组内开展了新一轮符合性测试验证工作,重新生成29条符合性测试码流通过测试验证。作为业界首个采用智能编码技术的音视频标准,AVS3创造性采用智能编码阶段性分档制定?

  • 小米10音频负优化?官方实测:没有变过 音响效果完全一样

    6月29日消息,针对米粉提出的小米10系列音频不同版本有差异、是否存在负优化这一问题,小米手机系统软件部总监张国全做出回应。张国全表示,工程师端午节假期在实验室分别测试了小米10、小米1

  • 深信服EDS存储携手Intel,以技术手段“提性能、降成本”

    在存储的世界中,「高性能」与「低成本」似乎是一个“鱼与熊掌不可兼得”的命题。现在,伴随着深信服EDS联合Intel SPDK,二者不可兼得的时代或将终结。作为Intel在中国的SPDK合作伙伴之一,深信服企业级分布式存储EDS使用Intel SPDK为编程框架,设计了全新的存储引擎,合力将“高性能、低成本”的理想照进现实。这次合作中,深信服EDS基于SPDK开发套件设计的存储引擎,不仅充分发挥出Intel硬件的性能,还构筑起高性能、低成本的存储架构,这?

  • 荣耀30怎么样?性能强劲技术领先的5G旗舰

    在今年的618活动中,荣耀推出的优惠活动格外亮眼。荣耀30系列在电商平台补贴价低至2699元,同时可享最高24期免息。对于这款一经发布就备受瞩目的5G手机,这样的活动力度可谓让人心动。活动开启当天荣耀30系列斩获全平台3000至5000元价位5G手机销量冠军,获得大众的认可。那么系列中呼声最高的荣耀30怎么样呢?这篇文章领你看一看。首先在外观方面荣耀30可谓一骑绝尘,有着5G手机中难得一遇的颜值。荣耀30首次采用超大logo设计,背?

  • 中国联通浙江分公司回应整改:年底前完成产品优化

    日前,浙江省消保委对中国联通浙江分公司就腾讯王卡套餐“专属流量不专属,免流软件不免流”等相关问题进行了约谈,并提出了整改要求。近日,中国联通浙江分公司向浙江省消保委发来整改回复函,并提出了相应的整改方案。

  • 英特尔发布第三代至强扩展处理器 首款针对AI进行优化

    英特尔公司在北京正式发布了第三代英特尔至强扩展处理器及全新的AI软硬件产品组合,旨在进一步助力客户在数据中心、网络及智能边缘环境中加速开发和部署AI及数据分析工作负载。值得一提的是英特尔Stratix10 NX也是英特尔首款针对AI进行优化的FPGA。此次英特尔推出的硬件和软件产品组合亮点包括:第三代英特尔“至强”可扩展处理器是首批内置bfloat16支持的主流服务器CPU,而bfloat16则是英特尔深度学

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议