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

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

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

DELPHI构件制作方法 DELPHI控件Tweblabel的编制 DELPHI中MEMO组件的光标定位 Delphi中RichEdit的奥妙 Delphi中TApplication类 Delphi中日期时间输入的简洁方法 delphi中怎么调用interbase数据库? Memo的Undo功能-Delphi资料 RECT在Delphi中的灵活使用 StringGrid制作只读列-Delphi资料 TADOQuery下主明细表其属性关系如何设置,如何保存主表和明细表?-Delphi资料 TBatchMove用法-Delphi资料 TMemo的真正插入字符-Delphi资料 TREEVIEW的使用-Delphi资料 TreeView在电信综合统计管理系统中的应用-Delphi资料 VB6.0动态加载ActiveX控件漫谈-Delphi资料 捕捉来自 Thread 的异常-Delphi资料 定制Speedbar-Delphi资料 动态产生构件并相应事件-Delphi资料 对Borland可视部件的一处改进-Delphi资料 控件使用技巧-Delphi资料 改变VCL的行为--一个使用可视化元件的实例-Delphi资料 具有不同字体的列表框-Delphi资料 快速大量地更改控件内容-Delphi资料 快速动态创建MenuItem-Delphi资料 利用Delphi 5中调用Excel 97 利用Delphi的Tbitmap控件抓取屏幕图象 利用delphi美化你的菜单 面向组件的系统开发方法-Delphi资料 强大的树型编程控件TeeTree1.01-Delphi资料 确定MEMO控件中的当前行和列-Delphi资料 JavaBean+jsp+Tomcat4.0?把我搞醉了 一个非常棘手的问题,都吃不下,睡不着了,帮忙啊,分不够的话,再开数贴。 高分请问:会跳舞(有音乐)的圣诞老人(玩具,大约有电脑显示屏一般高度)在上海买多少钱,急急急 已有CBitmap m_Bitmap,如何求对应的HDIB 在音乐文件中加入一个代码…… 这种情况下如何用进程条控件? 看了一通sps的sdk,看的我头大的不得了,看来英语还是不过关阿 我要把格林威治平时转换成当地时间用什么函数呢???? 用SQL语句显示记录集中的倒数200条记录,及显示从第几条到第几到的记录?? 问:vb.net采用的是c#,那么在ms.net里面到底有没有visual c#.net??? 高手请进!ADO问题 给我已给在javabean里面使用HttpServletRequest对象的例子好吗?谢谢你了,具体到里面看看可以吗? 在office2000中打印来自matlab53的图形,总是提示word内存不足,word自行关闭。请问为何? 开开关关的窗口 用VC编写操纵数据库方面的COM组件有前途吗? 请问如何将CString中的字符串赋给char* ADODB.Connection问题,急!! 急急! 在javabean里面使用HttpServletRequest对象的例子好吗?谢谢你了,具体到里面看看可以吗? 河南的程序员考试成绩出来了没有?都快把大家急疯了! 一个类的四个问题?this指针等等,欢迎大家的光临。 请大家帮个忙!我的PARADOX数据库有660M,但是在读取的时候出现‘BLOB HAS BEEN MODIFIED‘!! 请问哪里有ado数据库引擎下载,谢谢~! BDE错误$2109 如何得到“我的文档”里的IShellView指针? SOS!各位帮帮我呀!“实现汉诺塔” 幫忙看一下下面這段代碼有什么問題? 改进后的开开关关窗口特别酷 请问在VB6与VB.NET在数据库方面有多大的区别呀?? 关于C语言 寻找将 AUTOCAD 文件格式转换成 PDF 格式的软件 谁有包含开发接口的OCR软件? 求助:没有紧急修复软盘,怎样恢复win2kserver的双启菜单。 请问怎么得到DATAGRID1中记录的总条数! 转发:一粒沙子的爱情故事 公司發過年禮物了 ,哎 ,原來是一塊石英表 ,雖然是情侶表 ,卻只發一塊 ,不是一對 ,你們呢!..... ??有解密高手吗?或者哪里有这样的论坛?? 怎样用多线程显示多个form? VB串口发送大数据量时其他程序没有反应? 这句sql语句怎么写?低手请教! 数据库高手请进,报表问题!!! 请介绍VC测试内存泄漏的好工具. select number from table需要分别得到所有的值,如果做? 请问如何将下载的控件加到delphi的控件面板上?先谢谢了!!! 一个form里面如何将6个radiobottom 分成两组? 开开关关IE窗口的小程序 请各位高手介绍一下win2K,wingate,sygate这些做上网服务器各使用什么技术?NAT?SOCK5? WIN2000 PRO. 怎样才能通过 NT4+MSPROXY 上网? ASP中如何实现等待几秒再执行下一步的功能? 数据库的烦恼之二 如何在程序中播放Power Point? 一水,用7个大瓶和5个小瓶装共8.8克,用5个大瓶和3个小瓶共5.4克,用3个大瓶和1个小瓶共多少?最好不列方程 张师傅把150千克的青菜运到集市上去卖,其中的5分之3按每千克2.40元卖出,剩下的按原价的75%卖出这些张师傅把150千克的青菜运到集市上去卖,其中的5分之3按每千克2.40元卖出,剩下的按原价 64人订ABC三种杂志,订A种杂志的28人,订B种杂志的41人,订C种杂志的20人,订A和B的10人,B和C的12人,C和A的12人,三种杂志都订的有几人? 孵化场该怎么和种鸡厂和养鸡场合作?我们是开孵化场的!一直都是采购种蛋加工孵化出来送到经销商或者养殖户,谁有更好的方法让我们和种鸡厂能合作起来? 蛇的天敌是什么?什么吃它,他怕什么植物嗯 某班有41人都订阅了中学生天地或中学生作文,已知订中学生天地的人数比订中学生作文的人数少5人,两种杂志都订的有20人.订中学生作文的有多少人 养鸡场计划购买甲,乙鸡苗共2000只,甲每只2元,乙每只三元相关资料表明:甲 乙两种小鸡苗的成活率分别为百分之94和百分之99,若要使这批小鸡苗的成活率不低于百分之96且买小鸡的总费用最小 如何在报纸或杂志上发表文章?想在报纸或杂志上发表文章,但不知道如何投稿,教教我吧,我很笨.最好投稿(寄信),邮件勉强.注意事项也要写.提供点地址有没有 “城市快报”我还是比较喜欢 某班有41人都订阅了《中学生天地》或《中学生作文》,已知订《中学生天地》的人数比订《中学生作文》的人 数少5人,两种杂志都订的有20人,问:订《中学生作文》的有多少人?用一元一次方 养鸡场发生过新城育病毒空鸡场该怎么消毒才能进鸡苗? 在期刊上发表文章想在期刊上面发表一篇文章,可是,自己对这个也不是特别了解,这个是怎么个顺序呢 今年某班有56人订阅中学生天地,其中上半年有25名男生,15名女生订阅了该杂志,下半年有26名男生25名女生顶阅了该杂志,有23名男生是全年订阅的,只在上半年订阅的女生有多少名快,今天晚上为 蛇的天敌是什么? 新手在杂志或报刊上发表文章~请问新手想在杂志或报刊上发表文章需要什么条件?帮忙推荐一下致力于培养新手的报刊杂志~那个,能不能推荐一下报纸、杂志…… 有34人定A、B、C三种杂志,定A杂志有28人,定B杂志有41人,定C杂志有20人,定A、B杂志有10人,定B、C杂志有12人,定A、C杂志有12人,问三种杂志都定的有多少人? 蛇的天敌是? 请问,在《萌芽》杂志上发表文章有稿费吗? 害虫有哪些好处?蚊子、苍蝇、蝗虫、老鼠、蜗牛有哪些好处? 大、小两瓶油共重2.7千克.大瓶用去0.3千克后,剩下的油与小瓶的油比为3:1,大、大、小两瓶油共重2.7千克.大瓶用去0.3千克后,剩下的油与小瓶的油重量比为3:1,大、小瓶原来各有油多少千克? 生物防治害虫的新途径,请举例说明一下 用赤眼蜂消灭害虫的方法在生物学上叫做什么 蛇的天敌如果有是什么呢? 生物防治害虫的例子 赤眼蜂是害虫还是益虫? 蛇的天敌有哪些?(详细点) 生物防治害虫的途径y6586 仓库存鸡蛋2900千克分三个冰箱第一箱比第二箱多二分之一,第三箱是第一箱的四分之三三箱各有多少 某养鸡场可同时饲养肉食鸡和蛋鸡两种鸡,由于条件限制,若单纯饲养肉食鸡最多饲养9000只,若单纯饲养蛋鸡最多饲养6000只.(1)若饲养蛋鸡x只,则最多还能饲养肉食鸡y只,直接写出y关于x的函数 你能想到生物防治害虫的例子吗就是哪些虫子是哪些虫子的天敌之类 生物防治就是利用( )来防治病虫害 主要方法有( )( )( ) 怎样区分饲料鸡生的蛋和家养鸡所生蛋很难呢 害虫生物防治的途径和方法包括哪些? 小明到超市去买洗发水,其中一种洗发水有两种不同规格的包装,小瓶装100克,9元;大瓶装300克,26元,小明选择哪种包装的洗发水更实惠,为什么? 狼的三大天敌是什么 某一实验室有大小玻璃瓶五十个,每个大瓶可装水三千克,每个小瓶可装水一千克 ,大瓶比小瓶多装30千水,问大小瓶各有多少个? 作文 我马上要一篇 请问狼有没有天敌,是什么?我好象没有看到过有什么动物吃狼的,请问狼有没有天敌,有的话是什么? 有大小两个玻璃瓶,小瓶能盛6千克的水,如果小瓶的水全倒入大瓶,则只能倒大瓶的三分之二,如果把大瓶盛二分之一的水倒入小瓶,则能倒小瓶的几分之几? 小说杂志 最天使 201010月刊书的文章有哪些? 狼和狗是不是天敌? 养鸡厂一天能收获鸡蛋200个,但养鸡厂仅有一台最多能称5千克物品的盘称,你能想办法帮养鸡厂估算一下一天大约能收获鸡蛋多少千克吗? 有关人生经历的作文不要太多文字,300多就行,还要5篇 办养鸡场需要什么条件 土鸡蛋,比饲料养鸡鸡蛋价格高~营养也高? 发愤识遍天下字 立志读尽人间书出自哪篇文章?哪个作者写的文章中引用了这句话? 客货车同时从AB两地相向开出客车每时行60km货车每时行全程的1/15相遇时客货两车路程比4;5两地相距多少KM 三(1)班有30人订语文报有20人订数学天地有8人这两种报纸都订了订报纸的同学共 科学家从食物链和食物网中得到启发,想出了利用农林害虫的天敌防治害虫的方法,叫做什么? 从甲到乙地客车需12小时,货车需18小时.客货车同时相对开出,相遇时客车距终点还有176km.两地相距多少km?Quickiy! 蛇的天敌有哪些? 利用天敌控制农林病虫害的防治方法成为生物防治吗? 熊的天敌除了人类,还有什么? 李师师把120千克青菜运到超市去买,其中3分之2按每千克2.4元卖出,剩下的打8折卖出.这些青菜一共卖出?元 买五分之四千克鸡蛋用去4元,买四分之三千克猪肉用去10元,买二分之一千克青菜用去1元.你知道这三种东西每千克的价钱吗? 狼为什么会是人们的天敌 张伯伯把120千克青菜运到集市上卖,其中三分之二按每千克2.4元卖出,剩下的打八折,一共卖了多少元? 常见害虫的危害哪些植物的哪些部位.以及 一般 利用天敌害虫都有哪些,最好 特请经验丰富者帮我总结一下 常见害虫的危害哪些植物的哪些部位.以及 一般 利用天敌害虫都有哪些,最好 特别 一个小瓶,装满水时总质量为32克,装满酒精时质量为28克,求这个小瓶的质量和体积.()酒精的密度为0.8乘10*3千克/立方米 120千克青菜运到集市上,2/3按每千克2.4元卖出,剩下的打八折出卖,这些菜一共卖了多少元 小明买五分之四千克鸡蛋用去8元,买四分之三千克猪肉用去20元,买二分之一千克青菜用去2元.算出三种物品的单价.快
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn