javascript - 将本地镜像加载到浏览器时的性能问题

Question

我正在使用 FileReader在 Backbone 应用程序中显示本地镜像。较小的图像会立即显示，没有任何问题，但当图像为几兆字节或更大时，Chrome 需要 2 或 3 秒才能加载图像(在配备 8 GB RAM 的全新 MacBook Pro 上)。

正如评论中指出的那样，大图像会在 this File API tutorial 中即时加载，所以问题不在于 FileReader，而在于我在 Backbone 中的特定实现。

我在下面包含了相关的 Backbone 模型和 View 。以下是逻辑概要:

1. 该模型创建一个新的 FileReader，文件路径将传递到其中。
2. 加载文件后，将创建一个 Image，并将 Image 的 src 设置为 提供的数据 URL code>FileReader.
3. 加载图像后，模型会更新图像的宽度和高度(在应用程序的其他地方使用)，模型的 initialized 属性设置为 true(因此在模型上触发 change 事件)。
4. 当 View 检测到模型上的 change 事件时，将调用 render 函数，将 div 的背景图像替换为数据 URL。

Backbone 模型

var PhotoModel = Backbone.Model.extend({

  initialize: function() {
    this.set({"available": true});
    this.initialized = false;
    if (this.get("file")) { 
      this.uploadPhoto();
    }
  },

  uploadPhoto: function() {
    var file = this.get("file");
    var reader = new FileReader();
    var model = this;
    reader.onload = function(event) {
      var image = new Image();
      image.onload = function() {
        model.set({width: this.width, height: this.height});
        model.set("initialized", true);
      };
      image.src = event.target.result; 
      model.set("dataURL", event.target.result);
    }
    reader.readAsDataURL(file);
  },
});

主干 View

var PhotoFormView = Backbone.View.extend({

  className: "photo-form",

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
    this.render();
  },

  render: function() {
    $(this.el).find(".photo").css({"background-image": "url(" + this.model.get("dataURL") + ")"});
  },
});

下面是 Chrome 时间轴的屏幕截图。最大的延迟似乎发生在数据 URL 请求和加载事件之间(这大约占 0.5 秒)。我不确定“重新计算样式”是什么意思。我也不确定为什么会有这么多绘画事件(它似乎在滚动条区域呈现)。

解决方案

我曾假设浏览器能够比任何 JavaScript 解决方案更有效地原生调整图像大小，但这个假设是错误的。通过在显示图像之前调整图像大小，我能够将延迟减少到大约50 毫秒。我使用了一个名为 JavaScript Load Image 的开源插件处理图像加载和调整大小(它使用 HTML5 canvas 标签)。这是我修改后的 Backbone 模型:

var PhotoModel = Backbone.Model.extend({

  initialize: function() {
    this.set({available: true});
    this.set({initialized: false});
    if (this.get("file")) { 
      this.uploadPhoto();
    }
  },

  uploadPhoto: function() {
    var model = this;
    loadImage(this.get("file"), function (img) {
      model.set({img: img});
      model.set({initialized: true});
    }, {maxHeight: 344});
  },
});

Answer 1

我在使用 FileReader 加载大图像时遇到了同样的问题。如果您不打算以全尺寸显示它们，解决方法似乎是在使用 canvas 元素显示图像之前缩放图像。

在我自己的实现取得成功后，我选择使用 JavaScript Load Image (麻省理工学院许可证)及其 maxWidth 选项，解决了这个问题和更多(不可预见的)问题。

试试 the demo并查看您的图片加载是否正常。