Yahoo军规学习笔记

Yahoo目前为止有35条，挑选14条进行讲解


1.尽可能的减少HTTP请求数：
将图片、脚本文件、样式文件等进行合并，减少http请求次数


2.使用CDN（内容分发网络）：
CDN的全称是Content Delivery Network，即内容分发网络。
在离用户最近的地方，放置一台性能好、链接顺畅的副本服务器，让用户能够以最近的距离，最快的速度获取内容


3.添加Expire/Cache-Control头：
expire头的内容是一个时间值。
cache-control是http协议中常用的头部之一，负责控制页面的缓存机制，如该头部指示缓存，缓存的内容也会存在本地。
服务器在发送请求的时候添加了一个时间值，本机会根据这个时间值来判断是否要重新获取


4.启用Gzip压缩：
把文件先放在服务器进行压缩，然后再进行传输，这样会显著的减少文件的大小,传输后浏览器会根据压缩过的内容进行解压缩并执行。


5.将css放在页面最上面：
如果css放在底部，当css下载后页面部分元素可能需要重画，在低网速的情况下，导致页面闪烁的问题，为了提高浏览器的渲染性能。将css文件放在head中，先进行渲染和加载。避免出现页面空白和闪烁的问题。


6.将script放在页面最下面：
将script内容放在底部，html元素在其上先加载，先将内容呈现出来，不会让用户等太久。否则可能会影响html内容的加载呈现速度。


7.避免在css中使用Expressions
css expression：俗称css表达式，用来把css属性和javascript表达式关联起来，计算频率很高。
css expressions{
页面显示和缩放 
页面滚动 }要重新计算一次
移动鼠标 
}
严重影响浏览器性能，影响用户体验。


8.把javaScript和css都放到外部文件中：
写在页面内：
1.减少页面请求
2.提升页面渲染速度


单独提取成外部文件：
优点：
1.提高了js和css的复用性
2.减小页面体积
3.提高了js和css的可维护性
缺点：  
1.增加了请求数，影响网站性能。（可通过缓存来优化）

写在页面内情况：
1.只应用于一个页面
2.不经常被访问到
3.脚本和样式很少（不多于20行）

9.减少DNS查询：
DNS：Domain Name System，域名系统
DNS查询：用户输入网址后根据域名查找对应的IP地址，返回用户。


一个DNS查询至少需要20ms,对网站性能有影响，所以要对这个过程进行缓存，减少查找过程，目前浏览器都有缓存机制
缓存大概时间：
{
 IE:30m
 火狐:60s
 chrome:60s
}


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

多域或者单域的形式放置资源：
1.单域：将所有的文件都放到一个服务器中
2.多域：html,图片，脚本分别放在不同的域名（域名不是越多越好）


10.压缩JavaScript和css：
减小文件体积，使线上版本是最轻量级的，大幅提升网站性能。


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

11.避免重定向：
重定向：原始请求被重新转向到了其他请求地址

http重定向状态码：{
301：用户请求的页面被移动到了另外的位置（永久重定向）


302：用户请求的页面被找到了，但不在原始位置（临时重定向）
     }

搜索引擎对于重定向：
301：智能分析，会记录新地址，删除旧地址


302：找旧地址再跳新地址

重定向增加了浏览器到服务器的往返次数，用户多了一次获知新地址的过程


12.移除重复的脚本：
多次引用同一个js文件


如果js文件被多次引用且其中包含变量的运算，则多次引用会导致变量运算可能出错


13.配置实体标签（ETag）
ETag{
    Entity Tag (实体标签)
    属于HTTP协议
    受web服务支持
    }


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

用户通过浏览器向服务器请求资源的时候，服务器会进行比较，如果两边的ETag一致，证明该资源没有修改过，服务器会告诉浏览器对比一致，可以使用本地的缓存的版本


帮助服务器减轻许多负担


14.使Ajax缓存：
Ajax请求的两种方法：{
post:每次都执行（不可以被缓存）

get:同一地址不重复执行（可以被缓存）
}


15.Yahoo性能优化的插件：YSlow(基于浏览器的插件)
firefox支持性最好


安装顺序：1.基于浏览器（最好是firefox）--2.安装firebug--3.安装YSlow


用途：
1.对网站进行分析
2.给一些建议、一些规则
3.一步一步的优化自己的网站




使用：
   1.Rulesets:YSlow(v2)-22条测试规则
      YSlow(v1)-14条测试规则
small site or blog-13条测试规则
   2.Grade；等级视图 网页评分  A->F等级
   3.Components:组件视图，检视各个元素占用空间大小
   4.Statistics:统计信息视图，与Components相似
   5.tools:工具集
1）jslink：检验js正确性
2）alljs:展示网页中用的js
3)alljsbeautified:将js以可读的方式展示
4)alljsminified:删除换行、空格等，压缩js
5）allcss:展示网页中用的css
6)yuicsscompressor:压缩css
7)allsmush.it:优化图片
8）printableview:将分析打印成报告