前端调优规则一共23条，前面的推文我们掌握了一部分前端调优的规则，今天给大家继续分享。后续文章都会系统分享干货，带大家从0到1学会性能测试。
20Use cookie-free domains（使用一些空闲cookie的域）
在上一小节中我们介绍了如何通过减少cookie的大小来提升性能，cookie虽然有很多的优势，但并不是说cookie是万能的。
当我们浏览器向服务器发送一些静态文件时，如图片、CSS样式等，在发送请求的同时会将cookie也同时发送到服务器，如图13-20所示
上图中发送的cookie是和图片的请求一同发送到我们网站域上的，因为这里并没有使用其它的子域来处理cookie的内容，在cookie的内容中可以看到。
但其实此时服务器并不会对cookie做任何处理动作。这样使用HTTP的响应时间变的更长，同时还会浪费网站的带宽，所以我们建议使用cookie-free domains的方法来优化该性能。
如果将cookie设置在顶级域(例如yourwebsite.com)，则所有子域(例如iym.yourwebsite.com)也将包含已设置的cookie。因此，在这种情况下，如果要使用无cookie域，则需要使用单独的域名来提供静态内容。但是，如果您在www子域上设置cookie，则www.yourwebsite.com可以创建另一个子域(例如static.yourwebsite.com)来托管所有静态文件，这样这些文件将不再导致发送任何cookie。
使用cookie free域有以下优点：
1) 减少网络流量;
2) 减少静态内容的加载时间;
以nginx为例，如果需求从无cookie域提供静态内容，那么必须先创建一个不包含cookie的子域，并将其指向与主域所在的同一服务器，如以下代码：
test.com A 192.168 .3 .13static . test.com A 192.168 .3 .13
test.com是我们的网站，static. test.com是存放无cookie内容的地方。
接下来，需要在NGINX配置文件(ngix.conf)并添加以下代码：
server {listen ip:80;server_name test.com;root /srv/http/nginx/ test.com;access_log logs/ test.com.access.log;location / {index index.html;charset utf-8;}}}server {listen 192.168.13.33:80;server_name static.test.com;root /srv/http/nginx/test.com;location / {if ($request_filename ~ ".(jpg|css|gif|png|swf|ico|mp3)$") {break;}return 404;}}
接下来需要修改前端访问服务器上的内容，如以下代码：
正常是使用以下代码来访问图片的：< img src = “ / images /testimage.png” />现在应该修改为以下访问图片的方式：< img src = “http://static.test.com/images/testimage.png” />
现在如果向服务器请求testimage.png这个静态文件时，nginx就会使用static.test.com来提供。
21Avoid AlphaImageLoader filter（避免过滤器）
AlphalmageLoader过滤器是IE浏览器专有的一个关于图片的属性，主要是为了解决半透明真彩色的PNG显示问题。
AlphalmageLoader的语法如下：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )属性：
enabled：是一个布尔值，表示是否激活滤镜功能，true表示激活，false表示禁止。
sizingMethod：设置或检索滤镜对图片所在的对象容器边界内显示方式。
— crop：表示会对图片进行剪切让其适应对象尺寸。
— image：增大或减小对象的尺寸边界以适应图片的尺寸，默认值。
— scale：通过缩放图片的方法来适应对象的尺寸边界。
src：表示背景图像的绝对或相对的URL地址。
下面是一个使用的实例：
<div>站在性能分析的角度，不建议使用AlphalmageLoader过滤器主要原因如下：
1. 会增加内在的消耗，因为在加载过程不是按图像应用来加载的，而是按每个元素应用来加载的。
如果使用抓包工具或页面分析工具会发现，使用AlphalmageLoader过滤器请求的时候明显会更长，并且所消耗的内存也会明显增多。
2.这个过滤器在下载图片时会阻止浏览器进行渲染并且冻结浏览器。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>test...</title></head><body><img src="images/tenpay.gif"/><img src="images/tenpayc2c.jpg"/><img src="images/no_picture.gif"/><h1>test...</h1><div><a href="/"><table width="546" border="0" cellpadding="0" cellspacing="0" height="100px"><tr class="tittr"><td > <form><input type="text" name="username"/></form></td></tr><script src="js/test.js"></script></body></html>
上面是一个测试页面，当加载到wap_logo.png(使用AlphaImageLoader过滤器处理)这个图片时，浏览器被冻结，此时浏览器无法动弹，冻结的时间超过1秒。
并且需要注意的是，并行下载不会被阻止，浏览器仍然在后台下载其他页面组件，但是没有渐进式渲染。
由于以上原因所以建议尽量避免使用AlphalmageLoader过滤器， 为了解决对这类透明度的过滤器的问题，通常还有以下两种方法：
1.使用VML透明度
VML是IE浏览器中关于PNG透明的另一种方法，
例如：定义一个div里面有一个vim空间
<v：rect><v：fill type =“ tile” src =“ test.png”><div>＆nbsp; </ div></ v：fill></ v：rect>
再声明一个VML名称空间：
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />在样式表中写以下内容：
v:rect {behavior:url(#default#VML);width: 500px;height: 500px;display: block;}v:fill {behavior:url(#default#VML);
2.使用其它的过滤器
当然AlphaImageLoader并不是唯一存在的过滤器，另一种流行的是不透明度滤镜。
例如：如果需要对50%不透明度，那么可以使用以下属性。
-- opacity: 0.5 (一般标准的用以)
-- -moz-opacity: 0.5 (Mozilla和Firefox早期版本)
-- filter: alpha(opacity=50)(对于IE浏览器)
22Do not scale images in HTML(不要缩放图片)
关于图片对性能影响最核心是如何减小图片的大小，将图片大小是最常用的优化性能的方法，前面我们也有介绍例如图片精灵技术就是减小了图片的大小。
在前端开发过程中经常看到开发的人对图片进行缩放，认为这样可以减少图片的大小。图片缩放的语法通常如下：
<img width="100" height="100" src="mycat.jpg">但是实验发现我们使用缩放图片时，在发送请求时，HTTP的大小并没有减小，请求的响应时间也没有缩短。我们看一下面的的实验。
下面的代码是对wap_logo.png进行了缩放。
<img width="65" height="15" src="images/wap_logo.png"/>抓包的数据如图13-1所示
下面的代码是未对wap_logo.png进行缩放。
<img src="images/wap_logo.png"/>抓包的数据如图13-2所示
通过比较两次发现，两次图片加载的过程中，发送的请求字节数和接收到的字节数是完全一致，即我们虽然对图片进行了缩放，但是其实在对服务器发送请求时，请求的信息还是原图片一样的，所以缩放感觉是图片变小了，但我们抓包发现HTTP的字节数和接收到的字符数并没有减少，所以我们不建议在开发中对图片进行缩放。
如果真的是由于图片大小的原因导致图片显示不全或其它的问题，那么我们建议根据不同的尺寸来设计不同大小的图片，而不要使用缩放技术。
23Make favicon small and cacheable
（使用icon格式图片和使用缓存）
favico是Favorites Icon的缩写，顾名思义，其含义是指让浏览器收藏夹中显示除标题外，还有一个图标显示在收藏夹中，这样可以很好的来区别不同的网站。用户也可以拖曳favicon到桌面以建立到网站的快捷方式。当然不同的浏览器在显示Favicon时也有所区别。
favico的语法如下：
<link rel="shortcut icon" href="favicon.ico" />代码放在head中，href表示favicon.ico文件的位置，一般都是放在站点的根目录下，当引用favicon.ico文件时，浏览器会自动在根目录下去检索该文件。
由于favicon.ico驻留在服务器的根目录中，因此每次浏览器请求此文件时，都会发送服务器根目录的cookie，如图13-3所示
所以减小图标的大小，并减小服务器根cookie的cookie大小，可以提高检索图标的性能。
同时还应该使用Expires标头来让favicon.ico文件变的可缓存，这样来提高性能。
总结
最近一段时间都主要学习的是前端调优的内容，前端调优的内容不是工具的使用，而是前端调优的规则，工具可以有很多种，不一定是我们本章节介绍的YSLOW，但一般都是使用一个前端分析工具和抓包工具一块来使用，来分析请求和响应的信息。前端调优规则是核心，是分析前端性能的核心内容，必须理解每个规则的原理这样才可以更好的使用这些规则来分析前端性能。其实LoadRunner分析工具中的页面细分也是对前端的内容进行分析，但显示LoadRunner分析器所提供的数据太少了，无法更好的来支持前端性能优化。
下次开始分享协议知识，敬请已关注！
暂无评论内容