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放在页面最下面
后续文章还会具体讲各种优化方法，希望大家一起学习~
原文地址：https://www.cnblogs.com/10manongit/p/12217390.html