Web前端性能优化教程09:图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化。完整教程可查看:
一、 图像优化
图像基础知识
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前端性能优化教程09:图像和Cookie优化的更多相关文章
- Web前端性能优化教程08:配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
- Web前端性能优化教程06:减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程05:网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- Web前端性能优化教程03:添加Expires头
本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...
- Web前端性能优化教程04:压缩组件
本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...
- Web前端性能优化教程07:精简JS 移除重复脚本
本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看: 一.精简javascript 基础知识 精简:从javascript代码中 ...
- Web前端性能优化全攻略
网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...
- Web前端性能优化全攻略[转载]
1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...
- Web前端性能优化进阶——完结篇
前言 在之前的文章 如何优化网站性能,提高页面加载速度 中,我们简单介绍了网站性能优化的重要性以及几种网站性能优化的方法(没有看过的可以狂戳 链接 移步过去看一下),那么今天我们深入讨论如何进一步优化 ...
随机推荐
- 开源框架】Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发
[原][开源框架]Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位... 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言 原文 http: ...
- jquery工具方法proxy
proxy : 改变this指向 使用方法1:function show(){ alert(this); }$.proxy(show,document)(); //document 使用方法2:fu ...
- SuperSlidev2.1滑动门
1.引用jQuery.js 和 jquery.SuperSlide.js 因为SuperSlide是基于jQuery的插件,所以前提必须先引用jQuery,再引用SuperSlide <head ...
- web standards
http://www.w3.org/standards/ http://www.webstandards.org/learn/faq/#p213 http://www.w3.org/standards ...
- .NET Core)的ZooKeeper异步客户端
支持断线重连.永久watcher.递归操作并且能跨平台(.NET Core)的ZooKeeper异步客户端 阅读目录 什么是ZooKeeper? 项目介绍 提供的功能 使用说明 FAQ 在公司内部 ...
- lecture16-联合模型、分层坐标系、超参数优化及本课未来的探讨
这是HInton的第16课,也是最后一课. 一.学习一个图像和标题的联合模型 在这部分,会介绍一些最近的在学习标题和描述图片的特征向量的联合模型上面的工作.在之前的lecture中,介绍了如何从图像中 ...
- 【位运算经典应用】 N皇后问题
说到位运算的经典应用,不得不说N皇后问题. 学过程序设计的都知道N皇后问题,没听过也没关系.很简单,最传统的的N皇后问题是这个样子的,给你一个n * n大小的board,让你放n个皇后(国际象棋),要 ...
- c/s 自动升级(WebService)
首先声明,本人文笔不好,大家见笑,欢迎高手吐槽. 做c/s开发肯定会遇到的就是自动升级功能,而这实现方式是非常多. 本文使用 webservice的方式来提供升级服务 首先准备服务 为了方便我们专门用 ...
- Linux下网络流量实时监控工具
Linux下网络流量实时监控工具大全 在工作中发现,经常因为业务的原因,需要即时了解某台服务器网卡的流量,虽然公司也部署了cacti软件,但cacti是五分钟统计的,没有即时性,并且有时候打开监控页面 ...
- Sql server使用Merge关键字做插入或更新操作
Merge是关于对于两个表之间的数据进行操作的. 要使用Merge的场景比如: 数据同步 数据转换 基于源表对目标表做Insert,Update,Delete操作 MERGE语句的基本语法: MERG ...