关于前端图片加载优化方式方法

图片加载优化

• 不用图片
• 对于移动端来说,一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
• 小图使用 base64 格式
• 将多个图标文件整合到一张图片中（雪碧图）
• 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。缺点就是兼容性并不好
• 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
• 照片使用 JPEG

防抖和节流

• 利用Lodash

防抖

考虑一个场景，有一个按钮点击会触发网络请求，但是我们并不希望每次点击都发起网络请求，而是当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖。

• _.debounce防抖函数
• 参数
  func (Function): 要防抖动的函数。
  [wait=0] (number): 需要延迟的毫秒数。
  [options={}] (Object): 选项对象。
  [options.leading=false] (boolean): 指定在延迟开始前调用。
  [options.maxWait] (number): 设置 func 允许被延迟的最大值。
  [options.trailing=true] (boolean): 指定在延迟结束后调用。
  返回
  (Function): 返回新的 debounced（防抖动）函数。

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
 
// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
   
  'leading': true,
  'trailing': false
})