1. 减少http请求数
对于影响页面呈选 的因素有3个地方:服务器连接数据库并计算返回数据 , http请求以及数据(文件)经过网络传输 , 文件在浏览器中计算渲染呈选; 其中大约80%的时间都耗在了http请求上,所以要想大幅度优化页面,必须从http请求上入手
常用的减少http请求数有以下几种:
1)制作图片地图:允许一个图片关联多个url,即将多个图片合并为一个图片,如下导航栏demo:
<img usemap="#map1" border=0 src="/images/imagemap.gif?t=1196816255">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="gifs.html" title="Gifts">
<area shape="rect" coords="71,0,101,31" href="settings.html" title="Cart">
<area shape="rect" coords="106,0,136,31" href="help.html" title="Help">
</map>
但如上方法采取手工方式则很难完成且容易出错,而且除了矩形之外几乎无法定义其他形状,通过DHTML创建的图片地图在IE中无法工作。
CSS Sprites精灵图:还可通过css中的background-position来定位图片中的某一具体部分,它比图片地图更灵活,更加建议使用。
内联图片:通过使用data:URL数据形式可以替代http请求,甚至可以用于script和a标签中,其缺陷是Base64编码会增加图片的大小,并且嵌在网页中,会加大网页的数据量,
但它可以减少http网络请求耗时。这里提供图片生成dataurl数据的方法。
var can = document.createElement("canvas");
var ctx = can.getContext("2d");
img.onload = function(){
ctx.drawImage(this, 0, 0, width, height);
can.toDataURL();
}
2)合并压缩css样式表和js脚本,他们的共同目的都是为了减少http连接数。
3)去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。
4)充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据,格式类似于Expires:sun ,20 Dec 2021 19:00:00 GMT。 如果当前时间小于Expires指定的时间,浏览器就会从缓存中直接获取相关的数据信息或html文件,如果当前时间大于Expires指定的时间,浏览器会向服务器发送请求来获取相关数据信息。
以Apache为例,可在Apache的配置文件httpd.conf中设置Expires。
2. 图片优化
优化方法:
1)尽可能的使用WebP格式的图片,它相对Png图片来说体积更小,并且图片并没有失真或者模糊,webp格式必然会成为未来的主流。
前端判断断浏览器是否支持webp格式,主要有两种方式:
一种是利用canvas绘制来判断,一种是利用img对象来加载一个1px的webp图片。核心代码分别如下:
方法一:
方法二:
2)对于不同格式的图片,在上线之前最好进行一定的优化。
3)图片的延迟加载,也叫做赖加载。
3. 使用无cookie域名
无cookie域名的概念:当发送一个请求时,同时还要请求一张静态的图片和发送cookie时,服务器对于这些cookie不会做任何使用,也就是说这些cookie没什么用,没不要随请求一同发送。
4. 样式表和JS文件的优化
一般我们会把css样式表文件放到文件的头部。比如,放到<head>
标签中,这样可以让CSS样式表尽早地完成下载。对应js脚本文件,一般我们把他放到页面的尾部。
5. 开启GZIP
GZIP即数据压缩,用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单,到对应的web服务配置文件中设置一下即可。以Apache为例,在配置文件httpd.conf中添加。
6. 使用CDN
CDN即内容分发网络,可以使用户就近取得所需内容,解决网络拥挤的状况,提高用户访问网站的响应速度。
7. 前端代码结构的优化