前端对浏览器性能优化

1、 减少http请求，合理设置 HTTP缓存

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

减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

① 简单的图片效果可以使用html+css、canvas或者svg来替换。

② 合并CSS、合并javascript、合并图片（webPack等包管理工具）

③ 图片格式，大小选择，图片优化

2、 应用浏览器缓存：

① http缓存（文件级缓存）

② 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放在页面最下面

---

如有帮助到您,我将倍感荣幸