说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

精简代码,为网站减负的十大建议

HTML文档下载 WORD文档下载 PDF文档下载
过于笨重的网站最终将影响用户体验。据统计,2013年每个网页文件的大小平均增加了32%。如何为网站减负,提高访问性能?本文列出了精简代码量的十大原则。

网站快速加载,是提供良好用户体验的前提。然而,网站功能的不断增多,程序包的不断臃肿,导致网站访问时较大的下载量,最终影响了响应速度。没有一个用户喜欢等待,如何减少代码量,为网站减去过多负担,Craig Buckler在sitepoint网站发表了一篇文章《10 Quick and Easy Fixes to Reduce Page Weight》,分享为网站减负的十个建议。下面为该文的编译内容。

2013年,网站页面的重量增加了32%,竟然达到了1.7MB,包含96个独立HTTP请求。这只是一个平均数值,其中近一半的网站已经超过了这个数值。网站的过度臃肿正趋于流行,其中很大的责任在于Web开发者。

过于笨重的网站将严重影响网站的最终体验,主要表现在以下四个方面:

  • 更大的下载量,导致更慢的用户体验。并不是每个人都拥有20M的网络连接,尤其是对于那些不发达地区。不管你的网站多么优秀,用户永远不希望等待。
  • 移动Web访问正迅速发展,移动网民几乎占到所有网民的1/4。在典型的3G网络连接下,一个1.7Mb的网站加载需要近一分钟。如果你的网站无法高效工作于这些移动设备,那采用响应式Web设计技术又有什么用呢?
  • 网站加载速度已被谷歌加入排名算法中。加载缓慢会降低网站排名,同时也会影响搜索引擎优化。
  • 网站包含的代码越多,更新和维护它所花费的时间就会越长。

Craig Buckler预言,2014年网页的重量将会下降。那如何精简代码,为网站减负呢?Craig Buckler给出了十条建议。这些建议中涉及到的技术均是大家熟知的。

1.启用GZIP压缩

根据 W3Techs.com上的数据显示,近一半的网站都未进行过压缩。在Web主机上,通过简单的服务器设置即可开启GZIP压缩。

2.支持浏览器缓存

如果浏览器能容易地缓存一个文件,那它就无需反复下载该文件了。实现该功能的一个解决方案,就是在HTTP头中设置合适的 Expires Header、上一次修改时间或采用的 ETags。

你可通过配置服务器来自动完成以上工作。下面是Apache中的.htaccess文件,其中的代码实现了“将所有图片缓存一个月”的功能。


3.使用CDN

浏览器限制了每个域中可同时处理的并发HTTP请求数量:4至8个。如果你的网页需要从域中加载96个资源,那浏览器最多可设置12组并发请求。(因为文件大小并不同,这种情况实际上并不会发生,但该限制仍然适用。)

如若从另一个域中请求静态文件,则可使浏览器处理的HTTP请求数量加倍。此外,一个文件被调用后就会产生一个缓存文件,以供下一个调用它的网站使用。我们可选用JavaScript库(如jQuery)和字体库,同时你也可以考虑专用的图片托管。

前面提到的三条建议可以加快网站的加载速度,下面的建议将帮助我们检查网站代码,以高效地减少网站重量。

4.删掉没用的资源

网站一直在变革之中。如果你不再使用某组件,那就删掉与之关联的CSS和JavaScript。如果它们包含在一个单独文件中,处理起来就会很简单。否则,你需要借助一些工具,如Chrome的Audit开发工具、 JSLint、 Dust-Me Selectors、 CSS Usage、 unused-css.com,也可构建 grunt-uncss此类的工具。

5.合并和压缩CSS

理想的情况是只拥有一个CSS文件(如果你使用RWD以支持IE的老版本,那就需要两个CSS文件。)构建并维护几个单独的CSS文件也算合理,但在部署到产品服务器之前,你应该将它们集合在一起,并删掉那些不必要的空白区域。

Saas、LESS和Stylus等预处理器可帮你完成这些痛苦的工作。 Grunt.js、 Gulp等工具可自动化你的工作流。如果你更喜欢GUI,可借助Koala提供的免费跨平台应用。

