网站特性:照片和Coockie和挪动运用的提升

2021-03-22 17:41 jianzhan
大家在前面的几节中分刘海别讲了提升网站特性中內容、服务器、JavaScript和CSS等层面的內容。除此以外,照片和Coockie也是大家网站中基本上不能缺乏构成一部分,另外伴随着挪动机器设备的时兴,针对挪动运用的提升也10分关键。这关键包含:
Coockie:
    减小Cookie体积 针对网页页面內容应用无coockie网站域名

照片:
    提升图象 提升CSS Spirite 不必在HTML中放缩图象 favicon.ico要小并且可缓存文件

挪动运用:
    维持单独內容小于25K 装包组件成复合型文字

27、减小Cookie体积
HTTP coockie能够用于管理权限认证和个性化化身份等多种多样主要用途。coockie内的相关信息内容是根据HTTP文档头来在web服务器和访问器之间开展沟通交流的。因而维持coockie尽量的小以降低客户的回应時间10分关键。
相关更多信息内容能够查询Tenni Theurer和Patty Chi的文章内容“When the Cookie Crumbles”。这们科学研究中关键包含: 除去无须要的coockie 使coockie体积尽可能小以降低对客户回应的危害 留意在融入级別的网站域名上设定coockie便于使子网站域名不会受到危害 设定有效的到期時间。较早地Expire時间和不必过早去消除coockie,都会改进客户的回应時间。
28、针对网页页面內容应用无coockie网站域名
当访问器在恳求中另外恳求1张静态数据的照片和推送coockie时,服务器针对这些coockie不容易做任何地应用。因而她们只是由于一些负面要素而建立的互联网传送。全部你应当明确针对静态数据內容的恳求是无coockie的恳求。建立1个子网站域名并用他来储放全部静态数据內容。
假如你的网站域名是www.example.org,你能够在static.example.org上存在静态数据內容。可是,假如你并不是在www.example.org上而是在一级域名example.org设定了coockie,那末全部针对static.example.org的恳求都包括coockie。在这类状况下,你能够再再次选购1个新的网站域名来存在静态数据內容,而且要维持这个网站域名是无coockie的。Yahoo!应用的是ymig.com,YouTube应用的是ytimg.com,Amazon应用的是images-anazon.com这些。
应用无coockie网站域名存在静态数据內容的此外1个益处便是1些代理商(服务器)将会会回绝对coockie的內容恳求开展缓存文件。1个有关的提议便是,假如你想明确应当应用example.org還是www.example.org做为你的1首页,你要考虑到到coockie带来的危害。忽视掉www会使你除把coockie设定到*.example.org(*是泛网站域名分析,意味着了全部子网站域名译者dudo注)外沒有其它挑选,因而出于特性层面的考虑到最好是是应用带有www的子网站域名而且在它上面设定coockie。
29、提升图象
设计方案人员进行对网页页面的设计方案以后,不必急于将它们提交到web服务器,这里还必须做几件事: 你能够查验1下你的GIF照片中图象色调的数量是不是和调色板规格型号1致。 应用imagemagick中下面的指令行很非常容易查验:
identify -verbose image.gif
假如你发现照片中只用到了4种色调,而在调色板的中显示信息的256色的色调槽,那末这张照片就也有缩小的室内空间。 尝试把GIF文件格式变换成PNG文件格式,看看是不是节约室内空间。大多数数状况下是能够缩小的。因为访问器适用比较有限,设计方案者们常常不太乐意应用PNG文件格式的照片,但是这全是以往的事儿了。如今仅有1个难题便是在真彩PNG文件格式中的alpha安全通道半全透明难题,但是一样的,GIF也并不是真彩文件格式也不适用半全透明。因而GIF能保证的,PNG(PNG8)一样也能保证(除动漫)。下面这条简易的指令能够安全性地把GIF文件格式变换为PNG文件格式:
convert image.gif image.png
“大家要说的是:给PNG1个使出动作迅速的机遇吧!” 在全部的PNG照片上运作pngcrush(或其它PNG提升专用工具)。比如:
pngcrush image.png -rem alla -reduce -brute result.png 在全部的JPEG照片上运作jpegtran。这个专用工具能够对照片中的出現的锯齿等做高质量实际操作,另外它还能够用于提升和消除照片中的注解和其它无用信息内容(如EXIF信息内容):
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
30、提升CSS Spirite 在Spirite中水平排序你的照片,竖直排序会稍稍提升文档尺寸; Spirite中把色调较近的组成在1起能够减少色调数,理想化情况是低于256色便于可用PNG8文件格式; 便于挪动,不必在Spirite的图象正中间留有较大间隙。这尽管不交流会提升文档尺寸但针对客户代理商来讲它必须更少的运行内存来把照片解压为像素地形图。100x100的照片为1万像素,而1000x1000便是100万像素。
31、不必在HTML中放缩图象

不必以便在HTML中设定长宽而应用比具体必须大的照片。假如你必须:
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那末你的照片(mycat.jpg)就应当是100x100像素而并不是把1个500x500像素的照片变小应用。
32、favicon.ico要小并且可缓存文件
favicon.ico是坐落于服务器根文件目录下的1个照片文档。它是必然存在的,由于即便你不关注它是不是有效,访问器也会对它传出恳求,因而最好是不必回到1个404 Not Found的回应。因为是在同1台服务器上,它每被恳求1次coockie就会被推送1次。这个照片文档还会危害免费下载次序,比如在IE中当你在onload中恳求附加的文档时,favicon会在这些附加內容被载入前免费下载。
因而,以便降低favicon.ico带来的缺点,要保证: 文档尽可能地小,最好是小于1K 在适度的情况下(也便是你不必准备再换favicon.ico的情况下,由于拆换新文档时不可以对它开展重取名)为它设定Expires文档头。你能够很安全性地把Expires文档头设定为将来的几个月。你能够根据核查当今favicon.ico的之前编写時间来作出分辨。
Imagemagick能够帮你建立精巧的favicon。
33、维持单独內容小于25K
这条限定关键是由于iPhone不可以缓存文件超过25K的文档。留意这里指的是解缩小后的尺寸。因为单纯性gizp缩小将会达不必求,因而精简文档就显得10分关键。
查询更多信息内容,请参考Wayne Shea和Tenni Theurer的文档“Performance Research, Part 5: iPhone Cacheability - Making it Stick”。
34、装包组件成复合型文字
把网页页面內容装包成复合型文字就好似带有多附件的Email,它可以使你在1个HTTP恳求中获得好几个组件(谨记:HTTP恳求是很奢华的)。当你应用这条标准时,最先要明确客户代理商是不是适用(iPhone就不适用)。