A.
要求:尽量减少HTTP请求; ·HTTP请求是什么? 每一个内容(如文字、图片、js、css)的获取,就是一个http请求; ·如何优化请求:文字,图片合并,js合并,css合并;
B.
CDN:通过在网络放置节点服务器,他是一个智能虚拟网络,会根据数据流量,速度,负载量,访问最近的节点
作用:解决网络拥挤,提高网络相应速度。
使用CDN(内容分发网络)前后对比
1.在没有使用CDN时,需要经过较多的节点才能访问到目的地。
2.使用了CDN时,CDN服务器复制多个副本在你附近,这时候你访问时经过CDN服务器找到最佳节点访问目的地,
当然这要购买CDN服务器,用金钱买性能
C.
添加 Expire/Cache-Control 头: expire头的内容是一个时间值,值就是资源在本地的过期时间、存在本地。在本地缓存阶段,找到一个对应的资源值,
当前时间还没超过资源的过期时间,就直接使用这一个资源,不会发送 HTTP 请求。 cache-control:是http协议中常用的头部之一,顾名思义,他是负责控制页面的缓存机制,如果该头部指示缓存,
缓存的内容也会存在本地,操作流程和expire相似,但也有不同的地方,cache-control有更多的选项,而且也有更多的处理方式。就是经过一段时间后,要不要重新发送HTTP请求D.
D.
使用Gzip压缩数据Gzip支持压缩文本数据,包括:HTML,PHP,JS,CSS,XML,TXT等等。
GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩。后缀为.gz的文件,它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式,
或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能,
一般对纯文本内容可压缩到原大小的40%.这样传输就快了。
使用Gzip:
·把文件先压缩,再传输
·流程:原始79--本地压缩--服务器端对已经压缩的再压缩-
·优点:提升文件传输速度;(在服务器端配置)
E.
css(层叠样式表):后面的样式会覆盖前面的,级别高的样式会覆盖级别低的样式。
先加载css,放在头部<head>提高渲染性能,避免页面空白或者重绘。
IE:css放body底部,IE禁止了网页内容的顺序显示,低网速情况下导致空白
FF:不阻止显示,但会导致闪烁重绘
就是将CSS放在页面的最上方。
F.
将script标签放在页面底部。
可以让页面内容优先呈现出来,而非先暴露script的bug,将Script放在页面的最下面,因为浏览器加载和解释网页的顺序是从左到右从上到下的,如果JavaScript代码有死循环的问题,网页可能是空白一片的,如果放在页面的最下面即使如此,页面也能展现出来,当然这个问题最好避免!
G.
避免使用css expression,即CSS表达式
(所谓css expression就是css的属性值是由js计算出来的,用了该属性,鼠标移动,滚动都会对其值进行重新计算),这样会严重影响浏览器效率
H.
CSS、JS写在页面内的情况:
只应用于一个页面。
不经常被访问到。
脚本和样式很少。
JS,CSS都放在外部的文件中,单独提取的好处 1:提高了JS和CSS的复用性; 2:减少了页面的体积; 3:提高了JS和CSS的可维护性 缺点:增加请求数,可通过缓存优化 放在内部的优点 1:减少了页面的请求数; 2:提升了页面的渲染速度
I.
减少DNS查询:
·底层行为
·定义:访问网址,打开之前,转换机制(ip地址),对应网址;
·时间:20ms最少;
·如果同时很多查找过程,会影响速度;因此需要浏览器的缓存;
·IE30m,ff60s,chrome60s,
·缓存长:减少dns重复查找,节省时间;
·缓存短:及时检测服务器的变化,保证正确性;
多域和单域:
多域:
不同资源放在不同的ip
单域:
所有资源放在一个IP
J.
最小化 JavaScript 和 CSS:
1、去除不必要的空白符、格式符、注释符。
2、简写方法名、参数名,压缩JS脚本。
使用工具压缩 JavaScript 和 CSS
K.
避免重定向 定义:原始请求被重新转到了其他请求 301:被移动到另外位置(永久重定向)使搜索引擎智能,不需要从旧地址到新地址,删除旧地址,直接到新地址 302:页面被找到,但不在原始位置(临时重定向)先到旧地址,再到新地址 重定向:重新请求下载资源,增加了http请求
L.
移除重复引用的脚本 ,因为其会执行多次 移除重复的脚本可以减少文件的大小,另外,就是可以避免出现未知的问题!
M.
ETag:entity tag(实体标签) 属于HTTP协议 受web服务支持 使用特殊的字符串 来标识某个请求的资源版本
使用一种标志表示一种资源是否做了修改,可以减少服务器的响应,详细点就是:浏览器想服务器要某种资源,服务器一看,
判断出了这种资源已经给过浏览器了,并且在服务器端的也没有变化,所以浏览器可以使用他自身就有的,然后告诉浏览器,
浏览器回到自身找找,找到啦就用了,这样浏览器和服务器之间会有对话不过不用服务器再重复的给浏览器资源了!
N.
使用Ajax缓存
分批下载,局部更新
post:每次都执行,不被缓存;
get:同一地址不重复执行,可被缓存