前端优化方案

1、优化首屏加载，减少白屏时间，提升加载性能：

2、加速或减少HTTP请求损耗：使用CDN加载公用库，使用强缓存和协商缓存，使用域名收敛，小图片使用Base64代替，使用Get请求代替Post请求，设置 Access-Control-Max-Age 减少预检请求，页面内跳转其他域名或请求其他域名的资源时使用浏览器prefetch预解析等；

3、延迟加载：非重要的库、非首屏图片延迟加载，SPA的组件懒加载等；

4、减少请求内容的体积：开启服务器Gzip压缩，JS、CSS文件压缩合并，减少cookies大小，SSR直接输出渲染后的HTML等；

5、浏览器渲染原理：优化关键渲染路径，尽可能减少阻塞渲染的JS、CSS；

6、优化用户等待体验：白屏使用加载进度条、loading图、骨架屏代替等；

1. 减少资源大小：通过压缩和优化图片、CSS 和 JavaScript 文件，减少页面的总体积，加快页面加载速度。
2. 延迟加载非关键资源：将不影响首屏内容的资源（如图片、广告等）设置为延迟加载，等待首屏内容加载完毕后再加载这些资源，以提高首屏加载速度。
3. 预加载关键资源：使用预加载技术加载下一个页面可能需要的资源，例如，提前加载下一页的图片，使用户在点击时能够更快地浏览到下一页。
4. 异步加载非关键 JavaScript：将非关键 JavaScript 文件标记为异步加载，使其不会阻塞页面的呈现和交互，提高页面加载效率。
5. 代码优化：对页面的 HTML、CSS 和 JavaScript 代码进行精简、压缩和合并，减少请求次数和文件大小，提高页面加载速度。
6. 使用缓存：合理利用浏览器缓存，对静态资源进行缓存设置，减少重复加载时间。
7. 使用 CDN（内容分发网络）：将网站的静态资源部署到全球各地的 CDN 节点上，使用户可以从离其较近的服务器获取资源，加快资源加载速度。

强缓存和协商缓存

强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间 协商缓存：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存；其中Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识

Access-Control-Max-Age：缓存可以被缓存的时间

SPA 只有一张Web页面的应用,是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序，是指在浏览器中运行的应用，在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”

域名发散 域名发散就是为了突破浏览器对于同一域名并发请求数的限制，使用域名发散为同一个服务申请多个域名，从而可以一定程度上提高并发量；当然，由于建立新的请求需要一定的代价，因此需要在域名发散与域名收敛间进行trade off，通常发散的域名个数为2-4个；

域名收敛 域名收敛就是将静态资源放在一个域名下不进行发散，这主要是为了适应移动端的发展需求；通常DNS是一个开销较大的操作，而移动端由于网络带宽和实时性、资源等的限制，这些开销对移动端的用户体验是致命的，因此需要进行域名收敛；

域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端，提高性能，因为dns解析是是从后向前迭代解析，如果域名过多性能会下降，增加DNS的解析开销。

DNS 预解析：浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。