How We Boosted Qidian Reading Page Performance with Preloading and Throttle

Introduction

Reading pages on novel sites receive high traffic; optimizing the reading experience is crucial. The author worked on Qidian's reading page front‑end development and shares performance data after a redesign.

Performance Metrics

After the redesign, average DOMReady time is 0.2 s, Onload 0.9 s, and even the slowest region loads the page in 1.44 s, demonstrating excellent performance.

Chapter Loading Logic Optimization

To reduce the visible loading state when moving to the next chapter, two approaches were applied: (1) advance the scroll trigger point so that the next chapter is loaded before the user reaches it, achieving “seamless reading”, and (2) continuously preload subsequent chapters into memory.

Advance Scroll Trigger

When the remaining page height is ≤1.5 × the viewport height, the next chapter is loaded immediately. The implementation uses a scroll listener with a threshold check.

<code>$(window).on('scroll', function(){ 
    var pageHeight = $(document).height(); 
    var winSTop = $(window).scrollTop(); 
    var winHeight = $(window).height(); 
    var cHeight = 2.5 * winHeight; 
    if (pageHeight <= (winSTop + cHeight)) { 
        // load next chapter 
    } 
}); 
$(window).trigger('scroll');</code>

Continuous Preloading

After the page loads, the first chapter data is stored in a JavaScript object. When the scroll reaches the trigger point, the script checks whether the next chapter is already cached; if not, it sends an AJAX request, marks the loading flag, and on success stores the data for future use.

<code>var chapterInfo = { isHas: false, chapterId: 21463, content: '' };
var chapterLoad = false;
// scroll handler with throttle
$(window).on('scroll', throttle(function(){ 
    if (that.chapterLoad) return false; 
    if (pageHeight <= (winSTop + cHeight)) { 
        if (chapterInfo.isHas && chapterInfo.id == nextChapterId) { 
            // append cached chapter 
        } else { 
            that.chapterLoad = true; 
            // ajax request, then that.chapterLoad = false 
        } 
    } 
}, 200, 300));</code>

Scroll‑Event Throttling

Listening to the scroll event on every frame (~60 fps) can hurt performance. A throttle function limits execution to a configurable interval, ensuring the handler runs at most once per period while still firing a final call after scrolling stops.

<code>function throttle(func, wait, mustRun) { 
    var timeout, startTime = new Date(); 
    return function() { 
        var context = this, args = arguments, curTime = new Date(); 
        clearTimeout(timeout); 
        if (curTime - startTime >= mustRun) { 
            func.apply(context, args); 
            startTime = curTime; 
        } else { 
            timeout = setTimeout(func, wait); 
        } 
    }; 
}</code>

Result

With the advanced scroll trigger, continuous preloading, and throttled scroll handling, the reading page loads the next chapter almost without a visible loading state, reduces browser overhead, and delivers a smoother user experience.