前端性能优化的方法有哪些？
加载时优化
- 较少HTTP请求
一个完整的HTTP请求需要经历
|- DNS查找，
|- TCP握手，
|- 浏览器发出HTTP请求，
|- 服务器接收请求，
|- 服务器处理请求并发回响应，
|- 浏览器接收响应等等一系列复杂的过程。
当你请求较多时，直接体现在了消耗性能上面，这就是为什么要将多个小文件合并为一个大文件，从而减少HTTP请求次数的原因。
- 使用服务器端渲染
我们知道，当客户端渲染时，他是获取HTML文件，根据需要下载JavaScript文件，运行文件，生成DOM，再渲染。这个在无形之中会拖慢我们的性能。
那么服务器端渲染又是怎么一回事呢？他就是，服务端返回HTML文件，客户端只需解析HTML即可。
问题：SPA、SSR的区别是什么?
我们现在编写的VUE、React和Angular应用大多数情况下都会在一个页面上，点击链接跳转页面通常是内容切换而非页面跳转，由于良好的用户体验逐渐成为主流的开发模式，但同时也会有首屏加载时间长，SEO不友好的问题，因此有了SSR,这也是为什么面试中会问道两者的区别
1、SPA(Single Page Application)即单页面应用，一般也称为客户端渲染(Client Side Render),简称CSR。SSR(Server Side Render)即服务端渲染。一般也称为多页面应用（Mulpile Page Application）简称MPA。
2、SPA应用只会首次请求html文件，后续只需要请求JSON数据即可，因此用户体验更好，节约流量，服务端压力也较小。但是首屏加载会变长，而且SEO不友好。为了解决以上缺点。就有了SSR方案，由于HTML内容在服务器一次性生成出来，首屏加载快，搜索引擎也可以很方便的抓取页面信息。但同时SSR方案也会有性能，开发受限等问题。
3、在选择上，如果我们的应用存在首屏加载优化需求，SEO需求时，就可以考虑SSR.
4、但并不是只有这一种替代方案，比如对一些不常变化的静态网站，SSR反而浪费资源。我们可以考虑预渲染方案。另外nuxt.js/next.js中给沃恩提供了SSG（Static Site Generate）静态网站生成方案也是很好的静态站点解决方案，结合一些CI手段，可以起到很好的优化效果。
- 静态资源使用CDN
什么是CDN，CDN就是，内容分发网络，它是一组分布在多个不同地理位置的Web服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
CDN原理
当用户访问一个网站时，如果没有CDN，过程是这样的：
1、浏览器要将域名解析为IP地址，所以需要向本地DNS发出请求。
2、本地DNS依次向根服务器、顶级域名服务器、权限服务器发出请求，得到网站服务器的IP地址。
3、本地DNS将IP地址发回给浏览器，浏览器向网站服务器IP地址发出请求并得到资源。
如果用户访问的网站部署了CDN，过程是这样的：
1、浏览器要将域名解析为IP地址，所以需要向本地DNS发出请求
2、本地DNS依次向根服务器、顶级域名服务器、权限服务器发出请求，得到全局负载均衡系统(GSIB)的IP地址。
3、本地DNS再向GSLB发出请求，GSLB的主要功能是根据本地DNS的IP地址判断用户的位置，筛选出距离用户较近的本地负载均衡系统（SLB），并将该SLB的IP地址作为结果返回给本地DNS
4、本地DNS将SLB的IP地址发回给浏览器，浏览器向SLB发出请求
5、SLB根据浏览器请求的资源和地址，选出最优的缓存服务器发回给浏览器。
6、浏览器再根据SLB发回的地址重定向到缓存服务器。
7、如果缓存服务器有浏览器需要的资源，就将资源发回给浏览器。如果没有，就向源服务器请求资源，再发给浏览器并缓存到本地。
- CSS写头部，javascript写底部
所有放在head标签里的CSS和JS文件都会堵塞渲染。如果这些CSS和JS需要加载和解析很久的话，那么页面就空白了。所以JS文件要放在底部，等HTML解析完了再加载JS文件。那为什么CSS文件还要放在头部呢？因为先加载HTML再加载CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将CSS文件放在头部了。另外，JS文件也不是不可以放在头部，只要给script标签加上defer属性就可以了，异步下载，延迟执行。
- 字体图标代替图片图标
字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如fontsize、color等等，非常方便
。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。
- 利用缓存不重复加载相同资源
为了避免用户每次访问网站都得请求文件，我们可以通过添加Expires来控制这一行为。Expires设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。
- 图片优化
这里分为几个小点，
首先是：图片延迟加载；就是在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用图片延迟加载。
第二个就是：降低图片质量；图片100%的质量和90%的质量通常看不出来区别，尤其是用来当背景图的时候。我们可以在用PS切背景图时，将图片切成JPG格式，并且将它压缩到60%的质量，这样基本看不出来区别。
第三个就是：尽可能利用CSS3效果代替图片；有很多图片使用CSS效果（渐变、阴影等）就能画出来，这种情况选择CSS3效果更好。因为代码大小通常是图片大小的几分之一甚至几十分之一。最后一个就是，使用雪碧图。
- 通过webpack按需加载代码
懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。
- app或者小程序使用分包技术
分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。
