前端的性能优化都有哪些

前端的性能优化都有哪些

• 减少HTTP请求次数
  减少CSS、JS文件的。例如加载一个http页面，如果有多个css文件js文件，那么需要发出多次http请求，这样会让用户第一次页面时需要很长时间等待。但是css文件或js文件只有一个的话，就只需要发一次http请求，大大节省网络请求时间，加快页面的渲染
• 使用CDN
  网站上静态资源即css、js全都使用cdn分发，图片亦然
• 避免空的src和href
• 将js放在底部，css放在顶部
  进入页面的资源加载顺序是从上往下加载的，所以css放在页面的顶部能够优先渲染页面，让用户感觉页面加载很快。
  加载js时会对后续的资源造成阻塞，必须得等js加载完才去加载后续的文件 ，所以就把js放在页面底部最后加载
• 精简CSS和JS
  这里就涉及到css和js的压缩了。比如下面的新浪的一个css文件，把空格回车全部去掉，减少文件的大小。现在的压缩工具有很多，基本主流的前端构建工具都能进行css和js文件的压缩，如grunt，glup等
• 避免重复的JS和CSS
  对于需要多次使用的样式可以提前封装好，直接引入，如果重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间
• 可缓存的AJAX
  异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容
• 使用GET来完成AJAX请求
  当使用ajax时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义，而且get更快
• 减少DOM元素数量
  减少DOM数量，就会减少浏览器的解析负担
• 减少Cookie的大小
  Cookie里不要存多余的数据，因为每发一个请求都需要调用一次它
• 不要在HTML中缩放图片
  如果你需要图片是一个头像的大小尺寸
  那就不要用一张可以作为背景图的图片，影响加载