YaHoo军规

一、尽可能减少HTTP请求

官方的解释：

从客户端到服务器端的请求消息，包括消息首行中，对资源的请求方法，资源的标识符及使用的协议。

通俗解释：

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

 

图片，CSS，JS，每一个文件都是一个HTTP请求，减少请求的文件数

 

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

意思是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有互联网基础之上的智能虚拟网络。编译系统可以实时的，根据网络流量和节点的连接、负载状况到用户的距离和响应的时间综合起来。将用户的请求导至离用户最近的服务器。目的是使用户可以就近取得所需内容，解决网络拥挤的状况，提高用户访问速度。

菜鸟解释：在离你最近的地方，放置一台性能好链接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。

 

三、添加Expire/Cache-Control头

客户端访问浏览器，会返回expire的http头，expire头的内容是一个时间值，值就是资源在本地的过期时间、存在本地。在本地缓存阶段，找到一个对应的资源值，当前时间还没超过资源的过期时间，就直接使用这一个资源，不会发送http请求。

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

 

四、启用Gzip压缩

文件在服务器先压缩，客户端解压缩。将文件的体积变小

 

五、将CSS文件放在页面最上面

层叠样式表单，意味着后面的CSS可以覆盖前面的CSS，级别高的CSS可以覆盖级别低的CSS。

在IE中，将CSS放在下面，会禁止网页内容的顺序显示。

 

六、将script放在页面最下面

该显示的内容会都显示

 

七、避免在CSS中使用Expressions

CSS Expressions=CSS表达式，用来把CSS属性和javascript表达式关联起来

CSS expressions在1、页面显示和缩放2、页面滚动3、移动鼠标的时候都会重新计算一次，因此会影响浏览器的性能，影响用户的体验

 

八、将javascript和CSS文件放在外面引用

1、将文件单独提取的好处：提高了js和CSS的复用性，减小页面体积、提高了js和CSS的可维护性。

2、写在页面内的好处：减少页面请求，提升页面渲染速度

写在页面内情况：

只应用于一个页面

不经常被访问到

脚本和样式很少

九、减少DNS查询

IE默认的DNS缓存时间为30m，Firefox,chrome默认的时间是60s

当缓存时间长时：就会减少DNS的重复查找，节省时间，当缓存时间短时：就会及时检测网站服务器的变化，保证正确性。

单域：将图片、脚本文件等都放在一个服务器下。

多域：将图片、脚本文件等放在多个服务器下。

 

十、最小化javascript和CSS

1、去除不必要的空格符、格式符、注释符

2、简写方法名、参数名压缩js脚本

 

十一、避免重定向

原始请求被重新转向了其他请求

重定向状态码：301被移动到了另外的位置，表示一个永久重定向；302请求的页面被找到了，但不在原来位置，服务器会返回一个地址，然后页面再去访问这个位置，表示临时重定向。

 

十二、移除重复的脚本

 

 

十三、配置实体标签ETag

属于HTTP协议，受web服务支持

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

如果客户端的ETag和服务器端的一致，表示未被修改过，则返回一个304码，告诉浏览器可以使用本地缓存的版本。

 

 

十四、使用ajax缓存

两种方法POST、GET，

POST每次都执行，不可以被缓存

GET同一个地址不重复执行，可以被缓存

GET：

1、把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。

POST：

1、通过HTTP POST机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址，用户看不到这个过程。

GET

２、服务器端用Request.QueryString获取变量的值

３、传送的数据量较小，不能大于2KB

４、安全性非常低

５、Method为GET时，action后面带的参数列表会被忽略。

POST

2、服务器端用Request.Form获取提交的数据

3、传送的数据量较大，一般被默认为不受限制，但理论上，因服务器的不同而异

4、安全性较高

5、Action后面带的参数不会被忽略

 

 

Yslow页面优化，Firefox插件。安装的时候必须安装firebug

Firebug编辑html

Ctrl+shift+c定位网页元素

Firebug小甲虫图标，自定义快捷键可以查看快捷键

小甲虫旁边的按钮用于定位页面元素在源代码中的位置。

 

Firebug处理CSS

修改样式：双击样式，就可进行CSS编辑，并且会在页面实时显示。

禁用样式：当鼠标悬浮在样式上，左边出现一个图标，点击它时，就禁用了该样式。

删除样式：双击，delete删除，enter。

微调样式：上下键，方向键，每次调一个单位。Ctrl+方向键，每次调整0.1个单位，shift+方向键，每次调整10个单位

 

评估页面下载速度

Ajax监听

Javascript控制台

Tab键自动补全

Firefox开发者工具可以模拟响应式开发设计