Yahoo军规-前端优化14条

一、尽可能的减少HTTP请求数

1、什么是HTTP请求？

• 官方解释：从客户端到服务器端的请求信息。包括信息首行中，对资源的请求方法、资源的标识符及使用的协议。
• 通俗解释：当你打开网页的时候，你所看到的文字，图片，多媒体等等。一切内容，都是你从服务器获取的，每一个内容的获取就是一个HTTP请求。

2、如何减少

• 图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。
• 把多个JS、CSS在可能的情况下写进一个文件
• 页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background来定位。

二、使用CDN（内容分发网络）

​ 页面尽量用spath动态获取脚本和图片，CDN机制是在用户最近的服务器上获取到资源。

三、添加Expire/Cache-Control头

​ Cache-Control是http协议中最常用的头部之一，顾名思义，其是负责控制页面的缓存机制，如果该头部指示缓存，缓存的内容也会存在本地，操作流程和expire相似，但也有不同的地方，Cache-Control有更多的选项，而且也有更多的处理方式。

四、启用Gzip压缩

1、开GZIP有什么好处？

​ Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理，这样就会减小通过网络传输的数据量，提高浏览的速度。

2、如何启用IIS的Gzip压缩功能

​ 首先，如果你需要压缩静态文件（HTML），需要在硬盘上建一个目录，并给它“IUSR_机器名”这个用户的写权限。如果压缩动态文件（PHP，asp，aspx）就不需要了，因为它的页面是每次都动态生成的，压缩完就放弃。然后在IIS管理器中，“网站”上面右键－属性，不是下面的某个站点，而是整个网站。进入“服务”标签，选上启用动态内容压缩，静态内容压缩。然后选中网站下面那个服务器扩展，新建一个服务器扩展。名字无所谓，下面的添加文件的路径是： c:\windows\system32\inetsrv\gzip.dll，然后启用这个扩展。这时候静态内容是可以压缩的，但是对于动态内容，aspx文件却不在压缩范围内。因为默认的可压缩文件并没有这个扩展名。而管理界面中你又找不到可以增加扩展名的地方，这时候只能去修改它的配置文件了。在c:\windows\system32\inetsrv\下面有个MetaBase.xml文件，可以用记事本打开，找到IIsCompressionScheme，有三个相同名字的段，分别是deflate,gzip,Parameters，第三段不用管它，前两段有基本相同的参数，在这两段的参数HcScriptFileExtensions下面都加上一行aspx，如果你有其它的动态程序要压缩，也加在这里。HcDynamicCompressionLevel改成9，（0－10，9是性价比最高的一个）。然后需要重启一下IIS服务，就可以体会到压缩后的速度了。

五、将CSS放到页面最上面

​ 让浏览者能尽早的看到网站的完整样式。

六、将Script放到页面最下面

​ 网站呈现完毕后再进行功能设置，当然这些JS要在你的加载过程中不影响内容表现。

七避免在CSS中使用Expressions

​ Css Expressions在页面显示和缩放、页面滚动、移动鼠标等情况下都会重新计算一次，影响页面执行效率。

八、把JavaScript和CSS都放到外部文件中

1、单独提取

• 提高了js和css的复用性
• 减少页面体积
• 提高了js和css的可维护性

2、写在页面内

• 减少页面请求
• 提升页面渲染速度

3、写在页面内的优点大于单独提取时的情况

• 只应用于一个页面
• 不经常被访问到
• 脚本和样式很少，最多20行

九、减少DNS查询

1、当缓存时间长时，减少DNS的重复查找，节省时间

2、当缓存时间短时，及时的检测网站服务器的变化，保证正确性。

十、压缩JavaScript和CSS

1、减少JavaScript和css体积

• 去除不必要的空白符、格式符、注释符
• 简写方法名、参数名压缩Js脚本

2、建议，在上线前，将JavaScript和CSS都进行压缩，使线上版本是最轻量级的，大幅提高网站性能。

十一、避免重定向

1、重定向就是原始请求被重新转向到了其他请求。

2、重定向状态码

• 301 Moved Permanently 被移动到了另外的位置，永久重定向。搜索引擎能智能处理
• 302 Found 被找到了，但不在原始的位置，临时重定向。搜索引擎不能智能处理

十二、移除重复的脚本

​ 避免脚本重复引入，可能会有冲突，页面执行效果也可能会有问题。

十三、配置实体标签（ETags）

1、什么是Etags

• Entity Tag（实体标签）
• 属于HTTP协议
• 受web服务支持

2、如何配置实体标签

• 使用特殊的字符串来标识某个请求资源版本

十四、使Ajax缓存

1、Ajax

• 全称：Asynchronous JavaScript and XML，异步的JavaScript和XML
• 可实现分批加载和局部刷新
• 两种实现方式：post每次执行，不被缓存；get同一地址不重复执行，可被缓存

2、post和get的区别

Get	Post
把参数数据队列加到提交表单的Action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。	通过HTTP Post机制，将表单内各个字段与其内容放置到Html Headr内一起传送到Action属性所指的URL地址。用户看不到这个过程。
服务器端用Request.QueryString获取变量的值。	服务器端用Request.Form获取提交的数据。
传送的数据量较小，不能大于2KB	传送的数据量较大，一般被默认为不受限制。但理论上，因服务器的不同而异。
安全性非常低	安全性较高
<form method= 'get' action='a.jsp?b=b'>跟 <form method='get' action='a.jsp'>是一样的，也就是说，method为get时，action页面后面带的参数列表会被忽视。	<form method= 'get' action='a.jsp?b=b'>跟 <form method='get' action='a.jsp'>是不一样的。
会将数据天骄到URL中，通过这种方式传递到服务器，通常利用一个问号? 代表URL地址的结尾与数据参数的开端，后面的参数每一个数据参数以“名称=值”的形式出现，参数与参数之间利用一个连接符&来区分。	数据是放在Http主体中，其组织方式不止一种，有&连接方式，也有分隔符方式，可隐藏参数，传递大批数据，比较方便。

huanghui8030@qq.com 于 2016.07.21 整理，如有误请指正。