All geek questions in one place

Will infinite scrolling depend on browser crashes?

I implemented infinite scroll, for example:

new_page_value = 1; $(window).scroll(function() { if($(window).scrollTop() >= $(document).height() - $(window).height() - 200) { new_page_value = parseInt(new_page_value) + 1; get_page(new_page_value); } });

When the user almost reaches the bottom of the page (200 pixels to the left), the get_page() function is get_page() . It contains an ajax call, which receives the entire contents of the new page and adds it to the <body> document.

Now I just realized that my site is becoming large, and instead of 10 small pages I have giant giant pages, then the user's browser may crash if they are constant enough so that endless scrolling lasts a long time.

Would this be a possible solution to this problem:

I will add new pages to the <body> document until the 10th page, after which I will completely replace the contents of the <body> , rather than add. So use html() , not append() .

I just don't know if this will really work to prevent crashes. Will .html() clear the "memory" of the previous html that was contributed via ajax?

+6
source share
3 answers

I really think this is a common problem for many sites with AJAX list content. Therefore, give an example on some of the most popular (think about the scale) websites and their solutions:

Google Images

If you choose images.google.com and you are looking for anything, for example. "guiness", you will see a page full of results (in fact, the images are loaded with ajax, not the html code, so the page has a fixed height), and when scrolling at the bottom there is a button "Show more results" . This may be the solution to one of your problems, but is it really necessary that the button be at the bottom, for example, the 10th page? I really think that this is usually a good solution for the convenience of using pages and memory leaks, but it really is not a necessary parameter, as we can see in:

Facebook

Facebook Newsfeed is another story. There is a "Show more posts" button, but I really don’t know exactly when it is displayed, and the next page of messages is not loading. Once I had to load 10-15 pages of messages, only scrolling. And you know that Facebook posts have videos, photos, AJAX comments, and much more Javascript that take up a lot of memory. I think that they managed to do this after a lot of research, how many users scroll down to the bottom.

Youtube

Youtube has "Load more videos" on every page, so the solution is basically similar to Google, except that Google displays the entire html of the page and just scrolls the image when scrolling.

Twitter

Twitter supports endless scrolling. Yes, they can do this because the tweet is 140 characters and they don’t need to worry so much about memory. After all, who wants to read more than 1000 pages of tweets when loading a single page. Thus, they do not have a button for "load more" , and they are not needed.

So there are two solutions:

  • Use infinite scrolling (you have to consider how much content you download and how rich it is)
  • Use Button: "load more"

Most of all you should not delete already loaded contents of the list.

Currently, all Javascript and Javascript have garbage collection , so it is very difficult to unload the DOM (if it has Javascript and not plain text) and you can remove the Garbage from Javascript. This means that you will not free all allocated memory from the downloaded content from the browser.

Also think about your requests, why do you need to download something again that you already downloaded in first place. It requires a different server request, which means a different database request, etc.

+3
source

I have worked with this before, and here are some of my thoughts:

a) If you add data to the memory pages at the same time, this is not a problem, some browsers may respond poorly, but most recent browsers will display without any problems, if there is enough memory on the target machine, you can probably see how to use Plunger increases when adding pages. Use chrome for this, since each page is a separate process and has a built-in task manager

b) regarding the use of html() , it really removes the markup, but it does it at a great cost, since it tries to take care of special conditions and has overhead and gets access to all the controls embedded in the container that you are replacing (not sure of the last patch), but it has a cost. An easy way to clear the DOM would be to use the innerHTML property and set it to empty, this does jquery, but it is at a later point in the html() api. open api and look at the method. using innerHTML

$("<selector>")[0].innerHTML=""

Also deleting pages sounds strange to me as a user that if I want to return to the original comments and please don't think about making it an endless scroller. I tried and refused after the number of errors, but we had a real precedent for this, and I had to click a button there, but this was not when the user was scrolling away from the first page, this is when the user landed on the third page, but now should see results over it.

Hope the answer to your question and the btw infinte scrolling is your friend who uses it, don't redo the case, which is likely to be checked only by your QA team. Better spend your efforts elsewhere.

+1
source

Yes, if I can come up with an idea, suppose that 5 pages just deleted the first page and added a new one, rather than deleting all the previous pages. good luck :)

0
source

Source: https://habr.com/ru/post/914470/

More articles:


All Articles