优化首屏体验——Lazy-Load 初探

Lazy-Load

---

Lazy-Load，翻译过来是“懒加载”。它是针对图片加载时机的优化：在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！

但我们再想，用户真的需要这么多图片吗？不对，用户点开页面的瞬间，呈现给他的只有屏幕的一部分（我们称之为首屏）。只要我们可以在页面打开的时候把首屏的图片资源加载出来，用户就会认为页面是没问题的。至于下面的图片，我们完全可以等用户下拉的瞬间再即时去请求、即时呈现给他。这样一来，性能的压力小了，用户的体验却没有变差——这个延迟加载的过程，就是 Lazy-Load。

最直观的应该是淘宝首页的 HTML Preview 效果：

我们看到，这个还没来得及被图片填充完全的网页，是用大大小小的空 div 元素来占位的。掘金首页也是如此。

一旦我们通过滚动使得这个 div 出现在了可见范围内，那么 div 元素的内容就会发生变化，呈现如下的内容：

style="background-image: url("https://user-gold-cdn.xitu.io/2018/9/27/16619f449ee24252?imageView2/1/w/120/h/120/q/85/format/webp/interlace/1"); background-size: cover;"

可以看出，style 内联样式中的背景图片属性从 none 变成了一个在线图片的 URL。也就是说，出现在可视区域的瞬间，div 元素的内容被即时地修改掉了——它被写入了有效的图片 URL，于是图片才得以呈现。这就是懒加载的实现思路。

 

动手写一个Lazy-Load

  
  
  
  
  



  

    // 注意我们并没有为它引入真实的src
    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  
  

    
  

 

在懒加载的实现中，有两个关键的数值：一个是当前可视区域的高度，另一个是元素距离可视区域顶部的高度。

当前可视区域的高度， 在和现代浏览器及 IE9 以上的浏览器中，可以用 window.innerHeight 属性获取。在低版本 IE 的标准模式中，可以用 document.documentElement.clientHeight 获取，这里我们兼容两种情况：

而元素距离可视区域顶部的高度，我们这里选用 getBoundingClientRect() 方法来获取返回元素的大小及其相对于视口的位置。对此 MDN 给出了非常清晰的解释：

         该方法的返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的 CSS 边框集合 。

         DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right 和 bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

 

具体实现代码如下：

 

其它前端性能优化：

-  图片优化——质量与性能的博弈  https://blog.csdn.net/woleigequshawanyier/article/details/86150763
-  浏览器缓存机制介绍与缓存策略剖析 https://blog.csdn.net/woleigequshawanyier/article/details/86152516
-  webpack 性能调优与 Gzip 原理 https://blog.csdn.net/woleigequshawanyier/article/details/85273790
-  本地存储——从 Cookie 到 Web Storage、IndexDB  https://blog.csdn.net/woleigequshawanyier/article/details/86290178
- CDN 的缓存与回源机制解析 https://blog.csdn.net/woleigequshawanyier/article/details/86369933
- 服务端渲染的探索与实践 https://blog.csdn.net/woleigequshawanyier/article/details/86370471
- 解锁浏览器背后的运行机制 https://blog.csdn.net/woleigequshawanyier/article/details/86371159
- DOM 优化原理与基本实践 https://blog.csdn.net/woleigequshawanyier/article/details/86371425
- Event Loop 与异步更新策略 https://blog.csdn.net/woleigequshawanyier/article/details/86371850
- 回流（Reflow）与重绘（Repaint）https://blog.csdn.net/woleigequshawanyier/article/details/86372288
- Lazy-Load https://blog.csdn.net/woleigequshawanyier/article/details/84930082
- 事件的节流（throttle）与防抖（debounce)  https://blog.csdn.net/woleigequshawanyier/article/details/85345095
- 前端学习资料下载 https://blog.csdn.net/woleigequshawanyier/article/details/85274358
- 技术体系分类 https://blog.csdn.net/woleigequshawanyier

前端技术架构体系（没有链接的后续跟进）：

- 调用堆栈 https://blog.csdn.net/woleigequshawanyier/article/details/85038675
- 作用域闭包 https://blog.csdn.net/woleigequshawanyier/article/details/85214354
- this全面解析 
- 深浅拷贝的原理 https://blog.csdn.net/woleigequshawanyier/article/details/85331237
- 原型prototype https://blog.csdn.net/woleigequshawanyier/article/details/85338995
- 事件机制、
- Event Loop https://www.jianshu.com/p/12b9f73c5a4f
- Promise机制、
- async / await原理、
- 防抖/节流原理  https://blog.csdn.net/woleigequshawanyier/article/details/85345095
- 模块化详解、
- es6重难点、
- 浏览器熏染原理、
- webpack配置(原理) https://blog.csdn.net/woleigequshawanyier/article/details/85273790
- 前端监控、
- 跨域和安全、
- 性能优化（参见上面性能优化相关）
- VirtualDom原理、
- Diff算法、
- 数据的双向绑定
- TCP协议(三次握手、四次挥手) https://blog.csdn.net/woleigequshawanyier/article/details/85223642
- DNS域名解析 https://blog.csdn.net/woleigequshawanyier/article/details/85222985

其它相关

- 前端学习资料下载 https://blog.csdn.net/woleigequshawanyier/article/details/85274358
- 技术体系分类 https://blog.csdn.net/woleigequshawanyier
- react-native 实战项目学习 https://github.com/15826954460/BXStage
- react-naitve 采坑笔记  https://blog.csdn.net/woleigequshawanyier/article/category/8512330

欢迎各位看官的批评和指正，共同学习和成长
希望该文章对您有帮助，你的 支持和鼓励会是我持续的动力