Performance tweak by avoiding unnecessary repaint in ng-repeat. This …

…divides by 2 or 3 the time necessary to display buffer messages. See #83
magne4000 · Apr 28, 2016 · df41083 · df41083
1 parent f4214ea
commit df41083
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/public/javascripts/angular-controller.js b/public/javascripts/angular-controller.js
@@ -44,12 +44,11 @@ angular.module('quassel')
 
     function updateMessages() {
         if ($scope.buffer) {
-            var it = $scope.buffer.messages.values();
-            var messageItem = it.next();
             var messages = [];
-            while(!messageItem.done) {
-                messages.push(messageItem.value);
-                messageItem = it.next();
+            if ($scope.buffer.messages.__mapValuesData__) {
+                messages = $scope.buffer.messages.__mapValuesData__;
+            } else {
+                messages = Array.from($scope.buffer.messages.values());
             }
             $scope.messages = insertDayChangeMessagesAndApplyIgnoreList(messages, $scope.buffer);
             $scope.buffer.ignoreListRevision = $ignore.getRevision();
@@ -330,12 +329,8 @@ angular.module('quassel')
         $scope.buffer = channel;
         if ($scope.buffer !== null) {
             updateMessages();
-            var id = 0;
-            channel.messages.forEach(function(val) {
-                if (val.id > id) id = val.id;
-            });
             $('#messagebox').focus();
-            $quassel.markBufferAsRead(channel.id, id);
+            $quassel.markBufferAsRead(channel.id, channel._lastMessageId);
         }
     };
 

diff --git a/public/javascripts/angular-directive.js b/public/javascripts/angular-directive.js
@@ -414,37 +414,34 @@ angular.module('quassel')
     };
 }])
 .directive('scrollme', [function () {
-    var parent = $("ul.backlog")[0];
     var promise = null;
-    var heightsum = 0;
+    var subjects = [];
     return {
         link: function (scope, element, attr) {
+            var parent = $(attr.scrollme)[0];
             clearTimeout(promise);
-            if (element.is(':last-child')) {
-                heightsum += element.height();
+            if (parent.lastElementChild.isEqualNode(element[0])) {
+                subjects.push(element[0]);
                 promise = setTimeout(function(){
-                    if (!element.is(':hidden')) {
-                        if (parent.offsetHeight + parent.scrollTop + heightsum + 10 >= parent.scrollHeight) {
-                            parent.scrollTop = parent.scrollHeight;
-                            heightsum = 0;
-                        }
+                    var cumulativeHeight = 0;
+                    for (var i=0; i<subjects.length; i++) {
+                        cumulativeHeight += subjects[i].offsetHeight + 1;
                     }
+                    console.log(parent.scrollHeight - parent.scrollTop - parent.clientHeight, cumulativeHeight);
+                    if (parent.scrollHeight - parent.scrollTop - parent.clientHeight <= cumulativeHeight) {
+                        parent.scrollTop = parent.scrollHeight;
+                    }
+                    subjects = [];
                 }, 50);
             }
         }
     };
 }])
-.directive('backlog', ['$timeout', '$compile', '$quassel', function (timeout, $compile, $quassel) {
+.directive('backlog', ['$timeout', '$compile', '$quassel', '$parse', function (timeout, $compile, $quassel, $parse) {
     return {
-        scope: {
-            backlog: "=",
-            buffer: "=parentBuffer",
-            currentFilter: "="
-        },
-        template: "",
         link: function (scope, element, attr) {
             var lengthThreshold = attr.scrollThreshold || 20;
-            var handler = scope.backlog;
+            var handler = $parse(attr.backlog)(scope);
             var promiseFetching = null;
             var promiseScroll = null;
             var lastScrolled = -9999;

diff --git a/views/index.jade b/views/index.jade
@@ -176,9 +176,9 @@ html(ng-app="quassel", ng-controller="ConfigController")
                       a.btn(ng-click="setAsDefault()", href="#") Set as default
                     li
                       a.btn(ng-click="useDefault()", href="#") Use default
-              ul.backlog(backlog="loadMore", parent-buffer="buffer", current-filter="currentFilter")
+              ul.backlog(backlog="loadMore", current-filter="currentFilter")
                 li.irc-message(
-                      scrollme
+                      scrollme="ul.backlog"
                       ng-repeat-start="message in messages track by message.sid"
                       class="type-{{::message.type}}"
                       ng-class="{highlighted: message.isHighlighted()}"
@@ -194,7 +194,6 @@ html(ng-app="quassel", ng-controller="ConfigController")
                   span
               .input(ng-controller="InputController")
                 form#messageform(ng-submit="sendMessage()")
-                  //input#messagebox(type='text', autocomplete='off', ng-attr-placeholder='{{nick || "Enter your message here"}}', ng-model="inputmessage", ng-model-options="{ debounce: 100 }", caret)
                   #messagebox(contenteditable, mimic-input="true", focusonfocus, ng-attr-placeholder='{{nick || "Enter your message here"}}', ng-model="inputmessage", caret)
                   .formatter
                     button.btn.btn-default.btn-xs.handle(type="button", ng-click="formattervisible = !formattervisible", title="Format")