1、 削减http要求，合理设置 HTTP缓存

http协定是无状况的运用层协定，意味着每次http要求都须要竖立通讯链路、举行数据传输，而在效劳器端，每一个http都须要启动自力的线程去处置惩罚。这些通讯和效劳的开支都很高贵，削减http要求的数量可有用进步接见机能。

削减http的重要手腕是兼并CSS、兼并javascript、兼并图片。将浏览器一次接见须要的javascript和CSS兼并成一个文件，如许浏览器就只须要一次要求。图片也能够兼并，多张图片兼并成一张，假如每张图片都有差别的超链接，可经由过程CSS偏移相应鼠标点击操纵，组织差别的URL。

① 简朴的图片结果能够运用html+css、canvas或许svg来替代。
② 兼并CSS、兼并javascript、兼并图片（webPack等包管理东西）
③ 图片花样，大小挑选，图片优化

2、 运用浏览器缓存：
① http缓存（文件级缓存）
<meta http-equiv=”Cache-Control” content=”max-age=7200″ />
<meta http-equiv=”Expires” content=”Mon, 20 Jul 2013 23:00:00 GMT” />
② cookie: 贮存在用户当地终端上的数据(平常经由加密)有长度和个数限定，浏览器端也能够经由过程document.cookie来猎取cookie，并经由过程js浏览器端也能够方便地读取/设置cookie的值。
③ localStorage: localStorage是html5的一种新的当地缓存计划，现在用的比较多，平常用来存储ajax返回的数据，加速下次页面翻开时的衬着速率。localstorage大小有限定，不适合寄存过量的数据，假如数据寄存凌驾最大限定会报错，并移除最早保留的数据。localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据
localStorage中心API:
localStorage.setItem(key, value) //设置纪录
localStorage.getItem(key) //猎取纪录
localStorage.removeItem(key) //删除该域名下单条纪录
localStorage.clear() //删除该域名下一切纪录

注：localStorage对象的属性值只能是字符串，json对象能够依据固然也能够借助JSON类，将对象转换成字符串保留，然后在取出来的时刻将json字符串转换成真正可用的json对象花样。
④ sessionstorage：
sessionStorage和localstorage相似，然则浏览器封闭则会悉数删除，api和localstorage雷同，现实项目中运用较少。
⑤ application cache
application cahce是将大部分图片资本、js、css等静态资本放在manifest文件设置中。当页面翻开时经由过程manifest文件来读取当地文件或是要求效劳器文件。

3、启用紧缩

    在效劳器端对文件举行紧缩，在浏览器端对文件解紧缩，可有用削减通讯传输的数据量。假如能够的话，尽量的将外部的剧本、款式举行兼并，多个合为一个。文本文件的紧缩效力可到达80%以上，因而HTML、CSS、javascript文件启用GZip紧缩可到达较好的结果。然则紧缩对效劳器和浏览器发生肯定的压力，在通讯带宽优越，而效劳器资本不足的情况下要衡量斟酌。

采纳网上在线紧缩东西（jQuery MiniUI）本身紧缩或许经由过程webpack、gulp等打包东西举行紧缩处置惩罚。

4、CSS Sprites

5、LazyLoad Images：关于图片而言，在页面刚加载的时刻能够只加载第一屏，当用户继承今后滚屏的时刻才加载后续的图片。
①jqueryLazyload体式格局
②echo.js体式格局

6、CSS放在页面最上部，javascript放在页面最下面

后续文章还会详细讲种种优化要领，愿望人人一同进修~