欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端性能优化总结

程序员文章站 2022-06-17 22:37:58
一、为什么要优化?1、在实际当中,只有 10%~20% 的最终用bai户响应时间是花在从du Web 服务器获取 HTML 文档zhi并传送到浏览器中的。如dao果希望能够有效地减少页面的响应时间,就必须关注剩下的 80%~90% 的最终用户体验。这 80%~90%的时间大部分花在等待组件(图片、样式表、脚本 等)的下载,还有一小部分时间花在解析 HTML、脚本和样式表上面。2、如果我们将后端的响应时间缩短一半,整体响应时间只能减少 5%~10%;而如果关注前端性能,同样是将其响应时间减少一半,则整体响...

一、为什么要优化?

1、在实际当中,只有 10%~20% 的最终用bai户响应时间是花在从du Web 服务器获取 HTML 文档zhi并传送到浏览器中的。如dao果希望能够有效地减少页面的响应时间,就必须关注剩下的 80%~90% 的最终用户体验。这 80%~90%的时间大部分花在等待组件(图片、样式表、脚本 等)的下载,还有一小部分时间花在解析 HTML、脚本和样式表上面。

2、如果我们将后端的响应时间缩短一半,整体响应时间只能减少 5%~10%;而如果关注前端性能,同样是将其响应时间减少一半,则整体响应时间可以减少 40%~45%。改进前端通常只需要较少的时间和资源;而减少后端延迟会带来很大的改动,比如重新设计架构啥的,这些改动需要花数周或数月。

二、优化的目的

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

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

三、代码优化相关
1、在js中尽量减少闭包的使用
  原因:使用闭包后,闭包所在的上下文不会被释放

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

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

4、把css放在body上,把js放在body下面
  让其先加载css(注意:这里关于优化没有多大关系)

5、减少css表达式的使用

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

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

8、在js封装过程中,尽量做到低耦合高内聚。减少页面的冗余代码

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

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

11、使用window.requestAnimationFrame(js的帧动画)代替传统的定时器动画
  如果想使用每隔一段时间执行动画,应该避免使用setInterval,尽量使用setTimeout
  代替setInterval定时器。因为setInterval定时器存在弊端:可能造成两个动画间隔时间
  缩短

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

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

14、在事件绑定中,尽可能使用事件委托,减少循环给DOM元素绑定事件处理函数。

15、在js封装过程中,尽量做到低耦合高内聚。减少页面的冗余代码

16、减少Flash的使用

四、存储

1、结合后端,利用浏览器的缓存技术,做一些缓存(让后端返回304,告诉浏览器去本地拉取数据)。(注意:也有弊端)可以让一些不太会改变的静态资源做缓存。比如:一些图片,js,cs

2、利用h5的新特性(localStorage、sessionStorage)做一些简单数据的存储,
  避免向后台请求数据或者说在离线状态下做一些数据展示。

五、其他优化

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

2、页面中的是数据获取采用异步编程和延迟分批加载,使用异步加载是数据主要是为了避免浏览器失去响应。如果你使用同步,加载数据很大并且很慢
  那么,页面会在一段时间内处于阻塞状态。目的:为了解决请求数据不耽搁渲染,提高页面的
  渲染效率。解决方法:需要动态绑定的是数据区域先隐藏,等数据返回并且绑定后在让其显示
  延迟分批加载类似图片懒加载。减少第一次页面加载时候的http请求次数

3、页面中出现音视频标签,我们不让页面加载的时候去加载这些资源(否则第一次加载会很慢)
  解决方法:只需要将音视频的preload=none即可。
  目的:为了等待页面加载完成时,并且音视频要播放的时候去加兹安音视频资源

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

六、页面级别优化

1、http请求数

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

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

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

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

④、 CSS Sprites,通过合并 CSS图片,这是减少请求数的一个好办法

2、内联脚本的位置

浏览器是并发请求的,而外链脚本在加载时却常常阻塞其他资源,例如在脚本加载完成之前,它后面的图片、样式以及其他脚本都处于阻塞状态,直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置,则会影响整个页面的加载速度从而影响用户体验。所以说尽可能的将脚本往后挪,减少对并发下载的影响

3、代码级别的优化

①、DOM操作优化:

要避免在document上直接进行频繁的DOM操作,可以使用classname代替大量的内联样式修改,对于复杂的UI元素,设置position为absolute或fixed,尽量使用css动画,适当使用canvas尽量减少css表达式的使用,使用事件代理

②、图片优化

通过对图片的压缩来起到优化前端性能的作用

③、CSS选择符:

大多数人认为,浏览器对CSS的解析是从左往右的,事实上从右往左解析的效率更高,因为第一个id选择基本上就把查找的范围限定了。

本文地址:https://blog.csdn.net/Peng_Yu_Yan_/article/details/107355624

相关标签: javascript