161026、更快速将你的页面展示给用户[前端优化篇]

大纲：

请求优化

资源优化

缓存

其它的

请求优化

图片延迟加载

https://github.com/tuupola/jquery_lazyload

$(".main_contentimg").lazyload({

placeholder:"/images/loading.gif",

threshold:200

});

$.belowthefold=function(element,settings){

varfold;

if(settings.container===undefined||settings.container===window){

fold=(window.innerHeight?window.innerHeight:$window.height())+$window.scrollTop();

}else{

fold=$(settings.container).offset().top+$(settings.container).height();

}

returnfold<=$(element).offset().top-settings.threshold;

};

$.rightoffold=function(element,settings){

varfold;

if(settings.container===undefined||settings.container===window){

fold=$window.width()+$window.scrollLeft();

}else{

fold=$(settings.container).offset().left+$(settings.container).width();

}

returnfold<=$(element).offset().left-settings.threshold;

};

$.abovethetop=function(element,settings){

varfold;

if(settings.container===undefined||settings.container===window){

fold=$window.scrollTop();

}else{

fold=$(settings.container).offset().top;

}

returnfold>=$(element).offset().top+settings.threshold+$(element).height();

};

$.leftofbegin=function(element,settings){

varfold;

if(settings.container===undefined||settings.container===window){

fold=$window.scrollLeft();

}else{

fold=$(settings.container).offset().left;

}

returnfold>=$(element).offset().left+settings.threshold+$(element).width();

};

$.inviewport=function(element,settings){

return!$.rightoffold(element,settings)&&!$.leftofbegin(element,settings)&&

!$.belowthefold(element,settings)&&!$.abovethetop(element,settings);

};

ajax局部加载数据

预加载

varimg=newImage();

img.src="test.png";

资源优化

资源压缩(uglify-js,clean-css)

@echooff

::设置压缩JS文件的根目录，脚本会自动按树层次查找和压缩所有的JS

SETJSFOLDER=D:\project\scripts

echo正在查找JS文件

chdir/d%JSFOLDER%

for/r.%%ain(*.js)do(

@echo正在压缩%%~a...

uglifyjs%%~fa-mangle-o%%~fa

)

echo完成!

pause&exit

>uglifyjsjs1.jsjs2.js-m-omerge.js

>cleancss-omegar.cssstyle1.cssstyle2.css

<scriptsrc="//g.alicdn.com/kissy/k/6.2.4/??node-min.js,node-base-min.js,dom-base-min.js,query-selector-base-min.js,dom-extra-min.js,node-event-min.js,event-dom-base-min.js,event-base-min.js,event-dom-extra-min.js,event-gesture-min.js,event-touch-min.js,node-anim-min.js,anim-transition-min.js,anim-base-min.js,promise-min.js,base-min.js,attribute-min.js,event-custom-min.js,json-base-min.js,event-min.js,io-min.js,io-extra-min.js,io-base-min.js,io-form-min.js,cookie-min.js"></script>

<iclass="iconiconfont">U</i>

http://iconfont.cn/

Expires:Thu,20Oct201606:43:43GMT//告诉浏览器此日期以前可以使用缓存文件

Cache-Control:public,max-age=3600//表示资源在3600毫秒之内可以使用缓存文件，如果和Expires同时存在则覆盖Expires

Last-Modified:Wed,13Jul201508:52:12GMT//配合Cache-Controls使用，标示资源的最后修改日期

ETag:5384183131862232576//配合Cache-Controls使用，标示资源由服务器生成的唯一标识(某些资源最后修改日期不可靠，或者不希望展示最后修改日期，就可以使用ETag)

//200OK请求已成功，请求所希望的响应头或数据体将随此响应返回。

//304NotModified请求资源没有改变，可以使用缓存资源

<htmlmanifest="/mobile.manifest">

CACHEMANIFEST

##需要离线的内容

CACHE:

Script/jquery.js

Script/gameconfig.js

Image/home.png

Image/logo.png

##总是访问网络的内容

NETWORK:

*

##访问A失败时访问B

FALLBACK

document.domain=""；