chromium lazyimages 介绍

最新推荐文章于 2024-04-24 09:59:07 发布
最新推荐文章于 2024-04-24 09:59:07 发布
阅读量464 收藏
点赞数
文章标签： chromium lazyload 浏览器懒加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joel_h/article/details/82053685
版权

原地址 https://lulus.life/2018/08/24/lazyimage/

首先通过视频看一下效果
视频地址

视频解释

这个功能大概就是，当图片快滑到视图之内的时候，再去请求加载图片

主要需要注意以下几点

  • 页面刚加载的时候图片在viewport之外， 这时图片没有全部加载
  • 图片资源只发出了一个206请求，用来获取前 2048字节
  • 当滑动页面，致使图片靠近viewport的时候，浏览器发出请求，请求整个图片资源。

如何启用该功能

需要注意的事项

网站里的图片最好有 etag 或者 Date + Last Modified
原因：

chrmium 只会对于有etag 或者 Date - Last Modified > 60sec的资源建立sparse缓存， 这样的话，当图片离viewport比较远的时候，首先blink会发出一个带有range的请求，请求资源的0-2047个字节。 当滑动过程中图片即将进入viewport的时候，会再次发出一个请求请求整个图片。 如果没有sparse缓存的话， 第二个请求会请求一个完完整整的图片数据，当我们有了sparse缓存，第二个请求首先会先从sparse缓存里读取2048个字节，然后再从网络请求剩下的内容

是否创建sparse文件由以下函数决定

bool HttpUtil::HasStrongValidators(HttpVersion version,
                                   const std::string& etag_header,
                                   const std::string& last_modified_header,
                                   const std::string& date_header) {
  if (!HasValidators(version, etag_header, last_modified_header))
    return false;

  if (version < HttpVersion(1, 1))
    return false;

  if (!etag_header.empty()) {
    size_t slash = etag_header.find('/');
    if (slash == std::string::npos || slash == 0)
      return true;

    std::string::const_iterator i = etag_header.begin();
    std::string::const_iterator j = etag_header.begin() + slash;
    TrimLWS(&i, &j);
    if (!base::LowerCaseEqualsASCII(base::StringPiece(i, j), "w"))
      return true;
  }

  base::Time last_modified;
  if (!base::Time::FromString(last_modified_header.c_str(), &last_modified))
    return false;

  base::Time date;
  if (!base::Time::FromString(date_header.c_str(), &date))
    return false;

  // Last-Modified is implicitly weak unless it is at least 60 seconds before
  // the Date value.
  return ((date - last_modified).InSeconds() >= 60);
}

另外介绍一下 spase文件， 对于 有range的请求 chromium会把资源放到一个 {url的hash， 8个字节}_s文件里

举个例子：
首先我们清楚chrome的缓存

wanghui@wh:/tmp/chrome/Default/Cache$ ls
wanghui@wh:/tmp/chrome/Default/Cache$

可以看到我的缓存是空的。
然后创建以下页面

 <html>
 <head>
 <style type="text/css">
 #test {
   height:2000px;
 }
 </style>
 </head>
   <div id="test">
      lazy load image 
   </div>
   <img src="https://lulus.life/01.jpg" />
 </html>

用我们的chrome访问该页面

wanghui@wh:~/chromium/src$ out/Default/chrome --user-data-dir=/tmp/chrome --no-proxy-server --enable-quic --origin-to-force-quic-on=lulus.life:443 --host-resolver-rules='MAP lulus.life:443 127.0.0.1:6121' https://lulus.life/test.html

我用的quic服务器，忽略我的命令行
看一下我的缓存目录

wanghui@wh:/tmp/chrome/Default/Cache$ ls -l
total 28
-rw------- 1 wanghui wanghui 4049 Aug 24 18:39 235add38b243d26b_0
-rw------- 1 wanghui wanghui 2129 Aug 24 18:39 235add38b243d26b_s
-rw------- 1 wanghui wanghui 4213 Aug 24 18:39 8f505f077bd94c0e_0
-rw------- 1 wanghui wanghui 4001 Aug 24 18:39 bf9ed9cbda59708c_0
-rw------- 1 wanghui wanghui   24 Aug 24 18:39 index
drwx------ 2 wanghui wanghui 4096 Aug 24 18:39 index-dir
wanghui@wh:/tmp/chrome/Default/Cache$

