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

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

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

高端实战技术培训:OpenStack企业应用之路 据统计,Oracle已击败IBM跃居软件行业第二 【技术博客推荐】2014年值得关注的10个开源项目 Intel在深圳建立智能设备创新中心 将投入1亿美元 免费获得价值1200元Unity2014顶级盛会门票! IBM公布Softlayer中国业务落地时间表 推荐30款最佳的数据可视化工具 数据库迁移测试:选白盒还是黑盒? 东软发布首款英特尔架构企业级移动终端解决方案 英特尔与腾讯创立游戏创新实验室 推进RealSense技术 《近匠》系列沙龙之探寻绝密武器:移动跨平台开发 iOS走向开放:苹果新推iAd Workbench广告服务 腾讯薛伟:快速模型更新在精准广告推荐中的应用 微软Build2014第一天要点精华汇总(组图) Windows 8.1 Update 1五大改变:任务栏回归,增强鼠标支持(图) 【十大院士】怀进鹏:全球的计算模式可能重新形成 微软Build2014第一天应了解的15件事 TypeScript1.0发布,完美支持Visual Studio系列产品 欲与Android展开价格战,微软宣布在移动设备上免费开放Windows 2014深圳英特尔信息技术峰会次日要点汇总 4月4日:微软39周岁,生日快乐! 正式进军硬件市场 Atlassian发布可穿戴设备Bitband 云计算时代IT专业人员需具备的10项技能 【走近院士】李德毅:大数据是连接虚拟和现实世界的桥梁 微软Build2014大会第二天干货总结 Microsoft Azure拥抱Puppet、Chef、MongoDB... 唏嘘不已!Brendan Eich上任Mozilla CEO仅十天即因歧视同性恋被迫辞职 最火HTML5 JavaScript游戏引擎:国外篇(一) Facebook发布PlanOut 开源部分A/B测试源码 一周消息树:6款Java转C#的最佳工具、Web开发者必备的9个软技能 对话“宙斯杯”获奖代表:依托京东云平台,打造精品电商CRM 关于微软开源WinJS,开发者必须知道的5件事 怎么样才能实现对音量的控制,最好能达到有下脚喇叭的功能 phpmyadmin之前的密码认真是怎么回事呀(配置问题) 谁能帮忙介绍工作? 请介绍几个现在还提供免费个人主页的地方 IIS运行起来后,不能访问http://localhost是什么原因? 谁能帮忙介绍工作? 关于控件数组 急需收发文系统的完整代码,谢谢! 我想用VB写一个com分页读出tif中的多幅图像,请高手指点! 请教sql查询 情介绍一个数据库编程的好书! 请教:JBuilder中要调用MapXtreme 的bean,怎么搞,定给分 为什么TOP不能限制数据集的数目???见者有分!!! 找高手解决问题!! sql 2000的一个存储过程,有些问题, 谁能帮忙介绍工作? golive6,如何解决中文问题???在源码中无法显示中文,如何解决??? 请看看这两条代码是否一样? 寻---陈建春之<visual C++高级编程技术---开发实例剖析> 想学学UML…… 现在工作好烦!!!!!! 关于combobox很简单的问题 各位大夏,我用JBUILDER做EJB时已经编译了,可是为什么那个TOOL菜单里面的EJB DEPLOYMENT子菜单是灰的啊?也就是我怎么生成部署描述设置 教材 谁看了《我的野蛮女友了》,是不是和《不见不散》有点像阿 怎样定义自己的消息? 菜鸟问题:有关vs7.0与vs6.0的Session传递问题.(来者有分) 如何改变窗口的图标? 都有哪些方法? 报表的格式化问题? 英文win 2000 +英文IIS 联接 中文win 2000 +中文Sql Server 出现乱码的问题,在线等待 哪位有realplayer 8.0的序列号?是否可告知小妹:) 各位大侠,我想把网站的部分链接放到局域网的其他机子上,需要怎么设置 我要租房(深圳华侨城附近,1000元之内,30分钟车程之内) 请教各位,系统如何自动获取编号 转贴:回忆最有人缘的28个电视人物(1) 我要找一本叫《软件工程》的书! 网上赚钱的事会是真的吗 , 谁介绍一下 , 有没有不错的网站. 转贴:回忆最有人缘的28个电视人物(2) 大家都用的什么开发工具啊?? 如果我的DOMINO服务器坏了,我重新安装后,如何让原有的用户ID都继续使用呢?还是必须要重新注册? 高手请教!如何向oracle中读写二进制文件! 我要找一本叫《软件工程》的书! 有谁重载过CListCtrl控件?? 数据库统计的问题!!在线等待! 在Notes中,如何用LotusScript取得Notes的安装目录? 如何修改弹出菜单的内容! 突然的感慨:) [求助]在控制台程序中怎么用定时器??? 非扩充话题移动贴子就扣信誉分!究竟信誉在这里怎么解释。 我想问问大家,在哪里有一些好的软件提供下载,我想看看人家的界面,向别人学学 xsl中能进行条件选择或循环吗??? 英语翻译演唱着是nas. 同学们用花盆出一个双环型,每隔5分米摆一盆.两个交代处各摆一盆,每一环的周长都是10米,一共需要多少盆花? 求六年级上册冀教版数学应用题答案及过程,急!1、修一条路,已修与未修的长度比是1:3,再修300千米,已修与未修的长度比是1:2,这条路长多少千米?2、把一个圆转化成近似的长方形,已知长方 班级庆元旦方案 请以"泪水"为话题,写一篇作文.要400字. 你知不知道五年级上册的21课的读后感怎么写 生活启示作文 (写事)结尾与开头 全部的财产来求好听的英文歌曲,Cry On My Shoulder 比如说这个,在我肩膀哭泣.就要这些非常感人的歌曲 如果你的天空是灰色 在遥远的天堂 一定有属于我们的某个地方 只要你愿意 我能让你的人 同学们用花盆摆成了一个双环型 每个环的周长都是30米 现要间隔5分米放一盆花 两点交点各摆一盆 一共需要多接着上面的:盆花? 班级庆元旦活动流程 我想要几首能让我哭的的英文歌... 以泪为话题的作文 人生启示 作文 开头 六年级上册寒假生活全本参考答案快快.. 以泪为话题的作文怎么写 苏版 五年级小学语文第22课《滴水穿石的启示》读后感200字不许抄袭 六年级上册寒假生活答案人教版 以童年的泪为话题的作文 有一个半圆形花坛,周长是10,28米,他的面积是多少? "依靠在你肩膀流泪"翻译成英语 以泪与人生为话题的作文 六年级上册寒假生活第28页答案 大桥公园有个圆形喷泉,周长是56.52米,面积是多少平方米?(保留两位小数) 同学们用花盆摆出一个双环型,每隔5分米摆一盆.两个交点处各摆一盆,每一环的周长都是10米,一共需要多少盆花? 注意是最新的! 一个圆环花坛的周长是50.24米,面积是多少平方米? 学校要在教学楼前建一座圆形花坛,花坛周长是100.48米,求花坛的占地面积是多少平方米? 人教版 ''' 不是寒假生活 请在我肩上哭 英语最佳翻译是? 一个正方体的体积是343CM3,它的表面积是多少?都正确,但能否告诉如何从体积推算出边长? 班级文化布置我们班的布置有公告栏、照片墙、荣誉栏、小小作家(作文)、我行我秀(书法、美术等作品),还差一个 内容该是什么好?那个版面蛮大的 可以贴什么? 一个圆形花坛的周长是50.24m.其中有1/8的面积是假山和喷泉,假山和喷泉面积有多大 圣诞节教室要怎么布置?买一点小东西能够在教室的每块地方装饰 如何去进行班级文化布置 一个圆形花坛的周长是50.24m,其中假山和喷泉的面积占总面积的八分之一.假山和喷泉的面积共有多大? 若干个额定电压为6.3v的小彩灯串联在照明电路中,用以布置教室或装饰圣诞树,请画出电路图并注明彩灯的个数 以感恩为主题的班级文化,怎么布置 一个圆形花坛的周长是50.24米,其中有8分之一的面积是假山和喷泉,假山和喷泉的面积有多大 同学们用花瓶摆出一个双环型,每隔5分米摆一盆.两个交点处各摆一盆,每一环的周长都是10米,一共需要多少盆花 小宇同学在布置班级文化园地时,想从一块长为20㎝、宽8㎝的长方形彩色纸板上剪下一个腰长为10㎝的等腰三角形,并使其一个顶点在长方形的一边上,另两个顶点落在对边上.请你帮他计算出所 一个圆形花坛的周长是50.24其中假山和喷泉的面积占总面积的1/8假山和喷泉的面积共有多大? 一个圆形花坛的周长是37.68米,在它里面留出六分之一的面积种菊花,种菊花的面积是多少? 求听了想哭的英文歌曲.除了 黑色星期五 一个圆形花坛的周长是50.24,其中假山和喷泉的面积占总面积的1/8.假山和喷泉的面积共有多大? 体积与容积 部分知识1、两个装满水、大小相等的量杯,如果往这两个量杯分别放入大小不等的石块,哪一个量杯中剩下的水多?请说明理由.2、两个体积一样大的盒子(一个木盒,一个纸盒),它 推荐10首伤感的听了就想哭的英文歌曲不要!经典歌曲(如my heart will go on) 要最近新出的 就要10首 多了不要, 以眼泪围话题的一篇文章,写什么题材新颖?最好符文与写法, 一个圆形花坛的周长是37.68,它的面积是多少平方米?其中有四分之一中菊花,求种菊花的面积?(要列出算式) 求听了会哭的英文歌如题,就是听起来很舒服,很想哭的英文歌~3Q 以“眼泪”为话题写一篇400多字的散文, 五年级体积与容积部分知识(1)取两个大小相同的量杯或透明的杯子,在杯中倒入同样多的水,将一个苹果和一个梨分别放入这两个量杯中.观察两个杯子水面的变化,判断苹果和梨那个体积大 求推荐听了就想哭的英文歌女声的 现在心情很不好 想哭一哭 用12个长5厘米、宽4厘米、高3厘米的长方体码放成一个表面积最小的长方体,这个长方体的表面积是多少? 找几道五年级体积容积数学难题 什么英文歌听了会哭的?我觉得 迈克尔的You Are Not Alone.不错啦.don't cry 这首听了也挺感动的.顺便在来些,听了热血澎湃的,类似于:she is my sin-NightwishIt’s My Life楼下的 大哥大姐,我发的都比你们 把一个表面积是516平方厘米的正方体切割成8个相等的小正方体(无剩余,损耗不计),切割后的8个小正方体的表面积之和比原来大正方体的表面积增加多少平方厘米?注意是之和,切割后还会 求执著为题的作文我很穷,没有积分,希望有人能路见不平一声吼.拜谢! 谁知道妙手仁心里的插曲:no don't cry这首英文歌儿的中文翻译 同学们花盆摆成了一个双环形,每个环周长都是30米,现要间隔5分米放一盆两个交点各放一盆,一共需要多少盆要列算式 快 急 以“执着与通达”为题作文
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