1.减少Http请求数量
2.使用CDN(内容分发网络) 放置副本服务器
3.添加Expire/Cache-Control头 expire头的内容是一个时间值,值就是资源在本地的过期时间,存在本地,在本地缓存阶段,找到一个对应的资源值,当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送Http请求 cache-control 是Http协议中常用的头部之一,顾名思义,它是负责页面的缓存机制,如果该头部指示缓存,缓存的头部也会存在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式
4.启用Gzip压缩 先压缩,再传输
5.将css放置在页面的最上边
6.将script放置在页面最下面(先呈现内容,减少等待时间) 页面元素的加载顺序html->head->meta->title(内容,网页标题)->style加载样式,解析样式->link标签->script文件->body->div->img->页面加载完毕
7.避免在css中使用Expressions css Expressions 关联css属性<--->JavaScript表达式
8.把JavaScript和css都放到外部文件中
8.1提取成文件的好处 提高js和css的复用 减少页面体积 提高js和css的可维护性
8.2写在页面中的好处 减少页面请求 提升页面渲染速度
8.3写在页面的情况 当css或js只应用于一个页面 不经常被访问到 脚本和样式很少
9.减少DNS查询 浏览器缓存,IE 30ms Firefox 60s Chrome 60s 当缓存时间长:减少DNS的重复查找,节省时间 当缓存时间短:及时的检测网站服务器的变化,保证准确性 单域 多域
10.最小化JavaScript和css
10.1去除不必要的空白符,格式符,注释符-->代码的格式化
10.2简写方法名,参数名压缩Js脚本 建议:在正式上线项目前,将javaScript和css都进行压缩,使线上版本是最轻量级的,大幅提升网站性能
11.避免重定向 重定向:原始请求被重定向到了其他请求 重定向状态码:301 Moved Permanently 移动到了另外的位置,永久重定向,搜索引擎智能 302 Found 页面被找到了,临时重定向 找旧地址再跳 增加了访问服务器的次数
12.移除重复的脚本
13.配置实体标签(ETag) ETag Entity Tag实体标签,属于http协议,受web服务支持 使用特殊的字符串来标识某个请求资源版本
14.使用Ajax(Asynchronous JavaScript and XML)缓存 分批加载,局部更新 POST:每次都执行,不可以被缓存 GET:同一地址不重复执行,可以被缓存 POST和GET的区别
14.1GET: 把参数数据队列加到提交表单的ACTION属性所指的URL队列中,值和表单内各个字段一一对应,在URL中可以看到 服务器端用Request.QueryString获取变量的值 传送的数据量比较小,不能大于2kb 安全性非常低 <form method="get" action="a.asp?b=b">跟<form method="get" action="a.asp">是一样的,也就是说,method为get时,action页面后边带的参数列表会被忽略 总结:get会将参数添加到URL中,通过这种方式传递到服务器,通常利用一个?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以"名称=值"的形式出现,参数与参数之间利用连接符&来区分
14.2POST: 通过HTTP POST机制,将表单内各个字段与其内容放置在HTML header内一起传送ACTION属性所指的URL地址,用户看不到这个过程 服务器端用Request.Form获取提交的数据 传送的数据量比较大,一般被默认为不受限制,但理论上,因服务器的不同而异 安全性较高 <form method="post" action="a.asp?b=b">跟<form method="post" action="a.asp">是不一样的 总结:数据是放在HTTP主体中的,其组织方式不只一种,有&连接方式,也有分隔符方式,可隐藏参数,传递大批数据,比较方便