打开 235add38b243d26b_s文件

 1 235add38b243d26b_s +                                                                                                                                                                                           X 
 00000000: 305c 72a7 1b6d fbfc 0800 0000 1900 0000  0\r..m..........
 00000010: 58ca eab6 0000 0000 6874 7470 733a 2f2f  X.......https://
 00000020: 6c75 6c75 732e 6c69 6665 2f30 312e 6a70  lulus.life/01.jp
 00000030: 676b 6753 6501 bf97 eb00 0000 0000 0000  gkgSe...........
 00000040: 0000 0800 0000 0000 005a 4219 8d00 0000  .........ZB.....
 00000050: 00ff d8ff e000 104a 4649 4600 0101 0100  .......JFIF.....
 00000060: 6000 6000 00ff db00 4300 0201 0102 0101  `.`.....C.......
 00000070: 0202 0202 0202 0202 0305 0303 0303 0306  ................
 00000080: 0404 0305 0706 0707 0706 0707 0809 0b09  ................
 00000090: 0808 0a08 0707 0a0d 0a0a 0b0c 0c0c 0c07  ................
 000000a0: 090e 0f0d 0c0e 0b0c 0c0c ffdb 0043 0102  .............C..
 000000b0: 0202 0303 0306 0303 060c 0807 080c 0c0c  ................
 000000c0: 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c  ................
 000000d0: 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c  ................
 000000e0: 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c 0c0c 0cff  ................
 000000f0: c000 1108 0154 00ff 0301 2200 0211 0103  .....T....".....
 00000100: 1101 ffc4 001f 0000 0105 0101 0101 0101  ................
 00000110: 0000 0000 0000 0000 0102 0304 0506 0708  ................
 00000120: 090a 0bff c400 b510 0002 0103 0302 0403  ................
 00000130: 0505 0404 0000 017d 0102 0300 0411 0512  .......}........
 00000140: 2131 4106 1351 6107 2271 1432 8191 a108  !1A..Qa."q.2....
 00000150: 2342 b1c1 1552 d1f0 2433 6272 8209 0a16  #B...R..$3br....
 00000160: 1718 191a 2526 2728 292a 3435 3637 3839  ....%&'()*456789
 00000170: 3a43 4445 4647 4849 4a53 5455 5657 5859  :CDEFGHIJSTUVWXY
 00000180: 5a63 6465 6667 6869 6a73 7475 7677 7879  Zcdefghijstuvwxy
 00000190: 7a83 8485 8687 8889 8a92 9394 9596 9798  z...............
 000001a0: 999a a2a3 a4a5 a6a7 a8a9 aab2 b3b4 b5b6  ................
 000001b0: b7b8 b9ba c2c3 c4c5 c6c7 c8c9 cad2 d3d4  ................
 000001c0: d5d6 d7d8 d9da e1e2 e3e4 e5e6 e7e8 e9ea  ................
 000001d0: f1f2 f3f4 f5f6 f7f8 f9fa ffc4 001f 0100  ................
 000001e0: 0301 0101 0101 0101 0101 0000 0000 0000  ................
 000001f0: 0102 0304 0506 0708 090a 0bff c400 b511  ................
 00000200: 0002 0102 0404 0304 0705 0404 0001 0277  ...............w

通过上一篇 介绍http cache的文章我们可以知道，这个数据属于
https://lulus.life/01.jpg
只不过是一部分数据

接下来我们滑动窗口，让图片进入viewport
再次看一下cache目录

wanghui@wh:/tmp/chrome/Default/Cache$ ls -l
total 56
-rw------- 1 wanghui wanghui  4049 Aug 24 18:43 235add38b243d26b_0
-rw------- 1 wanghui wanghui 29164 Aug 24 18:43 235add38b243d26b_s
-rw------- 1 wanghui wanghui  4213 Aug 24 18:43 8f505f077bd94c0e_0
-rw------- 1 wanghui wanghui  4001 Aug 24 18:43 bf9ed9cbda59708c_0
-rw------- 1 wanghui wanghui    24 Aug 24 18:43 index
drwx------ 2 wanghui wanghui  4096 Aug 24 18:43 index-dir
wanghui@wh:/tmp/chrome/Default/Cache$

可以看到235add38b243d26b_s 文件大小涨到了29164，也就是图片的大小。

LazyImage 相关代码

LazyImage相关提交关联这个Issule 846170 （需要翻墙）

如果开启该功能后，所有图片会预先加载前0-2047字节， 并创建一个图片作为placeholder。

看一个堆栈 

