懒加载与预加载

懒加载与预加载

懒加载(基本对于图片)

  • 减少无效资源的加载
  • 并发加载的资源过多会阻塞js的加载影响网站的正常使用
  • 图片进入可是区域之后请求图片资源
  • 电商等图片很多的情况,页面很长的业务场景适用

预加载

  • 图片等静态资源在使用之前的提前请求
  • 资源使用时从缓存中加载,提升用户体验
  • 页面展示的依赖关系维护

预加载方式

  • 用img src属性并把这个标签标记为display:none;
  • let img = new Image(); img.src=’XXX’
  • 使用ajax请求

图片常用的业务场景

  • jpg有损压缩,压缩率高,不支持透明
  • png支持透明,浏览器兼容好
  • svg矢量图,代码内嵌,相对较小,图片样式相对简单的场景

 上一篇
css与js的装载与执行 css与js的装载与执行
css与js的装载与执行 顺序执行、并发加载 词法分析 => 从上到下依次解析 并发加载 => 并发加载有上限(某个域名下并发数量是有限制的,应该控制每个域名下加载的资源数量) 是否阻塞 css阻塞 css he
2018-05-14
下一篇 
重绘与回流 重绘与回流
重绘与回流重绘(redraw) 元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。 浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。 重绘不会带来重新布局,并不一定伴随重排。 减少重绘
2018-05-13
  目录