1.性能优化从何说起

我们知道，我们平时在使用网站或者移动设备等时，如果你的网站很慢，用户会很不耐烦的去等，可能几秒出不来，用户选择不再等，有时候用户也会觉得，等这么久，流量都跑完了，也有用户几时会等，会给用户意识里留下阴影，不会再使用的网站，对于很多用户，流量并不是免费的，即使免费了，也不愿意等你网站好几秒，这些说法，都是个人的观点，因为我也经常这么想。。。在之前，我还遇到过一个商城首页等待 5s 左右，首页加载流量 200M 的网站
下面，我很简短说常用的性能优化手段

2.性能优化如何思考

• 1.首先在我们项目的设计过程中，我们可以首先思考我们使用的技术以及方案的一些优势以及弊端，预想项目使用技术可带来的后果或者优势，再比如项目环境等因素
• 2.制定计划，比如使用技术是否可以优化，如果做 ssr 方面，是否可以服务端渲染，以保证返回浏览器渲染时间更短，比如我的博客里使用到了 marked，是否可以使用 marked 插件，进行服务端渲染，而不是浏览器去做执行等等之类
• 3.细分计划，指定现实的目标，比如 HTTP 使用的版本，是否存在并发堵塞之类的问题，如果不存在，是否可以拆分成更小的包，是否可以异步加载，考虑响应速度，交互时间。
• 4.构建优化，在使用 webpack 等打包工具，要明确相对项目的使用技术以及环境，比如 tree-shaking、code-splitting、scope hoisting 等等。再比如静态资源的优化，一些 loader，比如 uglify、cache 等。再比如打包速度这方面，是否因为打包速度漫长，长期依旧的占用开发时间，解决方式比如 happypack、webpack-parallel-uglify-plugin、cache-loader、webpack-parallel-uglify-plugin 等。
• 5.渲染优化，我们可以从浏览器渲染过程着手，比如页面的及爱在性能，FP（首次绘制）–》FCP（首次有内容的绘制）–》FMP（首次有意义的绘制）–》TTI（可交互时间）这方面进行考虑，比如骨架屏、css 加速等等问题，下面细说
• 6.其他优化，比如 nodejs 优化、用户操作优化等等

3.性能优化如何入手

假设我们已经知道浏览器行为与 HTTP 协议发生的事物，如果不知道，可以看下面的 HTTP 相关文章。

HTTP 相关优化

这方面优化主要包括 HTTP 协议、HTTP 缓存、CDN 等

• 1.HTTP 协议相关优化
  · 我们在前面知道了 HTTP 协议版本的区别，在这里，HTTP 优化我们可以采用 HTTP2 来实施，比如利用 nginx 以及 http2 的模块，建立在 https 的基础上代理配置
  · 如果我们以上条件不具备，还可以使用 node 等方式进行流返回，这也不失为一个很好的方案，如果流返回，我们可以在 Header 里看到 connection 会有明确说明，value 就是 chunked
  · 再比如可以使用 gzip 等方式，进行 HTTP 压缩，继续思考是否所有请求都要被 gzip 等问题
  · 再思考 HTTP 传输过程中，TCP 断开必要因素等
• 2.HTTP 缓存相关优化
  · 比如强缓及协商缓存以及浏览器自带的缓存
• 3.CDN 相关优化
  · CDN 可以不会带 cookie 等信息，可以就近的选择服务器返回给用户，可以减少服务器的压力等

除上面的 HTTP 方面，还有我们浏览器的相关优化
上面也简单提到一些，接下来解决一些名词的解释

• css 加速：比如 css3D、video、webGl、filter、transform、animate 等
• gpu.js:比较耗费显卡，需要在特定的用户环境建议使用，就是历史 GPU 来执行 js
• 骨架屏：骨架屏的 dom 结构和 css 通过离线生成后构建的时候注入模板中的节点，可以更快的让用户看到，给用户心理准备，而不是白屏呈现给用户
• 浏览器缓存相关使用方案：localStorage、sessionStorage、indexDB、webSql。其中，indexDB、webSql 是异步的，而且慢，可以放一些不需要立即加载的三方文件。对于此方案，也有一些做的好的库，比如 localforage.js、basket.js
• 雅虎军规：建议自己去 google 一下，都是我们开发中常用的一些规范，积水成河。微小的优化对于保持性能也是十分重要的。
• PWA：PWA 方案里的 server worker 也可作为缓存优化

结语

以上是我对性能优化简单的想法，没有细说，也没有说的很广，后面会继续更新，一起学习交流，学海无涯。。。