一个网站的的性能好坏，直接影响到了用户的留存率。其中首屏渲染尤为重要，优化的方法也很多，涉及到的面也特别广，冷不丁一问可能都想不出太多，所以是时候总结一下了。
首先，在浏览器中输入地址后，直到用户看见页面中的内容，我将这个过程分为了两大类：通信阶段和执行阶段。
通信阶段
这个阶段也比较好理解，字面意思上就可以看出，这是客户端在和服务端进行网络通信，请求资源，对首屏渲染优化有很大的帮助。这其中又分为了以下这几个方面。
CDN
先举个常见的例子，你在北京网购，卖家从北京发货肯定是比从海南发货快的。网络也是一个道理，CDN 会帮我们从最近的节点获取资源，不光这样，还帮我们做了全局的负载均衡和缓存。
请求次数
- 资源合并：多个小的文件可以合并成一个文件，减少请求次数，例如雪碧图等
- 域名分片：过去 W3C 规范里规定，一个域名下不能同时请求超过2个，但各大浏览器厂商实现的不尽相同，例如 chrome 的限制数量就为6。不过最新的 W3C 规范应该是不作限制了，只不过厂商们没有做相应的修改。（这段内容是凭借印象写的，具体的规范和数值可能不会那么准确）
压缩
- 服务器压缩：服务器使用浏览器支持放方式是压缩资源，gzip 等
- 代码压缩：删除掉代码中注释、空格，以及压缩变量名等
- 静态资源：字体图标，svg 之类的去掉元数据，图片使用 webp 格式等
- http 中减少不必要的头
- 减少 cookie 数据量
http2
- 头部压缩
- 二进制帧
- 链路复用
浏览器缓存
- 强缓存
- 协商缓存
http2 和浏览器缓存这两部分只列了个大概方面，具体怎么做到的优化，自行搜索，应该会比我说的详细。
执行阶段
这个阶段就考验我们如何写出性能更好的代码了，我在网上找到了下边这几点：
- HTML 语意化标签加强 DOM 解析
- 多使用伪元素，减少 JS 多 DOM 的查找遍历
- 能用 HTML/CSS 实现的效果就不要用 JS
- 逻辑与展示解耦，避免不必要的 JS 引擎启动
- 减少作用域查找和闭包，避免
==，使用块级作用域
除了上述这些基础之外，就是现在流行的单页面应用（SPA）问题了。
客户端渲染 CSR
一提到 CSR，可能首先想到的就是 React、Vue 这些框架了，它们通过对应的 router 库，帮我们提供了 SPA 功能，使得页面与页面间得跳转变得更加流畅。但随之而来的问题就是，从服务器拿到的 HTML 文件是空的，没有任何内容，这些都需要通过 JS 动态生成，这就导致了白屏时间长，而且对 SEO 也非常不友好。所以为了解决这两个问题，有了 SSR 方案。
服务端渲染 SSR
SSR 说白了就是当你去请求一个地址时，服务器返回给我们的不再是一个空白的 HTML 了，他有内容了，这样首屏就快了，SEO 也有了，而且还提供了 SPA 功能。其实就是需要我们提供了一个 Node 服务，每次都会帮我们去获取数据，然后拼接成 HTML 返回给浏览器。React 和 Vue 分别都提供了相应的解决方案，社区内也比较流行的库，比如说 Next.js 和 Nuxt.js。优点说了，接下来是缺点了，代码编写复杂（我觉得都不算缺点），对服务器压力大。怎么解决呢，别问，问就是缓存，再一个就是使用 pm2 做负载均衡，终极就是 SSG 了。
静态网站渲染 SSG
和 SSR 差不多，不过 SSG 会在服务器提前生成 HTML，这样每次请求都可以直接拿到 HTML。React 和 Vue 社区分别推出了 gatsby 和 gridsome ，但我觉得可能更适合博客和文档之类的静态网站，对于公司做的商业网站可能不太适合。像我了解到的 Next.js 新加入的 getStaticProps() 和 getStaticPaths() 这两个方法也是可以做到缓存效果的，只不过还没有实际用到生产中，等实践过再做一些笔记分享出来。
最后
目前想到的就这么多，整理出来，方便以后查看，如果有新的方法，在做更新。