void ImageLoader::DoUpdateFromElement(BypassMainWorldBehavior bypass_behavior,
                                      UpdateFromElementBehavior update_behavior,
                                      const KURL& url,
                                      ReferrerPolicy referrer_policy,
                                      UpdateType update_type) {
    ...

    FetchParameters params(resource_request, resource_loader_options);
    ConfigureRequest(params, bypass_behavior, *element_,
                     document.GetFrame()->GetClientHintsPreferences());

    if (update_behavior != kUpdateForcedReload &&
        lazy_image_load_state_ == LazyImageLoadState::kNone) {
      const auto* frame = document.GetFrame();
      if (frame->IsClientLoFiAllowed(params.GetResourceRequest())) {
        params.SetClientLoFiPlaceholder();
      } else if (auto* html_image = ToHTMLImageElementOrNull(GetElement())) {
        if (html_image->ElementCreatedByParser() &&
            frame->IsLazyLoadingImageAllowed()) {
          params.SetAllowImagePlaceholder();
          lazy_image_load_state_ = LazyImageLoadState::kDeferred;
        }
      }
    }

当允许lazyload的时候设置params为 AllowImagePlaceholder

bool LocalFrame::IsLazyLoadingImageAllowed() const {
  if (!RuntimeEnabledFeatures::LazyImageLoadingEnabled())
    return false;
  if (Owner() && !Owner()->ShouldLazyLoadChildren())
    return false;
  return true;
}

所以Image会先以imageholder的方式呈现。imageholder的加载流程下次分析， imageholder是根据图片前0-2047字节创建的一个图片， 前2048字节一般包含图片的header，从此可以解析出图片的宽高以及tumbnail等信息

lazyimage主要的类是LazyLoadImageObserver,由这个类来控制是否需要加载整个图片。
继续看看堆栈

DoUpdateFromElement接下来会调用UpdateImageState， 而UpdateImageState会调用LazyLoadImageObserver的静态函数
StartMonitoring， 我们看一下这个函数

void LazyLoadImageObserver::StartMonitoring(Element* element) {
  if (LocalFrame* frame = element->GetDocument().GetFrame()) {
    if (Document* document = frame->LocalFrameRoot().GetDocument()) {
      document->EnsureLazyLoadImageObserver()
          .lazy_load_intersection_observer_->observe(element);
    }
  }
}

可以看到该函数首先会调用document的EnsureLazyLoadImageObserver

LazyLoadImageObserver& Document::EnsureLazyLoadImageObserver() {
  if (!lazy_load_image_observer_)
    lazy_load_image_observer_ = new LazyLoadImageObserver(*this);
  return *lazy_load_image_observer_;
}

EnsureLazyLoadImageOberser判断如果当前document没有创建LazyLoadImageObserver就会创建一个LazyLoadImageObserver赋值给成员变量 lazy_load_image_observer_.

接下来看一下LazyLoadImageObserver的构造函数
这个LazyLoadImageObserver会创建一个IntersectionObserver 代码在 third_party/blink/renderer/core/html/lazy_load_image_observer.cc

LazyLoadImageObserver::LazyLoadImageObserver(Document& document) {
  DCHECK(RuntimeEnabledFeatures::LazyImageLoadingEnabled());
  document.AddConsoleMessage(ConsoleMessage::Create(
      kInterventionMessageSource, kInfoMessageLevel,
      "Images loaded lazily and replaced with placeholders. Load events are "
      "deferred. See https://crbug.com/846170"));
  lazy_load_intersection_observer_ = IntersectionObserver::Create(
      {Length(kLazyLoadRootMarginPx, kFixed)},
      {std::numeric_limits<float>::min()}, &document,
      WTF::BindRepeating(&LazyLoadImageObserver::LoadIfNearViewport,
                         WrapWeakPersistent(this)));
}

其中 kLazyLoadRootMarginPx = 800

我们先看一下IntersectionObserver的构造函数

IntersectionObserver::IntersectionObserver(
    IntersectionObserverDelegate& delegate,
    Element* root,
    const Vector<Length>& root_margin,
    const Vector<float>& thresholds,
    bool track_visibility)
    : ContextClient(delegate.GetExecutionContext()),
      delegate_(&delegate),
      root_(root),
      thresholds_(thresholds),
      top_margin_(kFixed),
      right_margin_(kFixed),
      bottom_margin_(kFixed),
      left_margin_(kFixed),
      last_run_time_(-s_v2_throttle_delay_),
      root_is_implicit_(root ? 0 : 1),
      track_visibility_(track_visibility ? 1 : 0) {

  ...

  if (Document* document = TrackingDocument())
    document->EnsureIntersectionObserverController().AddTrackedObserver(*this);
}

可以看到这个observer加到了document的observercontroller里
再看一个堆栈

当页面viewport有更新的时候会计算observe的元素，是否符合要求，如果符合会返回给observer所有符合条件的element。
接下来就会调用 LazyLoadImageObserver::LoadIfNearViewport

void LazyLoadImageObserver::LoadIfNearViewport(
    const HeapVector<Member<IntersectionObserverEntry>>& entries) {
  DCHECK(!entries.IsEmpty());

  for (auto entry : entries) {
    if (!entry->isIntersecting())
      continue;
    Element* element = entry->target();
    if (auto* image_element = ToHTMLImageElementOrNull(element))
      image_element->LoadDeferredImage();

    // Load the background image if the element has one deferred.
    if (const ComputedStyle* style = element->GetComputedStyle())
      style->LoadDeferredImages(element->GetDocument());

    lazy_load_intersection_observer_->unobserve(element);
  }
}

然后就是请求整个图片的数据。

Joel_h
关注
chromium cache介绍
Joel_h的博客
08-25 1734
Chromium Cache 官方文档 Chromium Cache 分类 DiskCache blockfile： mac上的chrome以及ios使用的该类cache memory： 隐私模式使用该类的cache simple cache： android linux 以及 mac上的chromium使用这种 ...
AndroidChromium：来自Chrome开放项目的Android版本的Chrome浏览器
02-01
简单的介绍 谷歌浏览器android版源程序 该项目是世界一流的android体系结构 澄清项目业务逻辑可以完全适合国内公司工程师 该项目将长期跟踪和更新Google浏览器内核版本，欢迎加入星号 注意 如果您使用的是Android...
lazyImages：基于ES6的轻量级，高性能，替代的图片懒加载:cat:
02-05
基于ES6的轻量级，高性能，简单的图片懒加载插件 * [lazyImage plugin] * 基于ES6的轻量级，高性能，简单的图片懒加载插件 * @Author jawil * @date 2017-05-22 * @param {object} 插件配置参数 示例： // 默认配置 new Lazy ( { containerId : window , //图片顶层容器 offset : 100 , //在定义可视区的范围内开始加载 throttle : 250 , //250ms触发一次元素scroll时间，函数节流
探索高效图片加载新方案：LazyImages
最新发布
gitblog_00062的博客
04-24 240
探索高效图片加载新方案：LazyImages 项目地址:https://gitcode.com/jawil/lazyImages 在网页设计和前端开发中，图片优化是一项至关重要的任务，因为它直接影响到页面的加载速度和用户体验。而LazyImages 是一个轻量级的JavaScript库，它引入了懒加载（Lazy Loading）技术，旨在提升网页性能，减少不必要的资源消耗，为用户提供更快、更流畅的...
图片懒加载
weixin_43611411的博客
11-08 1976
图片懒加载的分析及实现过程——学习笔记
LazyImage:用于延迟加载某些元素的几种尺寸图像的简单脚本
05-23
#LazyImage LazyImage是一个简单的库，可延迟加载多种尺寸的图像以提高网站的感知性能。 刚在关闭主体之前，它会在包含时自动调用，但是您可以通过调用LazyImage.Parse();手动解析页面LazyImage.Parse(); ##用法要解析元素，必须将data-lazy属性添加到对象。 在此属性内，您可以按文件大小按升序定义要为该特定元素加载的所有图像。 您用分号（;）分隔每个网址。 ##请记住，将属性应用于img元素时，它将相应地自动替换它的src ，当在其他元素上使用时，脚本将替换background-image样式。
小程序中使用mina-lazy-image组件，实现图片懒加载
qq_36196059的博客
03-05 821
使用方法 1、开发者工具项目中，右键选择>在外部终端窗口打开 2、安装组件：npm install --save mina-lazy-image 3、勾选：使用npm模块 4、构建npm 微信开发者工具->工具->构建npm 5、在需要使用的文件，json配置文件中引入mina-lazy-image { "usingComponents": { "mina-lazy-image": "mina-lazy-image/index" } } 6、在wxml中使用
chromium-linux.zip
10-06
"chromium-linux.zip" 是一个包含了 Chromium 浏览器针对 Linux 操作系统的源代码压缩包。Chromium 是 Google Chrome 浏览器的开源版本，它为开发者提供了浏览器的基础架构，以便进行定制和改进。这个压缩包主要是...
org.chromium.Chromium
03-14
此扩展点可用于配置自定义Chromium策略，当前位于版本“ 1”上，并将使Chromium可用的policies/managed和policies/recommended子目录下的任何策略。 org.chromium.Chromium.Extension 与上述类似，但对于Chromium...
Chromium修复“缺少Google API 密钥，因此Chromium 的部分功能将无法使用”
03-14
每次打开Chromium，地址栏下方就会提示“缺少Google API 密钥，因此Chromium 的部分功能将无法使用”。 该文件可以修复此问题 使用Chromium，比使用chrome更简洁、快速。
lazy-images:懒加载图片
07-06
懒惰的图像 用于延迟加载图像的轻量级 javascript 插件 用 安装模块： npm install lazy-images 需要模块： var lazy = require('lazy-images')([IMAGE_SELECTOR]); IMAGE_SELECTOR 默认为“.lazy” 笔记 为了让这个模块工作，图像需要通过 img 标签属性或 css 属性定义它们的维度属性。
LazyImgv1.0图片延迟加载插件
01-23
注：LazyImg 必须定义lazy-data属性，属性值是src的图片路径 引入JS文件： 默认情况下: 在IMG中满足以任何一个条件，都会加载图片； 1、没有class属性 2、如果有class属性并且属性中不包含以"lazy-"为前缀的css样式名 如何禁止默认加载图片 JS代码: LzDefault.action = false; 如何在点击事件时显示图片 JS代码: LazyImg.lazy("lazy-name"); "lazy-name" 中的name是可以自定义，"lazy-"是前缀必须存在
UIScrollview:延迟加载 lazily load（动态加载）
秉烛夜谈
09-24 1303
本文转自： UIScrollview要加载大量数据的时候，考虑到内存的消耗问题，我们不可能全部加载完。 因此，需要找到个方法去延迟加载（lazily load）。参考官方例子：PageControl中的iphone页面。ipad的是popover弹窗的示例。 关于这个例子（我下的是1.4版的），运行会出现问题：[WARN]Warning: Multiple build comma
深入理解图片和框架的原生懒加载功能
油墨香^-^的博客
08-21 131
这个新功能着实让我激动。原生懒加载功能的发布近在眼前，会对全球互联网通信产生非凡影响。就算它只能改变启发式技术的一小部分，老实说我仍不明白为何人们不给予足够的关注。想想吧，随着在不同的 Chrome 平台中逐渐推广、auto值成为默认选项，世界上最流行的浏览器即将对视口外的图片和框架应用懒加载技术。决堤般的通信量会大面积击溃那些健壮性不足的网站，而且，蜂拥而至的图片探测请求也会伤及网络服务器。
胖虎谈ImageLoader框架(一)
热门推荐
快乐de胖虎
10-27 1万+
前言从学校出来的这半年时间，发现很少有时间可以静下来学习和写博文了，为了保持着学习和分享的习惯，我准备之后每周抽出一部分时间为大家带来一个优秀的Android框架源码阅读后的理解系列博文。期许：希望可以和大家一起学习好此框架，也希望大家看博文前最好是先了解下框架的基本使用场景和使用方法，有什么问题可以留言给我，交流学习。这周为大家带来的是《胖虎谈ImageLoader框架》系列，分析优秀的框架源码能
前端性能优化：4.资源加载优化
qq_41185702的博客
12-27 1034
根据HTTP Archive网站的统计数据，截止到2021年12月互联网页面的请求数据量中，图像资源已经占据了60%~65%，这仅是平均数据，对于电商或图片社交场景，这个比例将更大。 想要获得更好的性能体验，只靠资源压缩与恰当的文件格式类型，是很难满足期望的。我们还需要针对资源加载过程进行优化，该环节所要做的内容可概括为分清资源加载的优先级顺序，仅加载当前所必需的资源，并利用系统空闲提前加载可能会用到的资源。即本文将探讨的内容：资源的优先级、延迟加载和预加载。 4.1 图像延迟加载 4.1.1什么是延迟加载
原生 JS实现图片懒加载
m0_65544665的博客
11-12 131
JS实现图片懒加载
图片懒加载的实现
weixin_57156664的博客
09-19 424
图片懒加载是指在页面加载时，只加载可视区域内的图片，当滚动页面，将要出现在可视区域内的图片再进行加载，减少了页面的加载时间和带宽的占用，提升了用户体验。用于获取元素相对于视口的位置和大小信息,返回一个对象,包含元素的坐标、宽度、高度等属性。
Android Chromium 渲染管道技术解析
"Android Chromium 渲染管道技术分享，探讨了浏览器渲染的关键路径、Chromium的性能优化策略以及Chromium驱动的Android WebView的结构和渲染流程。" 在深入理解Android Chromium Rendering Pipeline之前，我们首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值