前端性能优化之n种方法

骑猪看日落 2022-04-03 03:48 155阅读 0赞

> **小编推荐：**[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

前端性能优化有很多种，我们在实际工作中或许也就用到那么几种。但是，在面试的时候，知道的不知道的，要说很多种，下面是我在工作学习中遇到的，不全，希望大家补充。

### 1、减少HTTP请求。 ###

尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。

### 2、把CSS放到顶部 ###

因为网页上的资源加载时从上网下顺序加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。

### 3、把JS放到底部 ###

js加载时同步加载，会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载。

### 4、将CSS和JS放到外部文件中 ###

目的是缓存文件。 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

### 5、精简CSS和JS ###

这里就涉及到css和js的压缩了。比如一个css文件，把文件内的空格回车全部去掉，减少文件的大小。grunt，glup都可以压缩css、js文件。  
gulp的使用方法在我的专栏-[gulp学习笔记][gulp]，图文并茂，有需要的可以移步。

### 6、删除重复的JS和CSS ###

重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

### 7、css选择符优化 ###

因为css是从右向左解析的，根据这个规则，尽量使右边的样式唯一

### 8、避免空的src和href ###

当link标签的href属性和script标签的src属性为空时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。

### 9、将CSS和JS放到外部文件中 ###

这样做的目的是缓存文件 但有时候为了减少请求，也会直接写到页面里，需根据PV和IP的比例权衡。

### 10、缩小favicon.ico并缓存 ###

### 11、避免使用CSS表达式 ###

举个css表达式的例子

font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");

这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

### 12、缓存AJAX请求 ###

异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存  
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存

$.ajax({
      url : 'url',
      dataType : "json",
      cache: true,
      success : function(son, status){},
      error : function(){}
    })

### 13、使用GET来完成AJAX请求 ###

在安全性能要求允许的情况下，使用GET来完成AJAX请求。当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

### 15、减少DOM操作 ###

因为每次操作DOM，都会带来repaint和refolw

### 16、减少Cookie的大小 ###

Cookie里面别塞那么多东西，因为每个请求都得带着他跑。

### 17、使用CDN ###

网站上静态资源即css、js全都使用cdn分发，图片也一样。

链接：https://www.jianshu.com/p/340951fd83bf

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[gulp]: https://www.jianshu.com/c/21b4929e4df6
[2018121912254161]: /images/20220403/e558bfbf30a84654899b2ba8d1a0444f.png