前端优化学习

简单花了一些时间看了几篇前端优化的文章，文章作者写的都很详细。从中学到了不少东西。在这里就不班门弄斧的多讲了。只是在几篇文章的基础上一个小小的总结。

一些性能优化资料

• 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 的大小影响传输速度。

最后

其实，个人感觉：前端的优化理论上知道是一回事儿。真正要把优化玩好，还是需要在实际工作中不断去试错、实践、和解决问题，才能更快更好的去完成一个好的产品。
本文记录下前端优化的一些知识点，便于之后工作中使用吧~