前端性能优化的方法有哪些？

2022-06-18 15:03:40 阅读：154 来源： 互联网

加载时优化

- 较少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或者小程序使用分包技术

分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。

标签：浏览器,请求,哪些,前端,DNS,IP地址,服务器,优化,加载
来源： https://www.cnblogs.com/zhanghaoqing/p/16388343.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9