大家圣诞快乐~

和小操同学讨论到反向代理的时候逻辑混乱没理清,发一篇再理一次,哈

正向代理的概念

正向代理,也就是传说中的代理,他的工作原理就像一个跳板,
简单的说,
我是一个用户,我访问不了某网站,但是我能访问一个代理服务器
这个代理服务器呢,他能访问那个我不能访问的网站
于是我先连上代理服务器,告诉他我需要那个无法访问网站的内容
代理服务器去取回来,然后返回给我

从网站的角度,只在代理服务器来取内容的时候有一次记录
有时候并不知道是用户的请求,也隐藏了用户的资料,这取决于代理告不告诉网站

结论就是 正向代理 是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。

反向代理的概念

继续举例:
例用户访问 http://ooxx.me/readme
但ooxx.me上并不存在readme页面
他是偷偷从另外一台服务器上取回来,然后作为自己的内容吐给用户

但用户并不知情
这很正常,用户一般都很笨

这里所提到的 ooxx.me 这个域名对应的服务器就设置了反向代理功能

结论就是 反向代理正好相反，对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容 原本就是它自己的一样。

两者区别

从用途上来讲：

正向代理的典型用途是为在防火墙内的局域网客户端提供访问Internet的途径。正向代理还可以使用缓冲特性减少网络使用率。反向代理的典型用途是将 防火墙后面的服务器提供给Internet用户访问。反向代理还可以为后端的多台服务器提供负载平衡，或为后端较慢的服务器提供缓冲服务。

另外，反向代理还可以启用高级URL策略和管理技术，从而使处于不同web服务器系统的web页面同时存在于同一个URL空间下。

从安全性来讲：

正向代理允许客户端通过它访问任意网站并且隐藏客户端自身，因此你必须采取安全措施以确保仅为经过授权的客户端提供服务。

反向代理对外都是透明的，访问者并不知道自己访问的是一个代理。

淫荡开发

因为某些特殊原因,我平时写前端代码都是本地开发(貌似你也是)
我怎么知道我的代码嵌入后是什么样子呢?
在本地搭建一个网站?公司网站一个机房的机器都放不下,更别说我一台PC鸡

这个时候就可以利用反向代理
我先把公司网址例如 miao.in 改HOST方式指向127.0.0.1 也就是自己机器
然后在自己机器上装一个 Apache
并且设置反向代理整站到线上服务器,但排除了目录 faq

于是我输入 http://miao.in/family/ 的时候,请求发送到本机的apache,本机的apache去线上获取内容吐给我,就像他自己的一样
而我输入 http://miao.in/faq/的时候,请求发送到本机的apache,apache发现这是个排除的目录,于是找本机上对应的目录文件(开发目录)吐给我

这样子就实现了完全模拟线上环境的开发模式

这个时候有人会跳出来说,我靠,用Fiddler不就行了
原理是一样的,亲爱的windows用户

操

小操同学你的姓太给力了,每次大喊:"操!吃饭去"
都是一种幸福啊~

Fiddler

http://www.fiddler2.com/ 是windows下神一样的东西,有兴趣自己去了解下
淫荡的佩玉同学开发了一个以他老婆命名的 Fiddler 插件,我们大家都爱用
不过透露的话会以泄露国家机密罪爆菊花,就不提了

参考资料

http://en.wikipedia.org/wiki/Reverse_proxy
http://baike.baidu.com/view/1165595.htm
http://zhuzhsh.javaeye.com/blog/293437

PNG这种文件格式值得科普下,对比GIF来说

PNG和GIF都支持动画
PNG的动画也叫APNG,只是firefox支持,详见 http://ooxx.me/apng.orz ,如Firefox看这里的favicon,是会动滴
所以动画图片来说,还是GIF支持最好

第一种PNG叫PNG8(索引色透明),简单说可以理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是不是透明
但是PNG由于算法的优势,体积比较少
所以,静态GIF完全可用PNG8取代

第二种PNG也叫PNG8(Alpha透明),牛逼在可指定像素点的透明度,例如50%透明度
这种优点在于比PNG24/32体积小,因为也只有256色嘛
缺点在于IE6支持不好,会把半透明的像素点显示成全透明

第三种PNG叫PNG24
PNG24不透明,但是颜色数很多,不止256色
而Photoshop里导出的png24其实是png32

第四种PNG叫PNG32
缺点在于IE6支持不好,会把透明区域显示成蓝灰底色,把半透明区域显示成叠加蓝灰底色后的颜色

PNG32和PNG24的区别就是多了透明信息

(新增)第五种PNG叫Fireworks源文件
类似于Phosothop的PSD,有图层通道信息神马的
是PNG的一种扩展
这种丢到浏览器里表现和PNG32一样

简单的归纳就是

动画:
支持: GIF, APNG(firefox only)
不支持: 常规PNG

