Как быстро добавить несколько строк в div (по одной) и прокрутить вниз, используя Vue?

Question

Я бы хотел отслеживать выходной журнал задания, запущенного на моем веб-сервере, просматривая его в браузере. Я использую веб-сокеты для отправки вывода задания в элемент Vue. Вывод передается построчно, и я хотел бы добавить новую строку к элементу Vue и прокрутить до конца элемента div, чтобы эмулировать выполнение tail -f в выходном файле задания.

Это работает,но если строки отправляются быстро, загрузка процессора браузером становится очень высокой, а страница отображается очень медленно. В Chrome DevTools я вижу, что мои сообщения от веб-сокетов приходят очень хорошо в режиме реального времени. Поэтому я, очевидно, неэффективно добавляю каждую строку к элементу Vue.

Какой более эффективный способ добавлять текст за строкой к элементу vue и непрерывно прокручивать до конца?

Или я должен буферизировать сообщения websocket и обрабатывать несколько строк одновременно?

<code><div id="job_output_vue" class="wordwrap">
    <pre>{{text}}

var logSocket = new WebSocket ('wss: //' + window.location.host + '/ ws / jobOutput/ ');logSocket.onmessage = function (event) {data = JSON.parse (event.data) if (data.line! == undefined) {appLog.appendText (data.line);}} var appLog = new Vue ({el: '#job_output_vue', data: {text: ""}, методы: {appendText (newText) {this.text = this.text + newText; this.scrollToEnd ();}, scrollToEnd () {var container = this. $ el; container.scrollTop = container.scrollHeight;}}, mount () {this.appendText ("Loading ...");}, beforeDestroy () {},});

Answer 1

Я могу ошибаться, но я думаю, что прокрутка - это дорогостоящая операция. Что-то, что вы могли бы попробовать, это добавить наблюдателя для свойства text и обработать прокрутку там:

...
methods: {
  appendText(newText) {
    this.text = this.text + newText;
  },
  scrollToEnd() {
    var container = this.$el;
    container.scrollTop=container.scrollHeight;
  }
},
watch: {
  text() {
    this.scrollToEnd();
  }
},
mounted() {
  var vm = this;
  this.appendText("Loading...");
},

Я не пробовал это, но мне любопытно узнать, если это большеПроизводительность, чем то, с чего вы начали. Дайте мне знать, если это работает!