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

使用Google Page Speed优化Web前端性能

2012-08-13 10:26 · 稿源:xincss.com

安装步骤:http://jingyan.baidu.com/article/597035523c54cd8fc00740ed.html

安装好以后,打开Firebug,可以看到新增的标签页:Page Speed:

使用Page Speed

其中,Page Speed标签页包括两个功能:Analyze Performance与Show Resources,其中Analyze Performance是Page Speed的核心功能。点击以后Page Speed开始工作,几秒钟以后就会得出一份详细的性能分析报告:

Page Speed分析报告

其中各项按照重要性进行排序,展开每一部分,可以得到详细的报告。其中,红色图标表示未进行优化,黄色表示可以进行进一步优化,绿色表示已经进行优 化。

其余部分的功能可以在Google Code的官方主页上找到,这里就不赘述了,只重点介绍Analyze Performance这一功能。

性能优化技巧

其实上图的每一项都是Page Speed提供的优化标准,Page Speed就是按照这一条条标准进行分析的。需要拿出来讲的包括:

使用gzip压缩

这里放在第一,是性能优化效果最显著的一步。所谓gzip压缩是一种开发的压缩算法,目前的主流浏览器(Firefox, Safari, Chrome, IE4及以上)与主流服务器(Apache, Lighttpd, Nginx)均对其有很好的支持。gzip压缩是通过HTTP 1.1协议中的Content-Encoding : gzip来进行标记说明,其可以明显减少文本文件的大小,从而节省带宽和加载时间。我做过的一个实验,发现启用gzip后,jquery 1.2.6 minify版本的大小从54.4k减少到16k,减少了70%。gzip适用的情况包括:

1.HTML\CSS\JavaScript文件,gzip算法对于文本文件的效率比较高,而jpg/gif/png/pdf等二进制文件本身已经进 行了一次压缩,再使用gzip的成效已经不明显了。而且gzip压缩需要消耗服务器的资源,而解压缩需要消耗浏览器的资源,对于比较大的二进制文件具有非 常高的性能消耗;

2.尽量使用一种大小写方式,要么全部大写,要么全部小写。学过数据结构和算法的同学一定知道压缩其本身就是对冗余信息熵进行压缩,如何数据原素的类 型种类太多,其信息冗余度会降低,从而压缩率降低;

3.过小的文件(通常小于150个字节)不宜进行gzip压缩,因为gzip会在文件头加入相关信息,对于小文件反而会增加文件的长度;

关于各服务器如何启用gzip,可以参加相关文档说明。

如何检查gzip是否启用?使用Firebug,在Net模块中进行检查HTTP Header是否有Content-Encoding gzip标记,参见下图:

gzip压缩检查

最小化JS和图片

对于JavaScript文件本身具有非常大的优化空间。所谓JavaScript压缩,就是通过一些工具将函数、变量名进行优化(其实就是尽可能 缩短变量名长度),消除多余字符(比如空格、换行符、注释等),最终得到的代码可以在分析和执行上得到性能提升。压缩后得到的代码对于机器而言是可读的, 对于人来说就不行了,因为文件内容已经面目全非。所以压缩一般用于生产期的代码,不能使用于开发期。

同样的道理,图片内容中也有一定的冗余信息,比如文件头部的一些内容描述(这些内容在jpg)图片上尤其如此。通过一定的工具(比如GIMP)可以 去除这些信息,从而节省一定的空间。

幸运的是,Page Speed已经内置了这些功能,我们不需要找第三方的工具。如下图所示,可以看到对JS文件进行最小化可以得到的预期效果:

JavaScript最小化

比如jquery.form.js,最小化后减少11.9kb,减少54.8%的空间。点击minified version,在新窗口中可以看到Page Speed为你优化好的版本,直接更新到服务器就可以了。

关于图片优化,操作方法同上。

启用浏览器缓存

这是经常使用的方法。当请求的资源在浏览器本地得到缓存后,第二次请求这些内容就可以从直接缓存中取出,减少了连线的HTTP请求。

HTTP 1.1提供的缓存方法主要有两种:

1.Expires and Cache-Control: max-age. 即内容在缓存中的生命有效期。第一次请求后,在生命有效期之内的后期请求直接从本地缓存中取,不过问服务器;

2.Last-Modified and ETag. 其中Last-Modified标记文件最后一次修改的时间,浏览器第二次请求是在头部加入上次请求缓存下来的Last-Modified时间,如何两次 请求期间服务器的内容没有进行修改,服务器直接返回304 Not Modified,浏览器接到以后直接使用本地缓存。否则,服务器会返回200以及更新后的版本。ETag是服务器对于文件生成的Hash散列,其生成算 法与最后一次修改的时间相关。浏览器第二次请求发送上次的ETag信息,服务器通过简单的比对就知道是否应该返回304还是200。

