【前端重构技能天赋】(三)——最终篇

少叙闲言

前文所说的7大类中,还有四类:服务器cookie图片移动应用,这四类之所以捏在一篇里,主要是因为其中的很多优化方式是要站在整个站点的高度来进行或是在后端操作,我并没有涉足过,也就无法给出真实感受,所以只能“道听”来,在这里“途说”一下自己的想法,希望实践过的且有节操的仁人志士们跳出来,劈头盖脸的指正……

About 服务器

  1. 使用内容分发网络
  2. 为文件头指定Expires
  3. Gzip压缩文件内容
  4. 尽早刷新输出缓冲

1、使用内容分发网络

简单说来就是你的用户在东北,他访问北京的服务器要快于访问上海的服务器,就是这样,然后你合理分布吧……

2、为文件头指定Expires

浏览器(和代理)使用缓存来减少HTTP请求的大小和次数以加快页面访问速度。Web服务器在HTTP响应中使用Expires文件头来告诉客户端内容需要缓存多长时间。

例如:Expires: Sat, 22 Dec 2012 00:00:00 GMT。它告诉浏览器这个响应直到世界末日那天才过期。

3、Gzip压缩文件内容

Content-Encoding: gzip 
Gzip是目前最流行也是最有效的压缩方式。这是由GNU项目开发并通过RFC 1952来标准化的。另外仅有的一个压缩格式是deflate,但是它的使用范围有限效果也稍稍逊色。
Gzip大概可以减少70%的响应规模。目前大约有90%通过浏览器传输的互联网交换支持gzip格式。

4、尽早刷新输出缓冲

当用户请求一个页面时,无论如何都会花费200到500毫秒用于后台组织HTML文件。在这期间,浏览器会一直空闲等待数据返回。在PHP中,你可以使用flush()方法,它允许你把已经编译的好的部分HTML响应文件先发送给浏览器,这时浏览器就会可以下载文件中的内容(脚本等)而后台同时处理剩余的HTML页面。这样做的效果会在后台烦恼或者前台较空闲时更加明显。

例如:… <!– css, js –>
     </head>
       <?php flush(); ?>
       <body>
        … <!– content –>

About cookie

  1. 减少cookie体积
  2. 使用无cookie域名

1、减少cookie体积

HTTP可是寸土寸金的地方,所以能小的都给我小掉,能让早过期的都早过期

2、使用无cookie域名

你在顶级域名下xxx.com设置了cookie的话,那么你在a.xxx.com或b.xxx.com下静态内容访问任何内容都会带着这个cookie

解决办法:再买一个新域名存放内容……

About 图片

  1. 优化图像
  2. 优化CSS Spirite
  3. 放置小且缓存的favicon.ico

1、优化图像

在你开发页面时候,确保所使用的图片是否可压缩,常见是PS切图后web格式储存(ctrl + alt + shift + s)。

据说PNG8可以承担非动画的很多重任,包括IE6。

例外在SEO界,搜索引擎在意的顺序是jpg>jpeg>gif>png>bmp,所以要根据需求来优化图像。

2、优化CSS Spirite

在Spirite中水平排列你的图片,垂直排列会稍稍增加文件大小。

Spirite中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以便适用PNG8格式。

便于移动,不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素,而1000×1000就是100万像素。

3、放置小且缓存的favicon.ico

favicon.ico也就是

是位于服务器根目录下的一个图片文件,它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一个404的响应。

About 移动应用

  1. 保持单个内容小于25K

1、保持单个内容小于25K

这条限制主要是因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求,因此精简文件就显得十分重要。

 (ps:前砖攻城师的重构技能天赋讨论到这里,有关于其它天赋和各个技能的介绍?……额……日后再说)

原文地址:https://www.cnblogs.com/ccto/p/3010125.html