Web前端性能优化教程09:图像和Cookie优化

2019-03-26    来源:teroy博客园

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化。完整教程可查看:Web前端性能优化

一、 图像优化

图像基础知识

gif: 适用于动画效果,例如提示的滚动条图案

jpg: 是一种使用有损压缩的图片格式,它将图片的每个像素分解成8*8的栅格,然后对每个栅格的数据进行压缩处理,通过特殊的算法用附近的颜色填充栅格,隐藏细节。用户可以设置质量级别,从0到100,数字越少图片质量就越差。

png:是一种使用无损压缩的图片格式,它将图片上出现的颜色进行索引,保留在“调色板”上,PNG在显示图像的时候就会调用调色板的颜色去填充相应的位置。png又分为png8,png24和png32;png8表示支持2^8个种颜色,通常情况下png8是最通用的web图片格式。

选择jpg还是png

对比jpg和png的特点,不同的图像使用不同的格式能得到最佳压缩效果。对于层次丰富颜色较多的图像,使用jpg更好,因为为了很好的显示这种图像,png将使用调色板颜色更为丰富的png24,这样图片大小会比jpg大。而对于颜色简单对比强烈的图像,使用png更好,因为png使用较少的调色板颜色就可以满足显示效果,而且得到的图片相对也比较小,而jpg是有损的,在清晰的颜色过渡周围会有大色块,影响显示效果。

将png24|32转化为png8

png图片的优化的很重要的一步:有些png24|32图片本身颜色较为简单,将其转变为png8得到的显示效果很类似,但却能极大地减少图片的大小。这一步可以通过使用工具pngGo来完成,这是一个完全免费的工具,而且可以根据需要设置png所需要的调色板颜色数,得到最大的压缩效果。

使用smushit.it在线无损化压缩

png格式将图像信息保存在“块”中,对于web显示来说,大部分的“块”都并非必要,所以优化策略可以将它们安全地删除。雅虎的YSlow提供了一个在线的无损化压缩工具smushit.it,不过基本上假如已经将图片转变为png8,使用smushit.it能压缩的空间已经很小了,不过对于追求极致性能的web来说,还是值得一试的。

二、优化Cookie

什么是Cookie

Cookie是存储在客户端的一小段文本信息,伴随着用户请求在浏览器和服务器之间传递。Cookie除了核心对象key-value外,还有max-age,path,domain和httponly属性。httponly属性标识一个客户端javascript能否操作这个Cookie;max-age表示缓存时间,单位为秒;domain代表域名,例如设置为.cnblog.com,则i.cnblogs.com也可以访问这个Cookie,如果设置为i.cnblogs.com,则image.cnblogs.com这个域名下的资源将不能访问这个Cookie;path代表文件路径,默认为/,表示可以该domain下的所有资源可以访问这个Cookie。浏览器对单个Cookie大小限制不超过4KB;对于同一域名下Cookie的数量也有限制,一般不允许超过50个。

非持久Cookie和持久Cookie

假如Http请求响应头部Set-Cookie的时候没有给Cookie添加一个过期时间,则它的默认过期时间为当前浏览会话结束,既退出浏览器这个Cookie就无效了,这个Cookie就叫做非持久Cookie,因为是存储在浏览器进程的内存中的。

而如果给Cookie添加了一个过期时间,则Cookie信息将存储到硬盘上,即使浏览器退出这个Cookie还是存在的。只要Cookie未被清除且还在过期时间以内,这个Cookie就会在访问对应域名的时候发送给服务器。

减少Cookie的体积

由于Cookie在访问对应域名下的资源的时候都会通过Http请求发送到服务器,所以通过合理地设计Cookie,减少Cookie的体积,能够减少Http请求报文的大小,提高响应速度。

通过使用不同的主机减少Cookie的使用

Cookie在访问对应域名下的资源的时候都会通过Http请求发送到服务器,但是在访问一些资源(例如js脚本,css和图片)的时候,大多数情况下这些Cookie是多余的,所以我们可以通过使用不同的主机来存储一些静态资源,例如用专门的主机来存储图片,这样访问这些资源的时候就不会发送多余的Cookie,从而提高响应速度。

完整教程可查看:Web前端性能优化

标签: Web前端性能优化教程 Web前端性能优化 Web优化 

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:百度学院:搜索关键词排名为何会有小数点?

下一篇:绝对详细!Nginx基本配置、性能优化指南