前端性能优化方法汇总

目录

 

一、为什么要优化前端的性能

二、页面级别优化

三、代码级别的优化

(一)、DOM操作优化:

(二)、css和js

(三)、图片优化

四、前端与后端


一、为什么要优化前端的性能

优化的目的在于让页面加载的更快,对用户操作响应更及时,为用户带来更好的用户体验,对于开发者来说优化能够减少页面请求数,能够节省资源。

前端优化的方法有很多种,可以将其分为两大类,第一类是页面级别的优化如http请求数,内联脚本的位置优化等,第二类为代码级别的优化,例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

二、页面级别优化

http请求数

减少http请求数是最重要也是最有效的方法,可以通过以下方法来减少http请求

(1)合理的设置http缓存,恰当的缓存设置可以大大减少http请求。要尽可能地让资源能够在缓存中待得更久

(2)从设计实现层面简化页面,保持页面简洁、减少资源的使用时是最直接的。

(3)资源合并与压缩,尽可能的将外部的脚本、样式进行合并,多个合为一个。

  (4) CSS Sprites,通过合并 CSS图片,这是减少请求数的一个好办法。

三、代码级别的优化

(一)、DOM操作优化:

1.要避免在document上直接进行频繁的DOM操作

可以使用classname代替大量的内联样式修改,对于复杂的UI元素,设置position为absolute或fixed,尽量使用css动画,适当使用canvas尽量减少css表达式的使用,使用事件代理。

2、减少对DOM操作,主要是减少DOM的重绘与回流(重排)
关于重排(回流)的分离读写:如果需要设置多个样式,把设置样式全放在一起设置,不要一条一条的设置。使用文档碎片或者字符串拼接做数据绑定(DOM的动态创建)。

(二)、css和js

1、在js中尽量减少闭包的使用。原因:使用闭包后,闭包所在的上下文不会被释放。

2、在js封装过程中,尽量做到减少页面的冗余代码,代码应简洁整齐。

3、在js中避免嵌套循环和”死循环”(一旦遇到死循环,浏览器就会直接卡掉)。

4、把css放在body上,把js放在body下面,让其先加载css。

5、减少css表达式的使用,可以将多个css样式封装在一个css文件中,减少不必要的代码。

6、css选择器解析规则所示从右往左解析的。减少元素标签作为对后一个选择对象。

7、尽量将一个动画元素单独设置为一个图层(避免重绘或者回流的大小)注意:图层不要过多设置,否则不但效果没有达到反而更差了。

8、基于script标签下载js文件时,可以使用defer或者async来异步加载。

9、css中设置定位后,最好使用z-index改变盒子的层级,让盒子不在相同的平面上

10、css导入的时候尽量减少@import导入式,因为@import是同步操作,只有把对应的样式导入后,才会继续向下加兹安,而link是异步的操作

11.尽量和并和压缩css和js文件。(将css文件和并为一个。将js合并为一个)

12.能用css做的效果,不要用js做,能用原生js做的,不要轻易去使用第三方插件。避免引入第三方大量的库。而自己却只是用里面的一个小功能。

13、尽量减少使用递归。避免死递归。解决:建议使用尾递归。

(三)、图片优化

1.通过对图片的压缩来起到优化前端性能的作用,尽量所使用的字体图标或者SVG图标来代替传统png图
因为字体图标或者SVG是矢量图,代码编写出来的,方大不会变形,而且渲染速度快。

2、采用图片的懒加载(延迟加载)目的为了,减少页面第一次加载过程中http的请求次数
具体步骤:
       1、页面开始加载时不去发送http请求,而是放置一张占位图
       2、当页面加载完时,并且图片在可视区域再去请求加载图片信息

四、前端与后端

1、减少对cookie的使用(最主要的就是减少本地cookie存储内容的大小),因为客户端操作cookie的时候,这些信息总是在客户端和服务端传递。如果上设置不当,每次发送一个请求将会携带cookie。

2、前端与后端进行数据交互时,对于多项数据尽可能基于json格式来进行传送。相对于使用xml来说传输有这个优势
目的:是数据处理方便,资源偏小

3、前端与后端协商,合理使用keep-alive

4、前端与服务器协商,使用响应资源的压缩

5、避免使用iframe
  不仅不好管控样式,而且相当于在本页面又嵌套其他页面,消耗性能会更大。因为还回去加载这个嵌套页面的资源

6、在基于ajax的get请求进行数据交互的时候,根据需求可以让其产生缓存(注意:这个缓存不是我们常看到的304状态码,去浏览器本地取数据),这样在下一次从相同地址获取是数据时,取得就是上一次缓存的数据。(注意:很少使用,一般都会清空。根据需求来做)

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » 前端性能优化方法汇总

提供最优质的资源集合

立即查看 了解详情