关于各缓存头部的设置可以参考各服务器的相关文档。

JavaScript延迟加载

通常浏览器在解析HTML时遇到JS文件会先下载,解析执行后才会下载后面的内容,期间自然会造成一定的延时。为了提高性能,尽可能将JS文件的位 置后移,如果可能,还可以通过部分代码进行异步加载。另外,对于JS和CSS在必须放置在一起情况,需要报JS放置在CSS之后,这样CSS与JS文件可 以同步下载。

文件拼接

这里主要包括JS/CSS等文本文件和图片。对于文本文件,尽可能将同一类型放置到一个文件中,减少HTTP请求。对于CSS背景图片,可以使用 Sprit技术将图片拼接到一起,然后使用background-position属性选择对应的图片。Google首页上的这个图片就是一个很好的例 子:

Google Sprite

其它

更多优化规则,可以参考Page Speed的说明以及Steve Souders个人主页上的相 关信息。

结论

虽然现在网络速度越来越快,Web前端优化仍然非常重要;永远不要假设用户的网络速度 和你一样快,毕竟由于ISP的各方面原因,各地的速度大不相同。良好的策略可以在有限的带宽资源下达到最大的性能发挥。

这个世界需要丰富的Web应用,更加需要高效的Web应用。

原文地址:http://www.xincss.com/?p=133

  • 相关推荐
  • 大家在看
  • AMD CTO Mark Papermaster畅谈高性能计算

    日前,Inside HPC对AMD 首席技术官兼执行副总裁Mark Papermaster 进行了专访。*在过去的 18 个月里,AMD在HPC领域东山再起。您认为高性能计算的趋势有哪些?我们正处于高性能计算的转折点上。传统高性能计算(HPC)工作负载如石油天然气勘探、天气预报、仿真、建模等,对计算和性能的需求持续快速增长。这些工作负载需要更多核心驱动、更高的存储和I/O带宽。HPC是AMD全面复兴其中的一个重要领域。AMD EPYC(霄龙) 服务器处理器提供了?

  • 60%入门机性能不够!Redmi 9性能升级:联发科G80加持

    性能过剩?事实上还有相当一部分千元机性能远远不够。6月22日消息,Redmi官方表示,有高达60%的入门机跑分低于10万,导致运行卡顿,无法流畅运行大型游戏。Redmi 9重新定义2020年入门机新标

  • iOS 14、iPadOS新细节曝光:重新设计UI、优化手写功能

    明天凌晨开幕的WWDC开发者大会,iOS 14等一大波儿新系统可能并不是苹果的重点,而真正的是主角是基于ARM自研Mac处理器。据最新消息称,即便重点不在新系统上,但苹果依然为iOS 14准备了不少新

  • Apple TV 6搭载A12X处理器:全新散热方案镇压、性能超iPad Pro

    最新一代iPad Pro从A12X处理器升级为A12Z,不过两者性能上几无明显变化,在移动处理器中,依然是最能打的存在。有国外爆料人称,新一代Apple TV电视盒子将预装A12X仿生处理器,就目前了解到的

  • 肉眼可见的性能提升:外星人又来搞事了

    随着科技的发展,人们对于笔记本的要求越来越高,不仅性能配置上要足够强悍,在便携性方面也要满足各种使用场景。作为ALIENWARE今夏的重磅新品,ALIENWARE m15/m172020 版超轻悍PC的问世为硬核玩家和内容创作者们带来了一件可以满足任何需求的“神兵利器”。在全新“预言”设计和顶级性能的加持下,ALIENWARE m15/m172020 版超轻悍PC迸发出了前所有的战斗力,最薄处16.9mm厚度的机身散发着极具科幻力量的未来主义风格,同时机身之?

  • 特斯拉Model 3国产性能规格公布,Model3高性能全轮驱动版详细介绍

    特斯拉Model3 国产性能规格怎么样?6 月 28 日晚,特斯拉中国在官网发布了Model3 高性能全轮驱动版车辆的国标工况续航里程,续航里程测试结果为635km,百公里加速时间为3. 4 秒,时速可达 261 公里/小时。

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

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

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

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

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

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

  • 电动牙刷哪个牌子好?传奇品牌工艺卓绝性能不凡

    自从电动牙刷上市以来,关于电动牙刷好用还是普通牙刷好用的话题就一直在谈论,相关口腔专家曾表明,与普通牙刷相比,电动牙刷更为科学有效。电动牙刷比普通牙刷能多清除38%的牙菌斑,可以减少牙龈炎、牙周病和牙龈出血等口腔疾病,也是目前欧美许多国家普遍流行的日用品。那么,电动牙刷哪个牌子的更好用呢?在电动牙刷领域,有这样一个品牌,它的产品售价过万,却吸粉无数,是很多高消费人群的必备之物。它就是为极致而来,只为极

  • Intel宣称游戏本性能碾压AMD:一看显卡有猫腻

    竞品互相对比是稀松平常的事儿,而由于不同厂家产品的定位、规格、价格不可能完全对应,对比起来也很难做到绝对公平,一般大差不差就可以了,否则就很容易引发争议。最近在笔记本市场上,AMD锐

  • 小心了!Windows 10 Bug会影响固态硬盘的性能和寿命

    Windows 10自5月更新发布后,Bug不断出现,这让不少用户抱怨连连。而现在,一个似乎无关紧要的Bug似乎会影响固态硬盘的性能和寿命。6月16日,据外媒报道,Windows 10 Version 2004版的优化驱动

  • 无线耳机品牌排行:性能逆天的五大机王

    选购蓝牙耳机,有些人注重外观,有些人注重无延迟,有些人注重音质,也有些人注重续航,每个人都有不同的需求。现在市面上蓝牙耳机,大部分是某一方面做得好,能做到全面开花的极少,小编精挑细选了几款全能型的蓝牙耳机推荐给大家~TOP 1:JEET Air Plus蓝牙耳机:匠人精神、网红明星力荐现在蓝牙耳机大部分都存在音质差、蓝牙不稳定的问题。JEET他们家倡导花20%的价格买千元大牌,成为很多网红、明星的出街首选,还得到了无数大V?

  • 夜市地摊不如云上搬砖 多多云功能性能双标杆

    “摆地摊”成为近期的热门话题,随着地摊经济政策落实,逐步开放并有序管理,让更多人可以通过摆摊这个低成本高回报的经济模式获得更多的收入,也让大家都开始对摆摊产生了浓厚的兴趣。在当今的互联网时代下,摆摊真的还能像从前一样“大赚一笔”吗?对于现在人来说,一夜暴富终是梦,稳定收入才是真。与其随大流开始摆摊,不如用上《多多云手机》黑科技“云上搬砖”。云上搬砖肯定少不了更受用户青睐的云手机品牌——《多多云手机

  • 性能白给!ARM确认Mali GPU将通过Google Play获得驱动更新

    6月25日消息,高通骁龙865、骁龙765G等芯片支持GPU驱动独立更新。在此之前,GPU驱动通常会跟OTA更新捆绑在一起推送。如今它可以通过应用商店,像更新软件那样获得GPU驱动更新。小米10、小米

  • 性能强悍的拍鸟利器 佳能EOS 90D捕捉生态瞬间

    自佳能推出双位数单反机型以来,这一系列机型在摄影圈子里的口碑一直很好, 2019 年推出的继任者EOS 90D更是为广大专业摄影师及摄影爱好者提供了又一台性能强悍的APS-C画幅旗舰单反相机。EOS 90D,EF 100-400mm f/4.5-5.6L IS II USM+1.4XF 5.6,1/ 400 秒,ISO 1000实时取景器下 11 张/秒的连拍能力、约 3250 万有效像素的新APS-C画幅大型图像感应器等特性引起了广大鸟友的兴趣。由于前代机型很少涉及鸟类等生态题材的拍摄,摄影?

  • 苹果自研cpu是什么时候开始的 Mac自研CPU架构、性能详细介绍

    此前苹果分析师郭明錤表示,在 2020 年第四季度或 2021 年第一季度,苹果将推出自家定制处理器的Mac机型。日前据彭博社报道,苹果将会在本月举行的 WWDC20 上宣布 Mac 产品线从英特尔 CPU 过渡到自研 CPU 的计划,基于 ARM 架构。

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

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

  • 高性能+性价比,双子星云手机新品来袭惊喜不断

    从2019年开始,云行业分外热闹,其中云手机更是成了炙手可热的风口。6月15日,云行业新锐品牌双子星云手机正式上线了,首日上线,便有用户直呼体验不输老牌云手机。用户体验至上,多场景体现产品价值什么是云手机?简单来说就是一款在云端的虚拟安卓手机,用户可以将手机上的应用转移到云上的虚拟手机来运行,而双子星云手机则是其中的佼佼者,通过双子星云手机,可以在云端高效运行各类软件,并适用于多个场景如:云游戏、APP云端

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

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

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

热文

  • 3 天
  • 7天