如果你觉得这些比较麻烦,也可手动通过命令行工具将CSS文件集中在一起,如在Windows中,可使用如下代码:


在Mac/Linux中,可使用如下代码:


最终文件经过在线CSS压缩工具(如 cssminifier.com、 CSS Compressor & Minifieror等)压缩后即可运行。

最后,请记住在头部(Head)加载所有CSS,以便浏览器展示接下来的HTML元素,同时也可避免浏览器下次再重绘页面元素。

6.压缩并合并JavaScript

平均每个页面需加载18个JavaScript文件,所以我们要将自己编写的JavaScript代码进行合并和压缩。我们可以自己构建压缩工具,也可以使用在线工具,如 YUI Compressor、 Closure Compiler及 CompressorRater。

使用JavaScript压缩工具进行压缩,必须十分谨慎。你的代码有一点小问题,即便丢失了一个分号,压缩过程也可能会失败。无论如何,对JavaScript文件进行压缩,可减少HTTP请求数量,从而提高网站性能。

最好在</body>之前加载JavaScript,这样可确保该脚本不会阻碍其它内容的加载,同时在该脚本被下载和执行之前,页面的内容已加载完毕,并可阅读了。

7.使用正确的图片格式

错误地使用图片格式会增加网页的负载。图片格式通常有以下使用原则:

  • 照片使用JPG格式;
  • 其他的使用PNG格式。

当你有一些小图像,它们仅包含有限的几种色彩集,采用GIF格式,其压缩效果可能更好。本文暂不讨论向量图。

现在有大量免费的图形软件包,可用来转换图片的格式。其中像XnView允许你批处理这些文件。请记住下面两条原则:

JPG为一种有损压缩格式,其质量介于0(质量很差、更小的文件)至100(质量最好,更大的文件)之间。介于30至70之间的大部分图片显示效果比较好。

PNG支持256颜色表和24位的真彩色。如果你不需要透明,并能控制调色板,那256的PNG图像颜色模式可能压缩得更好。

8.重整大图片的尺寸

即便是最入门级的智能手机上的照片机(三百万像素),其拍出来的照片往往太大而不适合在网站上显示。但大部分内容编辑者往往将图片直接从相机中直接上传到网站上。因此,我们需要一个可以自动调整图片尺寸的系统。

图片的尺寸永远不能超过它所在容器的最大值。如果网站模板的宽度最大为800px,那图片的宽度就不能超过该值。一些高分辨率、Retina显示屏,可显示宽度为1600px的图片,但这仍比从相机中直接输出的图片要小。

在减轻网页重量方面,图片尺寸的调整起着重要的作用。将图片尺寸缩小50%,可节省75%的总空间,相当于减少了文件大小。

9.进一步压缩图片

即便已将图片调整为正确的格式和尺寸,你仍可使用一些分析和优化图像的工具进一步压缩图片。这些工具包括 OptiPNG、 PNGOUT、 jpegtran和 jpegoptim。大部分工具可独立安装,也可整合入你构建的过程中。另外,还有一些在线工具,如Smush,它可以工作于云上。

10.去掉不必要的字体

Web字体对设计进行了重大改革,减少了基于图像的字体的使用。但是,使用传统字体后,网页的代码量往往会增加数百KB。所以网站中这种字体的使用尽量控制在两、三种以内。

利用以上提到的方法,大部分网站可以将减去30~50%的重量。对于一般的网站,可以减掉800KB的代码量,访问速度可获明显提升。(编译:陈秋歌)

内容来自:10 Quick and Easy Fixes to Reduce Page Weight

