简单花了一些时间看了几篇前端优化的文章，文章作者写的都很详细。从中学到了不少东西。在这里就不班门弄斧的多讲了。只是在几篇文章的基础上一个小小的总结。
一些性能优化资料
- Best Practices for Speeding Up Your Web Site
- 前端性能优化相关
- 2017前端性能优化清单
- 前端性能优化指南
- 动物书：《高性能JavaScript》、《高性能网站建设进阶指南》、《高性能网站建设指南》
优化方法总结
参照着这些资料，总结一下一些优化的知识点。
- 减少 DOM 和 JavaScript 的交互。避免重复读写，而要先遍历读再遍历写。
- 使用 requireAnimationFrame 方法避免丢帧。
- 使用 debounce 和 throttle 进行节流和消抖，用于向滚动、重复触发的这类场景
- CSS放头部，JavaScript 放底部。CSS需要在DOM显示前加载完，否则界面会没有样式一段时间。JavaScript 中可能有操作 DOM 行为，应该在 DOM 加载完后执行。
- JavaScript 不慢，DOM 很慢。所以避免 DOM 大量渲染。
- PS：我之前做一个表单，三十几页内容，为了方便就将所有页面加载到 DOM 中，然后显示当前页隐藏其他页，卡的飞起。期初还以为是 JavaScript 逻辑计算卡住了呢。
- 代码分包，优先加载核心业务。
- JS 脚本合并
- GPU硬件加速用于图层。
- 图片优化压缩，图片 lazyload 延时获取
- 利用 defer、async 属性异步加载脚本
- 合理使用缓存，将一些静态的东西使用缓存存本地，减少 HTTP 交互。
- 优化 HTTP 接口减少 HTTP 传输次数
- 优化结果的一些方面
- 首屏加载
- 帧数每秒60帧
- 反应时间100毫秒
- 理解DOM绘制和布局
- 使用 JSON 交换数据
- 高效使用 HTML 标签和 CSS 样式，好的写法能够减少性能的消耗。
- CSS 和 JavaScript 的压缩合并。
- 图片优化：压缩图片、Base64图片、Sprite雪碧图
- 服务器渲染 SSR，在服务器端将页面加载完成传给客户端，可以减少首次加载的逻辑处理，加快首屏加载时间。
- 这是由一定代价的，需要消耗更多的服务器资源，如果是大项目，可能需要加很多服务器来满足SSR。
- 减少 cookie 大小，因为 cookie 会在每一次 HTTP 请求时被传输， cookie 的大小影响传输速度。
最后
其实，个人感觉：前端的优化理论上知道是一回事儿。真正要把优化玩好，还是需要在实际工作中不断去试错、实践、和解决问题，才能更快更好的去完成一个好的产品。
本文记录下前端优化的一些知识点，便于之后工作中使用吧~
