前言：
前端优化的书籍推荐《高性能网站建设指南》
文章末尾附上14个性能黄金法则
1.前端性能优化主要从以下几个方面入手：
知己知彼：可以借助chorm中的F12查看瀑布流中的waterfall
1. 减少http请求
2.减少DOM操作
3.页面SEO优化
4.利用缓存
5.压缩和减少代码体积
6.CDN
总结：大多可借助第三方插件实现。也可以从代码层面、插件层面、打包层面来分析
2.减少http请求中方面
2.1 如：图片地图、CSS Sprites、内联图片和脚本、样式表合并
2.2 防抖和节流
2.3 预加载和懒加载
工具：CSS Sprite Generator，可以合并图片，还可以生成图片的CSS样式。
3.减少DOM操作
原因：操作dom会影响性能（重绘和回流），所以我们尽量减少dom操作，多使用innerHTML
补充：数据冻结：Object.freeze(obj)
冻结一个对象或者一个数组,冻结的是对象本身 冻结后的对象或者数组不能被修改 不能添加新的属性 不能删除已有属性 不能修改已有属性的值 返回值是被冻结的对象本身，与被冻结的源对象完全一致，也被冻结 方法冻结的是对象或数组，如果其 属性 的 属性值 是数组（子）或者对象（子）， 可以修改数组（子）或对象（子）的属性值
4.页面SEO优化
- 页面中杜绝出现死链接（404页面），而且对于用户输入一个错误页面，我们要引导到404提示页面中（服务器处理的）。
- 避免浏览器中异常错误抛出。尽量避免代码出错使用try catch做异常信息捕获
- 增加页面关键词优化
5.利用缓存
使用强缓存和协商缓存，ajax缓存
6.压缩和减少代码体积
压缩：可借助打包工具webpack、hbuildX
减少：如使用vant、elementUI等第三方库时，按需加载，不要全部引入
7.使用CDN
CDN: 内容分发网络
作用和特点：
1.就近获取所需内容，降低网络用时，提高用户访问响应速度和命中率。利用了索引、缓存等技术
2.负载均衡
3.分布式存储
总结：最好将静态资源放在上面，动态文件尽量不要放。
8.《高性能网站建设指南》14个性能黄金法则
1 减少http请求
2 添加expries头
3 使用内容分发网络
4 减少DNS的操作
5 样式表放在页面head部分
6 js放在页面的后面
7 使用压缩技术
8 使用，解除Etag
9 避免css表达式
10 使用外部JavaScript和css
11 避免重定向
12 精简JavaScript
13 移除重复脚本
14 ajax（可以使用前面的部分原则来优化ajax这种特殊的方式）