Mozilla将设应用工场 Firefox OS瞄准欧洲南美 Summly创始人:12岁开始编程 17岁公司卖了3000万美元 因SaaS与NoSQL,Oracle雄风不在? 那些年云计算领域的大牛们 回顾:那些被平台方封杀的第三方应用 [热帖推荐] 中国的程序员,真的“短命”吗? 聚焦HTML5移动开发 第六届英特尔杯大学生软件开发大赛开幕 虚拟化技术新星Pluribus Networks获中国VC青睐 可穿戴开发!Pebble Watchface SDK 4月发布 我想做个程序员:一位编程小白的App开发故事 Go 1.1发布,支持向后兼容 Polycode:免费、开源的跨平台(游戏和APP)开发工具 为何大多数云计算公司注定要失败 究竟是什么让Redshift比Hive快10倍?! [评论]将Linux拒之门外 微软被开源社区指控垄断 精细化运营:友盟统计分析SDK 3.0版本发布 “锤子OS”功能猜测与罗式对比营销 神奇!1KB JavaScript代码编写的3D蜜蜂 顶尖技术人员“兜售”的顶尖编程语言、扩展工具等 移动阅读商业化:Flipboard支持用户DIY杂志 全球移动App:Top 52发行商排行榜 知新网CTO:从程序员的视角,实践精益创业 罗永浩锤子ROM:小团队的75项微创新 谷歌知识图谱扩展到Android平板电影中 云计算大战升温 服务器OEM押注OpenStack 如何将战略性的内容策略融入进网页设计中 数字天堂CTO:移动行业应用开发“潜规则” 众联智领CTO:从idea到面目全非的创业产品 CMDN Club 25期:knewone与路况电台的精益创业法则 Windows Blue的孪生兄弟?Office Gemini浮出水面 HTML5开发平台Ludei将支持3D游戏开发 在winForm下可以用session 吗? 跟网页下的有什么不同呢? 用orcle搭建一个客户服务器平台,该如何搭建?(通过vc的应用程序在客户端访问)--都有分给的. 初学websnanp,请教几个小问题? 问一个基础问题? 怎样在MDI框架下,显示一个CFORMVIEW类的子窗口? AUTOCAD图形打印驱动程序设计 AUTOCAD图形打印驱动程序设计 情帮忙(50分) 一个水晶报表的问题 有人真正使用过XML开发程序么? 我想买书 pb7.0哪里可以下载? AUTOCAD图形打印驱动程序设计 贺猪猪成星,散分给水友,天下皆欢颜!!! WinRAR的压缩密码怎么取消啊?快,快,急需!!! 没有权限打开names.nsf的问题? 复选框的问题,在线等待!!! 没有权限打开names.nsf的问题? IE浏览器显示的字体不是默认的,变成了空心字体。如何改成系统默认的字体?(win98+IE5.0) 寻找高手 关于协议的问题 求助!能把一个字段内容分解的函数? Servlet问题?(急等,立结) oleconnection 支不支持sybase的连接,不通过odbc如何连接Sybase高手请进!急啊!!! 关于return的问题 为何内存消耗在不断增长? 浏览器类型 求文件长度? 用DELPHI 开发过ORACLE数据库的高手帮忙,我现在遇到个问题, BCB消息机制问题, 关于MFC 请教:jar问题 零为什么不能做为除数。 菜单资源ID得问题 请问高手,实验室局域网内部下载速度很慢,会是什么原因造成的? 如何利用Datareport做出好看一点的报表? Grid的列怎么来调整? GDI+类使用new操作符问题 有人在吗? 请看看这一样个SQL语句 页面上有两个相连的表格时,中间的边框变得很粗,能否做到和一个表格的效果? 帮我写一个简单的和SERVER2000查询的例子50分相送!! 怎样将别人给我的数据库文件导到本地? 近日较忙,散分200 请问将脚本写在页面和写在J文件里有什么不同?我写在页面上一切正常,可是把脚本防在一个JS文件就报错 ===好几天,ADO 连接oracle数据库的问题.还搞定。大伙给看看 DBLookupComboBox的疑问 我是福建省福州的.程序员在哪儿报名呀?? 如何让录入页面的信息能自动保存~! 编写函数 有谁知道华工的计算机应用的复试考那几门?另外请问关于其他不公布复试科目的学校可以通过电话询问复试科目吗? 想不通,请教?(802.1x) 怎么用一个浪漫而且又不失潮流词语来表达这个人是我的唯一. 活性炭纤维滤网 翻译怎么说 什么是锡铋合金?我知道肯定不是伍德合金, 在电磁感应现象中,磁通量变化与电流产生是同时发生的还是有先后顺序的 凯恩斯三大心理规律是什么 ,你好!我长期从事熔炼锡和铋两种金属的工作 ( 锡.铋合金模具)请问在熔炼锡.铋两种元素时所产生的气体是否对人体人害. 是否是接毒工种.谢谢! Si和NaOH加水反应中的电子转移以及原因 凯恩斯三大基本心理规律在凯恩斯理论中的作用 东莞买锡铋合金去哪里啊?那里的质量好呢? 为什么现在我们高中化学书一般有碱参加反应都是NaOH?为什么不用其他强碱? 某人9点50分离家赶11点整的火车.已知他离家车站10公里,到火车站后,进站"非典"健康及安全检查、检票等事项需20分钟,他离家后先已3公里/小时的速度走了5分钟,然后乘公共汽车去车站,问公共 为什么氧不是构成细胞的最基本元素 一百度时,ph2的盐酸与ph12的naoh溶液等体积混合,为什么碱过量? 形容春天的寒冷是哪个词语 组成细胞的元素中最多的是氧还是氢? 如图所示,三个木块A,B,C在水平推力F的作用下靠在竖直墙壁上,且处于静止状态,则下列说法中正确的是?为A.A与墙壁的接触面可能是光滑的B.B受到A作用的静摩擦力,方向可能竖直向下C.B受到A作用 我们的英语已经上了一个半小时和我们一个半小时之前上的,用英语怎么说你同学通常什么时候做作业,用英语怎么说 有哪些形容寒冷的词? 英语翻译“莫道桑榆晚,为霞尚满天" 中翻英. 关于风湿性心脏病,患者信息:男 35-44岁 四川 成都 病情描述(发病时间、主要症状等):平时有点胸闷,是无意中发现的,做了彩超,才知道是风心病,年龄42想得到怎样的帮助:这种病一定要做手 光滑桌面上有两个质量均为m的小球,由长度位2L的拉紧细声相连 以一恒力F作用与线中点 方向平行于桌面 垂直 任何溶胶都可加入可溶性电解质聚沉吗 为什么地球会产生生物多样性要写论文啊 做好和生物进化论联系在一起 一个小球以V的速度方向与水平地面撞击垂直于竖直的墙后反弹为什么还是V? 循环水池如何设计,水量为3200T/h,水温40℃,需冷却至30℃以下,不考虑损失,挖多大容积的水池? 小明一家10点10分离家赶11点整的火车去某地旅游,他们家赶离火车站 为什么粒子在布朗运动相互碰撞时可以聚集起来?(关于胶体聚沉)胶体的微粒在一定条件下发生聚集的现象叫做聚沉(Coagulation).胶体稳定的原因是胶粒带有某种相同的电荷互相排斥,胶粒 海底两万里中潜水艇鹦鹉螺号的动力是什么 谁能告诉我李大钊有哪些故事?不要太罗嗦的就好. 如图所示,表面处处同样粗糙的楔形木块abc固定在水平地面上,ab面和bc面与地面的夹角分别为α和β,且α>β,一初速度为v0的小物块沿斜面ab向上运动,经时间t0后到达顶点b时,速度刚好为零;然后 穷图匕见的意思 谁有李大钊的故事, 什么样的节能灯能调光. 图穷而匕首见的穷是什么意思 为什么叫光纤?不就是玻璃吗?光芯和包层都是以 较高纯度的 sio2 加以少量掺杂剂构成的 ,包层就比纤芯折射率低点,那么 为什么 要叫光纤呢 难道就是 因为 芯很小 就叫光纤? 节能灯可以调光吗? 秦王发图,图穷而匕首见 的发 意思 发号施令 的发 意思 关于光纤线玻璃芯光传导的问题?我将光纤线中玻璃芯(玻璃纤维)取出,放入透明塑料管内,塑料管内壁敷上玻璃芯,一层塑料包裹的玻璃纤维能否传导光? 学者们,谁知道磁通量和电磁感应的关系?要微观上的原因 为什么磁通量的变化就会产生感应电流? 生物多样性的根本原因D 工业十水合四硼酸二钠怎么转换成硼含量 阐述凯恩斯主义总供给曲线,短期、长期总供给曲线三种情形下,总需求...阐述凯恩斯主义总供给曲线,短期、长期总供给曲线三种情形下,总需求的变动如何引起国民收入和价格水平变动?这是 友情诗句 无氧铜化学成分? 在长期总供给曲线时,总需求的变动会引起国民收入和价格水平同方向变动为什么? 这电源功率是多少够用吗? 氧气遇到什么化学成分会起火? 在长期,垂直的总供给曲线表明:(1)工资具有完全弹性;(2)货币需求的利率弹性为0该如何证明或解释这两点? 镇江市农作物秸秆都怎么处理? 电池正常的充电放电截止电压是怎么算的?有镍镉,镍氢,电池.当然每一个电池的电压都不样,为我解答这问题小弟我感激不尽! 锂电池可以用于玩具模型吗?如题,3.7V的话会不会比用1.2V更快?似乎有些地方说锂电池用于模型放电不行,我是准备做智能车模型的,不是玩遥控的, 今 年岳西应栽什么农作物最值钱 李大钊的故事100字左右 铝和氢氧根还原性,铝做阴极和水中氢氧根相比谁被氧化了 活性炭纤维可以过滤的水可以直接喝吗? 锡-铋合金相图的绘制:共晶点铋的百分含量是多少?共晶温度是多少? 形容跟不上时代的词语?比较新潮的词语. 活性炭纤维 用于水处理过滤的寿命如题 锡铋合金现在价格大概在多少呢. 土耳其欧亚海底铁路隧道仅运营第一天突甬台温高速一客车冲落路基 1死5伤日本一女大学生因在公园拍摄成人视频被亿万富翁崛起捷克政坛 所在政党成议会卡梅伦首次跌出权力榜前十 遭英媒体嘲报告称南澳大利亚州今年已有84人被猫美华裔留学生派对后在公寓猝死 疑因酒伊朗强硬派阻击核谈判 指责鲁哈尼对西2头青梅竹马大象打架双亡 园方:公母西班牙承认与美国在情报搜集方面存在有叙利亚副总理贾米勒被指擅离岗位被解职法国表示希望参与新加坡扩大地铁网络计开审埃及穆兄会 3名法官纷“病退”日本自民党大力推动修宪国民公投 拟降德国议员差旅费暴涨达688万欧元 媒德国锁定美情报部门窃听站位置 位于使女童目睹家人在车祸中被烧死 获赔1.尼日尔沙漠发现87具尸体多半为儿童 萌猫每天造访商店 望着橱窗里老鼠或鱼叙反对派称副总理遭解职或为叙政府“化德国派代表团赴美 要求签署协议保证不5.8网贷周报:平均收益15.6% 80后女董事长大起底!家族企业创始人花一笔钱买三辆车奇瑞捷豹路虎国产揽胜母亲节为妈妈做这三件事比买康乃馨更重牛逼的永远是向上,不是学习市场现跷跷板行情 把握赚钱效应结婚也能贷款 贷你去爱情胜地布拉格举不买私人飞机,都不好意思被人叫壕!一只堪比汪星人的流浪猫 就是这么大!A股不断走向中期调整 新股民一定要牢高利贷的致命诱惑:年化收益96%,一外观更似大黄蜂 自家抄袭叫传承全新迈为何敢称专属订制机 葫芦手机产品曝牛逼的永远是向上,不是学习另一种声音,大众深陷排放门后的几点思「奇酷」每个男人都是电影男主角,缺的他说:我带出去几个,也要带回来几个月薪3000与月薪30000的文案区【妹测】民用航拍利器 大疆精灵3 体【解惑】华为内部狂转好文:有关大数据5万元拉得起中秋佳节的微面车款推荐(
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