前端性能优化的方法

最新推荐文章于 2024-05-16 10:01:02 发布

ZHANG.......

最新推荐文章于 2024-05-16 10:01:02 发布

阅读量404

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zyf971020/article/details/127088370

版权

#减少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(Sever 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就是内容分发网络，它是一组分布在多个不同地理位置的Web服务器。当服务器距离用户越远时，延迟越高。CDN就是为了解决这一问题，在多个未知部署服务器，让用户离服务器更近，从而缩短请求时间。

CDN原理

当用户访问一个网站时，如果没有CDN，过程是这样的：
1、浏览器要将域名解析为IP地址，所以需要向本地DNS发出请求。

2、本地DNS依次向根服务器、顶级域名服务器、权限服务器发出请求，得到网站服务器的IP地址。

3、本地DNS将IP地址发回给浏览器，浏览器向网站服务器IP地址发出请求并得到资源。

如果用户访问的网站部署了CDN，过程是这样的：

1、浏览器要将域名解析为IP地址，所以需要向本地DNS发出请求。

2、本地DNS依次向根服务器、顶级域名服务器、权限服务器发出请求，得到全局负载均衡系统(GSLB)的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设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。

#图片优化

1、图片延迟加载

在页面中先不给图片设置路径，只有当图片出现在浏览器得可视区域时，才去加载真正得图片，这就是延迟加载。对于图片很多得网站来讲，一次性加载全部图片，会对用户体验造成=很大得影响，所以需要使用图片延迟加载。

2、降低图片质量

图片100%的质量和90%的质量通常看不出来区别，尤其是用来当背景图的时候。我们可以在用ps切背景图时，将图片切成JPG格式，并且将它压缩到60%的质量，这样基本看不出来区别。

3、尽可能利用css效果代替图片

有很多图片使用css效果（渐变、阴影等）就能画出来，这种情况选择css效果更好。因为代码大小通常是图片大小的几分之一甚至几十分之一。

4、使用雪碧图