From 41bcbb71570db0f829a2f0f1b5549f380d38d36a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 9 Apr 2018 11:03:48 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=A8=20Infinite=20scroll=20perf=20impro?=
 =?UTF-8?q?vements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue
- swap jQuery HTML parsing and insertion for pure DOM
- remove fade animation
- increase buffer by 100px so next page request happens sooner
---
 assets/js/infinitescroll.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/assets/js/infinitescroll.js b/assets/js/infinitescroll.js
index 005d189..dbacbe4 100644
--- a/assets/js/infinitescroll.js
+++ b/assets/js/infinitescroll.js
@@ -4,7 +4,7 @@ $(function ($) {
     var pathname = window.location.pathname;
     var $document = $(document);
     var $result = $('.post-feed');
-    var buffer = 100;
+    var buffer = 300;
 
     var ticking = false;
     var isLoading = false;
@@ -29,12 +29,12 @@ $(function ($) {
 
     function requestTick() {
         if (!ticking) {
-            requestAnimationFrame(infiniteScroll)
+            requestAnimationFrame(infiniteScroll);
         }
         ticking = true;
     }
 
-    function infiniteScroll () {
+    function infiniteScroll() {
         // return if already loading
         if (isLoading) {
             return;
@@ -60,15 +60,19 @@ $(function ($) {
         var nextPage = pathname + 'page/' + currentPage + '/';
 
         $.get(nextPage, function (content) {
-            $result.append($(content).find('.post').hide().fadeIn(100));
-
+            var parse = document.createRange().createContextualFragment(content);
+            var posts = parse.querySelectorAll('.post');
+            if (posts.length) {
+                [].forEach.call(posts, function (post) {
+                    $result[0].appendChild(post);
+                });
+            }
         }).fail(function (xhr) {
             // 404 indicates we've run out of pages
             if (xhr.status === 404) {
                 window.removeEventListener('scroll', onScroll, {passive: true});
                 window.removeEventListener('resize', onResize);
             }
-
         }).always(function () {
             lastDocumentHeight = $document.height();
             isLoading = false;