请点击此处给我们留言

地址:河南省郑州市白樟路1223号

电话:0722-64611779

联系人:凯发k8娱乐总经理

当前位置:主页 > 国际合作 >

凯发国际娱乐运用Google Page Speed优化Web前端功能

来源:http://relian99.com 责任编辑:凯发k8娱乐 更新日期:2018-04-27 17:30 字体:
分享到:

  运用Google Page Speed优化Web前端功能

  装置步骤: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%。凯发k8!gzip适用的状况包括:

  1.HTML\CSS\JavaScript文件,gzip算法关于文本文件的效率比较高,而jpg/gif/png/pdf等二进制文件自身已经进 行了一次紧缩,再运用gzip的成效已经不明显了。ge Speed优化Web前端功能而且gzip紧缩需求耗费服务器的资源,而解紧缩需求耗费浏览器的资源,关于比较大的二进制文件具有非 常高的功用耗费;

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

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

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

  如何查看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。

  关于各缓存头部的设置可以参考各服务器的相关文档。凯发国际娱乐运用Google Pa

  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

下一篇:没有了