Reading experience optimization starting point reading page

Reading experience optimization starting point reading page

Author: Liu Wentao


This article is produced by a member of YFE, please respect the original, please contact the public account (ID: yuewen_YFE) for authorization to reprint, and indicate the author, source and link.

As a page with high volume of visitors of novel reading websites, the optimization of reading experience is crucial. I was fortunate to be in charge of the front-end development of the reading page in the Starting Point project, which gave me a great sense of accomplishment.

Qidian Chinese website address: www.qidian.com, welcome to experience!

In the case that the whole starting point project has a perfect performance optimization system, the page performance statistics of the reading page after the revision are as follows:

As can be seen from the above statistical data, the average DOM Ready time and Onload time of the Chinese website’s reading page are 0.2s and 0.9s respectively, and the Onload time of the page in the slowest loading region is only 1.44s.

This has fully reflected the excellent performance of Qidian Chinese reading page. This paper focuses on how to further optimize qidian Chinese reading experience under the condition that the page performance has been so good. This optimization focuses on the following two points: 1. Chapter loading logic optimization; Two, rolling load optimization – function throttling;

Chapter loading logic optimization

Usually, after reading the previous chapter, users will clearly see the Loading state of the next chapter. This has a big impact on the user experience. If the content of the next chapter can be loaded in advance when the user triggers a certain point in time, the time that the user stays in Loading can be significantly reduced or even not perceived. This optimization of the experience is what we call seamless reading. Based on this point, we adopted the following two methods:

• Scroll trigger loading time in advance;
• Continuous preloading of data from later chapters;

1. Scroll will trigger the loading time in advance

What is trigger load timing early? Trigger the current event in advance when you know the load is about to trigger, which greatly reduces the user’s waiting time.

The mechanism by which the starting page triggers an event is that the next chapter is loaded immediately when the remaining page height is less than or equal to 1.5 times the page window.

You can see that the implementation principle is actually very simple, is to reach the trigger point to pull the next chapter, the implementation code is as follows:

$(window). On ('scroll', function(){var pageHeight = $(document).height(); Var winSTop = $(window).scrollTop(); Var winHeight = $(window).height(); Var cHeight = 2.5 * winHeight; var cHeight = 2.5 * winHeight; // When you're left with less than 1. If (pageHeight <= (winSTop + cHeight)){//... do somethings } }); $(window).trigger('scroll');Copy the code

After the above code is written, the page will load the next chapter much faster. However, when scrolling is fast or the data interface returns slowly, the page will still display Loading state, as shown in the following figure:

Loading blocks the reading progress, affecting the user’s reading mood. So in this case, we introduce a second experiential optimization point.

2. Continuously preload data in later chapters

What is preloading? Data is loaded in advance and can be read directly from the local cache or memory when the user needs to view it.

Why is preloading required? Data can be read from the cache, not transmitted over the network, faster, no delay.

The information in the following chapter can be loaded into the memory in advance to reduce the user’s waiting time and further improve the user experience.

The figure above shows the process of using memory to store the data for the next chapter. Let’s look at the logic of the code:

1) First, Load a chapter content immediately after page Load and store it in memory;

Var chapterInfo = {isHas: Boolean, chapterId: 21463, content: "}; Var chapterLoad = false;Copy the code

2) Scroll triggering logic, adding preloading chapter logic, to ensure no discontinuous page loading state. The code is as follows:

$(window). On ('scroll', function() {if (that.chapterLoad) return false; // do something ... // If (pageHeight <= (winSTop + cHeight)) {// If (pageHeight <= (winSTop + cHeight)) {// If (pageHeight <= (winSTop + cHeight)) (chapterInfo.ishas && chapterInfo.id == nextChapterId) {// Append the chapter in memory to the page, } else {// capterLoad set to true, disallow request that.chapterLoad = true; // Send ajax request to load data to page}} else if (! chapterInfo.isHas && ! That.chapterload) {// Preload when there is no chapter information in memory && No chapter is being loaded // reset to true, disallow request that.chapterLoad = true; chapterInfo.isHas = true; ChapterLoad = false // The window. Scroll event will be triggered in the callback after the data is returned to the memory. If the page has been rolled to the bottom, the scroll event will no longer be triggered, and the page will appear loading stagnation}});Copy the code

As you can see from the above code, the logic of pre-loading and direct Append data to the page is mutually exclusive, which not only ensures the logical clarity of the page, but also optimise the page reading experience to achieve the desired effect. Now let’s look at the effect of page scrolling:

Almost no Loading state is displayed when the page loads the next chapter.

Two, rolling load optimization – function throttling

After the above optimization, the page scroll loading is perfect, and at this point we can think about optimization at the code level. Rolling load is a very common loading mechanism in the front-end world. Listen for the window.scroll event to determine whether the loading time is reached and load the following content. Common listening event codes are:

$(window).on('scroll',function(){
    // ... do somethings
});
Copy the code

The appeal section preloading uses this Scroll listening mode.

However, the Window. scroll event listener is triggered in real time, that is, every 16.7ms. If the event is triggered too many times in a unit time, the system performance will be affected. Function throttling is a good solution in this case.

What does function throttling mean? Just like the process of tightening the faucet in life, in tightening the action, the outflow of water per unit time will be reduced, so as to achieve the purpose of throttling.

In code logic we usually pre-set an execution cycle, execute the action when the call time is greater than or equal to the execution cycle, and then proceed to the next new cycle.

We execute Scroll events by setting an appropriate interval to reduce requests and increase performance. After the Scroll is stopped, the Scroll event is triggered again to solve the problem that the Scroll timing is not correct and the trigger is not timely. Define a throttling function as follows:

function throttle(func, wait, mustRun) { var timeout, startTime = new Date(); return function() { var context = this, args = arguments, curTime = new Date(); // Clear timer clearTimeout(timeout); // If (curtime-startTime >= mustRun) {func. Apply (context,args); startTime = curTime; } else {// Do not reach the trigger interval, reset timer timeout = setTimeout(func, wait); }}; };Copy the code

The way to listen for scrolling can be optimized to:

$(window). On ('scroll', throttle(function () {// do something}, 200,300));Copy the code

As shown below, the normal Scroll event is triggered on the left and the throttling function is triggered on the right. The use of throttling function significantly reduces the frequency of event triggering, and will also trigger a Scroll event when the Scroll stops, in case of missing some special cases that fail to execute the page pull-down loading event.

We ended up saving the browser’s performance overhead without compromising the scrolling experience. Perfect.

At the end

It was the first time to do a project related to reading, and I was in charge of such an important page. I integrated my own ideas and optimized the reading experience, and finally achieved the desired effect. I was very satisfied.

A detailed optimization can determine the quality of a product. A good user experience will attract more users and gain more praise. There is still a lot we can do to optimize the reading experience. I hope we can further optimize it later.

To share more, please follow YFE: