性能优化

性能优化：

1. 网络

   - DNS解析（域名解析服务器）
   - CND（网络节点）
   - 延迟加载
   - 预加载
   

2. 代码优化

   - HTML(布局)

   - CSS

   - 选择器、（减少复合选择器）
   - Sprites技术、(图片切割，将多张图片合并在一起，减少请求数量来达到优化功能)
   - 合并、（将文件合并后，导入次数会减少）
   - 压缩、（代码压缩后，文件变小，消耗的流量也会减少）
   - 重绘和回流、（重绘--呈现效果，回流--重新布局；有回流一定会重绘，但重绘不一定有回流；尽量减少回流次数）
   - 简单动画可使用ccs3代替JS
   - 图标字体、
   

   - JS

   - 节点缓存（减少DOM操作)、
   - 合并、
   - 压缩
   

   - image

   - 压缩、
   - 合并、
   - 转化为base64（字符串）
   

3. 浏览器

   - 静态资源缓存

       -  CSS、
       -  JS、
       -  image、
       -  HTML
   

   - AJAX缓存

   - 本地数据库

   - 离线缓存

PS：

根据服务器端的响应header，一个文件对浏览器而言，有几级不同的缓存状态。

   1、服务器端告诉浏览器不要缓存此文件，每次都到服务器上更新文件。

   2、服务器端没有给浏览器任何指示。

   3、在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。

   4、服务器强制要求浏览器缓存文件，并设置了过期时间。在缓存未到期之前，浏览器将直接使用本地缓存文件，不会与服务器端产生任何通信。

       我们要做的是尽量强制浏览器到第四种状态，特别是对于JS、CSS、图片等变动较少的文件。