「面试题」1、首屏渲染时间如何分析、如何优化？

一个网页从首次进入到内容出现间会有一段不小的白屏时间。该网站是用前端框架开发的CSR（Client Side Rendering，客户端渲染）应用，请以如下顺序回答：

1. 如何分析首屏加载CSR的性能？
2. 分析后如何找出CSR性能瓶颈？
3. 如何解决CSR性能瓶颈？

一、如何分析首屏加载CSR的性能？
有三种方式进行分析：

1. network（浏览器->DevTools）

2. performance （浏览器->DevTools）

3. lighthouse（浏览器->DevTools）

4. sentry（第三方平台）

5. webPageTest 更全面，更详细，更强大的页面分析

   具体怎么操作我就不赘述了，各位自行去看。

二、分析后如何找出CSR性能瓶颈？
按照上面的5种方式来看吧

三、如何解决CSR性能瓶颈？
从CSR方向来讲的话，基本就两个方向：网络层面和渲染层面 还可以使用SSR来解决，SSR对SEO比较友好，但SSR成本高，占用服务器资源比较多。

1. 网络层面：

   从网络方面来讲，就是减少HTTP请求的次数，以及减小请求体积，这里就简单聊几点

   a). 将多次请求合并到一次请求（ajax、精灵图，文件合并等）

   b). 页面懒加载应该也可以算在这个方面。

   c). 缓存住一些不经常改动的文件或内容将请求拦截（service worker）

   b). 文件内容压缩

   e). 静态资源CDN也是方式之一

   f). 升级到 http2

2. 渲染层面

   a). 骨架屏，起码能让用户有打开了网页的感觉

   b). 图片懒加载

   c). 防抖节流

   d). 代码层面的改善