浏览器性能优化

一、 减小http请求，合理设置 HTTP缓存

http协议是无状态的应用层协议，意味着每次http请求都须要创建通讯链路、进行数据传输，而在服务器端，每一个http都须要启动独立的线程去处理。这些通讯和服务的开销都很昂贵，减小http请求的数目可有效提升访问性能。

减小http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问须要的javascript和CSS合并成一个文件，这样浏览器就只须要一次请求。图片也能够合并，多张图片合并成一张，若是每张图片都有不一样的超连接，可经过CSS偏移响应鼠标点击操做，构造不一样的URL。

① 简单的图片效果可使用html+css、canvas或者svg来替换。
② 合并CSS、合并javascript、合并图片（webPack等包管理工具）
③ 图片格式，大小选择，图片优化

二、 应用浏览器缓存：
① 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文件来读取本地文件或是请求服务器文件。

三、启用压缩

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减小通讯传输的数据量。若是能够的话，尽量的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，所以HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。可是压缩对服务器和浏览器产生必定的压力，在通讯带宽良好，而服务器资源不足的状况下要权衡考虑。

采用网上在线压缩工具（jQuery MiniUI）本身压缩或者经过webpack、gulp等打包工具进行压缩处理。

四、CSS Sprites

五、LazyLoad Images：对于图片而言，在页面刚加载的时候能够只加载第一屏，当用户继续日后滚屏的时候才加载后续的图片。
①jqueryLazyload方式
②echo.js方式

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

后续文章还会具体讲各类优化方法，但愿你们一块儿学习~