前端性能优化

• 减少 HTTP 请求：合并⽂件、使⽤ CSS 精灵、减⼩图⽚⼤⼩等。
• 压缩⽂件：使⽤压缩⼯具压缩 HTML、CSS、JavaScript、图⽚等⽂件⼤⼩。
• 浏览器缓存优化：IndexDB、cookie、localStorage、sessionstorage。
• 懒加载：图⽚或者资源在真正需要的时候再加载，可以有效减少⻚⾯加载时间。
• 静态资源 CDN 加速：利⽤ CDN 分发静态资源，减少服务器压⼒，提⾼⽹站的访问速
  度。CDN 回源：回源指浏览器访问CDN集群上静态⽂件时，⽂件缓存过期，直接穿透 CDN 集群⽽访问源站机器的⾏为。
• 减少 DOM 操作：DOM 操作是很耗费性能的，所以要尽量减少 DOM 操作的次数，尽量使⽤批量操作。
• 使⽤ CSS3 动画：使⽤ CSS3 动画⽽不使用 JavaScript 动画，因为 CSS3 动画的性能更
  优。
• 使⽤字体图标：使⽤字体图标可以减少图⽚的请求，提⾼⻚⾯性能。
• 去除不必要的插件：移除不必要的插件可以提⾼⻚⾯加载速度，减少不必要的代码。
• 图⽚优化：对图⽚进⾏压缩和优化，减少图⽚的⼤⼩和请求次数。
• DNS 优化：避免浏览器并发数限制，将 HTML/CSS/JS，jpg/png，api 接⼝等不同资源放在不同域名下，从⽽减少DNS的请求次数；DNS 预解析。
• HTML5 离线化：通过选⽤不同的离线包类型。全局离线包：包含公共的资源，可供多个应⽤共同使⽤。私有离线包：只可以被某个应⽤单独使⽤。