优化

Web前端优化

一.尽量减少http请求

   每一个带src的元素、js、css、及背景图片都会引发http请求。

二.减少css和js的大小及数量

三.图片优化
   把多图合并成一个背景图(用css sprite工具合并)，再通过css坐标定位图片，以减少http的请求次数(png8比gif小)。

四.表现与行为分离(style onclick不要有)。

五.使用GZIP压缩
     1.先通过查看http头，确认浏览器是否支持GZIP(查看工具用Fiddler)
        

     2.去掉Apache的http.conf文件里的两行注释
         LoadModule deflate_module modules/mod_deflate.so
         LoadModule filter_module modules/mod_filter.so
         LoadModule headers_module modules/mod_headers.so

     3.在根目录中新建.htaccess文件，内容为

#GZIP压缩模块配置
<ifmodule mod_deflate.c>
#启用对特定MIME类型内容的压缩
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|exe|t?gz|zip|bz2|sit|rar|pdf|mov|avi|mp3|mp4|rm)$ no-gzip dont-vary #设置不压缩的文件
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-httpd-php application/x-javascript #设置压缩的文件(这个必须要把mod_filter.so给放开)
</ifmodule>

#文件缓存时间配置
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

      以上GZIP就配完了，下面能过Fiddler测试同一个页面，明显传输的内容少了

        

六.浏览器缓存

//3600秒(1小时)。 
$time = 60 * 60;
  
//发送Last-Modified头标，设置文档的最后的更新日期。 
header ("Last-Modified: " .gmdate("D, d M Y H:i:s", time() )." GMT"); 
 
//发送Expires头标，设置当前缓存的文档过期时间，GMT格式。 
header ("Expires: " .gmdate("D, d M Y H:i:s", time()+$time )." GMT"); 
 
//发送Cache_Control头标，设置xx秒以后文档过时,可以代替Expires，如果同时出现，max-age优先。 
header ("Cache-Control: max-age=$time"); 

用浏览器第一打开，返回的状态为200，时间为最新的时间。然后第二次打开，态码依然是200，Size栏目显示为from cache，表示内容是直接从浏览器读取。删除php文件，然后第三次在新窗口中打开，可以看到返回200状态码，打印时间依然是旧的，Size依然提示为from cache，由此可见，就算删除页面，浏览器端依然可以显示，表明浏览器根本就没有向服务器发起http请求。

七.图片预加载
     当前画面加载完毕之后通过new Image().src = 'xxx.jpg';(只要给src赋值了，就会触发http请求)将其它画面需要显示的图片给下载到缓存里，当用户点开其它画面时只需要从缓存里加载图片即可。

八.图片延迟加载
     当屏显示不下的页面，通过截取滚轮事件，把将要显示部分的图片给加载进来。