Yahoo 军规

Yahoo 军规

一 尽可能的减少HTTP的请求数
什么是HTTP请求： 从客户端到服务器端的请求消息
包括消息首行中，对资源的 请求方法
资源的 标识符及使用的 协议

当你打开网页的时候，你看到的文字，图片多媒体等等，这一切的内容
都是你从服务器获取的，每一个内容的获取，就是一个HTTP请求。
合并请求

二 使用CDN（内容分发网络）
什么是CDN？
内容分发网络，意思是尽可能避开互联网上
有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快，更稳定。
通过在网络各地放置节点服务器，在现有互联网之上的一层虚拟网络
CDN系统能够实时的通过网络流量和各节点的连接和负载状况以及到用户的距离和响应时间
等综合信息将用户的请求重新导向离用户最近的服务器节点上，目的是使用户可以就近
获取所需内容解决网络拥挤的状况，提高用户访问网站的相应速度

在离你最近的地方放置一台性能好链接顺畅的副本服务器，让你能够以最近的距离，
最快的速度获取内容。（条件：需要放置服务器（成本：money））

三 添加Expire/Cache-Control头

Expire模块：当浏览器发送资源请求的时候， 阿帕奇（？服务器）返回资源的同时
会返回一个名为Expire的HTTP头
expire头的内容是一个时间值，
值就是资源在本地的过期时间，存在本地，
在本地缓存阶段，找到一个对应的资源值，
当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。
Cache-Control
是http协议中常用的头部之一，
顾名思义，他是负责控制页面的缓存机制，
如果该头部指示缓存，缓存的内容也会存在本地，
操作流程和expire相似，但也有不同的地方
Cache-Control有更多的选项，
而且也有更多的处理方式
简单的说，就是服务器发送请求的时候添加了一个时间值，本机会通过这个时间值
来判断是否要重新获取。
四 启用Gzip压缩

把文件放在服务器先进行压缩，然后在传输，显著减少传输文件的大小
传输完毕以后，浏览器会对传输后的内容进行解压缩并执行
优点：将文件的体积变小

五 将css放在页面最上面

Cascading Style Sheets（层叠样式表单）
层叠即意味着后面的css可以覆盖前面的css，级别高的css可以覆盖级别低的css

为什么要把css放在页面最上面呢？
IE：把CSS放在页面底部的问题在于它禁止了网页内容的顺序显示
ie阻止内容显示，以免重画页面元素，在低网速的条件下
用户打开时只能看见空白页
FireFox： 虽然不会阻止显示，但css下载后页面部分元素可能需要重画
这就会导致闪烁的问题，所以为了提高浏览器的渲染性能
避免页面出现空白或闪烁的问题，我们应该将css放在顶部head中
先进行渲染和加载，这样可以避免上述提到得两个问题

六 将Script放在页面最下面

首先要了解一下DOM的加载顺序
当我们打开网页的时候，网页的代码加载顺序从上到下
将script放到底部，会先将页面显示出来，不会让用户等的太久。

七 避免在CSS中使用Expressions
什么是css Expressions？
css表达式：将css属性和Javascript表达式关联起来
css属性的值 等于Javascript表达式计算的结果
css Expressions计算的频率要比我们想象的多得多，不仅仅是页面
显示和缩放的时候，页面滚动，移动鼠标的时候都要重新计算一次

严重影响浏览器性能，严重影响用户体验。

八 将Javascript和css都放在外部文件中

变通使用
单独提取：
优点： 提高了js和css的复用性
减小页面体积
提高了js和css的可维护性
缺点： 单独的文件增加请求数，文件比较多时，请求数增加，影响网站的性能。可通过缓存优化

写在页面内：
减少页面请求
提升页面渲染速度

在实际的工作中应该变通的使用
写在页面内： 1.当某个脚本或样式只应用于一个页面的时候，其他页面不会用到。这个时候放在内部的好处
是大于提取出来的。
2.不经常被访问到的页面
3.脚本和样式很少的情况

九 减少DNS查询

怎么减少DNS查询？
比如要访问 www.a.com时 打开页面之前 计算机要通过一种转换机制才可以到达这个页面
将 www.a.com转换为一个IP地址，计算机理解的地址，通过这个IP地址在对应到
www.a.com这个网站（大约20ms）
缓存机制：IE: 30m
firefox: 60s
chrome : 60s
当缓存时间长时：
减少DNS的重复查找，节省时间。
缓存时间短时：
及时检测到网站服务器的变化，保证正确性。

多域： 将html，img，js分别提出来，放在分别的域名下

单域： 将所有文件放在一个服务器上

十 最小化Javascript和Css

使js和css最小化，减少文件的体积 ，文件体积减少了下载速度提高

1. 去除不必要的空白符，格式符，注释符
2. 简写方法名，参数名，压缩js脚本
在正式上线项目前，将js和css都进行压缩，使线上版本是最轻量级的，大幅提升网站性能。

十一避免重定向
用户的原始请求被重新转向到了其他请求
（用户想访问的页面A被重新指向了页面B）

http协议中有两种重定向状态码： 301 Moved permanently 永久重定向
用户请求的页面（a.com） 被移动到了另外的位置 （b.com）
用户端会发起另外的请求，去 b.com 去下载所需要的资源。

302 Found 临时重定向
用户请求的页面被找到了，但不在原始位置
服务器会回复一个地址，用户端同样会发起另外一个请求，去返回的地址中下载资源。

对用户没有什么区别

搜索引擎：
不定期对网站内容进行扫描（蜘蛛爬网）
301： 更智能 （记录下新地址，而删除原先的老地址）

302： 找旧地址再跳新地址。
为什么避免重定向：
增加浏览器到服务器的往返次数
（多了一次请求和返回的过程）

十二 移除重复的脚本

十三 配置实体标签（ETag）

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

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

当用户通过浏览器向服务器请求资源的时候服务器会进行比较
如果两边的ETag一致那就是说浏览器的ETag和服务器端的ETag一致
这就意味着该资源没有修改过。和以前一模一样
服务器会返回一个304码，告诉浏览器可以使用本地缓存的版本。
优点： 帮服务器减轻很多负担

十四 使用AJAX缓存

Asynchronous Javascript and XMl
异步的Javascript和XML

可以在不重新加载页面的情况下使客户端和服务器进行交换数据
可使网站的内容分批加载， 还可以局部更新

可以被缓存的内容：
POST: 每次都发给服务器进行处理，服务器每次都会返回一个状态码200
不可以被缓存

 

GET： 除非指定了一个不同的地址，否则同一个地址的AJAX请求不会重复再服务器执行
返回304
同一地址不重复执行
可以被缓存

GET POST