索引色透明(某像素是全透明还是全不透明):
支持: GIF/PNG都支持
不支持: IE6下的PNG8(Alpha透明)和PNG24/32

Alpha透明(可指定透明度):
支持:PNG8(Aplha透明)/PNG32
不支持: GIF/PNG8(索引色透明)/PNG24

图层
支持: PNG(FW源文件)
不支持: PNG8/PNG24/PNG32/GIF

颜色
256色：GIF PNG8(2种)
其他的格式颜色数不过来,好多

附加说明:

Photoshop 只能创建GIF、 PNG8(索引透明)和PNG24(其实是PNG32)

Fireworks 能创建任意格式的GIF和PNG

PNG8(索引透明)在创建的时候有个参数叫(PS杂边|FW色板),这个作用就是用杂边色加上像素点的透明度例如50%,生成伪透明的不透明像素点
适用于固定底色的伪半透明,例子里用的杂边是黑色,在白背景下就很明显

PNG8(Alpha透明)在IE6下会有过度裁剪的问题,可能是把半透明的像素都去掉了,所以某些图片会如最上面第一张图所示,被狗咬的感觉
规避方案:

1.用2张图,IE6用PNG8(索引透明),非IE6用PNG8(Alpha透明),在CSS里用_这个IE6hack来区别
2.半透明在作图的时候就要考虑到被去掉后的样子,对设计师有要求,不大现实
3.说服自己接受这坨大便,然后咽下去就这样了你想咋样

静态GIF、PNG 24、PNG32不大推荐在网页上用

实例在

http://code.sh/lab/png/

有兴趣自己去看

如有疑问和补充请留言，有问必答

------补充线-----------------------------------------------------------------------------------

ytzong says:

规避方案补充一个：
对IE6使用AlphaImageLoader滤镜，用在PNG8(Alpha透明)上，就像对png24用该滤镜一样，就不会有被狗咬的效果了，要平衡下性能进行取舍
http://www.misuisui.com/weblog/?p=2286

alpha透明的png8做渐进增强非常赞，例图
http://docs.google.com/File?id=ddrrtxb_1735hpptpxcm_b
高级浏览器有阴影，IE6木有

大猫对补充的补充:
1.AlphaImageLoader滤镜的缺点在于额外的CPU和内存开销,并且在图片下载失败的情况下会挂死整个页面,优点如涛哥所说
2.例图里因为非半透明区域是边缘平整的所以适合渐进增强,但是有相当一部分图就被狗咬了,具体看情况来取舍,顶渐进增强

==再补充点水分============================================

空帷拉小窗补充: 有误,有误啊~~~
PNG24和PNG32的理解有误

具体已经更新了文章,感谢印度万金油空空~

佩玉也来凑热闹,俯身献上一篇详细的PNG优化总结小报告:

http://code.sh/note/png%E4%BC%98%E5%8C%96%E5%B7%A5%E5%85%B7%E5%B0%8F%E7%BB%93/

首先要感谢黄老湿请来了大湿讲PPT

听大湿讲 PPT 听的热血沸腾,对 quickling 部分有个疑问

Facebook 页面切换是AJAX替换中间内容部分
好处是避免重复生成和下载共用部分(例如头尾)以节省服务器损耗和带宽还能提速

然后给URL后头加一个尾巴
好处是这地址复制给别人也能单独使用
(QQ空间不给力啊,刷新就去首页了...)

浏览器的前进后退历史记录等功能在特殊处理后也不会因为AJAX而痿掉

OK, 例如首页 http://www.facebook.com/

点了左侧的 messages

会AJAX从服务器拉中间部分的内容填进去

并把 URL 改为 http://www.facebook.com/#!/?sk=messages

当我们直接复制这串带着 hash (#后头这串)的地址给朋友,他们直接粘贴了访问的时候
浏览器请求 http://www.facebook.com/home.php
home.php里的脚本检测hash部分,
发现非空,
是#!/?sk=messages,
于是跳转到http://www.facebook.com/?sk=messages

依赖客户端做判断跳转?酱紫不是需要
服务器生成2个页面,
用户下载2个页面,
以及第一个页面hash检测脚本执行完毕之前的资源(因为脚本会阻塞后续)

为何不服务器直接根据用户请求的 URL 里的 hash 吐第二个页面给客户端捏?

混在一堆前端里头又不好意思问这个弱智问题,只好会后偷偷溜过去找大湿

大湿摸着我的头说: 我们也想啊,可客户端不发 hash过去

(一一!)

tail了一个 access_log 测试了一下,

果然如此

===毫无技术含量分隔====================

http://velocity.oreilly.com.cn/index.php?func=slidesvideos

这个 URL 包含的绝对是今年的性能和运维顶级盛宴

等有朝一日俺摸着别人头说啥啥啥的时候,肯定要谦虚的说:

"其实,我是一个运维"