Use HTML5 to implement unlimited smooth scrolling of iPad apps

Directory

1. What is stream?
2. Challenges of unlimited list on mobile devices
3. Tip 1 remove an image
4. Tip 2 Hide the page
5. Tip 3 delete a page
6. Tip 4 avoid scaling and box shadow
7. Technology 5 reduce DOM nodes
8. Technical Implementation video
9. Failed attempts
10. Thank you

 

Preface:

LinkedIn released a new iPad version in May 2. It is made based on HTML5 and has excellent experience and interface. It can be found that there is basically no difference between it and native applications.

There are two articles about this version that are very valuable. They have introduced in depth the principles and methods of Mobile Web App and HTML5 Mobile development.

Article 1 《How do you build a new iPad app on LinkedIn?"Mainly includes three aspects:

 

• LinkedIn and themobile web

 

LinkedIn began to use HTML5 more and more to develop mobile Web applications.

 

• Now, with more Node. js

 

Node. js is widely used.

 

• "Responsive design" just doesn' t work

 

They believe that responsive web design is useful for simple and one-time websites, but it is not so good for apps or social networks.

-------- Gorgeous separation line

The following article describes how LinkedIn uses HTML5 to implement smooth and infinite scrolling and memory and Performance Optimization in iOS.

LinkedIn iPad: unlimited smooth scrolling with 5 HTML5 Technologies

Author: TrunalBhanse

Translator: Jiang Yujie

This is the second article in a series of blog articles. We will talk about the new iPad application on LinkedIn. In the first article, we talked about how to use HTML5 local storage to build an agile mobile experience. In this article, I want to talk about the challenges faced when implementing an unlimited page flip list.

What is "stream "?

At the beginning of the iPad project, we considered how to create a fascinating content consumption experience for users. We decided to display articles, network updates, and other similar content in the form of "streams": An infinite page flip interface. Here is the first page of the page stream:

Challenges of unlimited list on mobile devices

Compared with desktops, mobile devices have less memory and lower CPU clock speed. If you render a long list on an HTML page, you may be at risk of running a device crash. This makes building large HTML5 interactive applications on mobile devices a challenge. The Native technology provides UITableViewController to create a long, infinitely scrolling list. UITableView contains reusable UITableViewCells to optimize memory, performance, and response. There is no ready-made solution for HTML5. Therefore, we will implement one by ourselves!

Tip 1: remove images

UIWebView or mobile Safari have strict image restrictions. Our page stream is full of large images, so it will soon reach the upper limit. One option is to use HTML5Canvas to draw images without memory problems. However, we found that drawing very large images on the canvas was quite slow, so we had to adopt another method: When an image completely "streams" out of the screen, replace the "SRC" attribute of the img tag with another very small image. This ensures that the memory used for rendering large images is regularly released. In addition, we ensure that there is no error in introducing the empty src attribute of the image.

Tip 2: Hide the page

Releasing images does not reclaim enough memory to prevent crashes. Therefore, we set the visibility attribute of CSS to hidden to hide the independent page of the stream (Figure 2 shows the "hidden" page ). After this adjustment, we not only see more memory is recycled (so that the application will not crash), but also the rendering speed is faster, because the browser does not draw "hidden" pages on the interface.

Tip 3: delete a page

A hidden page can cover 80% of the cases. However, the remaining 20% still causes the application to crash! Let's go further and Start deleting unnecessary pages. As a side effect, if we delete the page on the left of the current page, the page stream will be moved left, and the user will lose its location. To maintain the scroll position, we had to replace the blank page with the same height and width when removing the page (that is, the DOM node) (the "placeholder" as shown in Figure 2 "). For example, if a user is browsing page 5th, we delete page 0th and replace it with a placeholder.

Using the above three technologies, our stream starts to look like the following scheme. As you can see in Figure 1, if the user is viewing page 3rd, the previous and next pages are fully loaded. When the user decides to flip the page forward or backward, he can see the fully displayed page. When the user tries to scroll, we start to load the image and render the page. It works perfectly on the iPad simulator, but on the actual device, you can see a reduction in rolling performance.

 

Figure 1
 

 

Figure 2

As shown in figure 2, when you flip to page 5th, page 0th and page 1st will be deleted, page 2nd will be hidden, and page 3rd will remove all images. At this point, you can continue to flip the page forward, and other pages will decide whether to remove the image, hide or delete themselves based on the distance between them and the visible page.

We have to use a variable-size "window" for different iPad versions ". For example, iPad1 has the least memory, so we have to give it a very small window:

[Html]View plaincopyprint?

1. GetConfig: function (){
3. // Default settings
4. Var config = {
5. Size: 3,
6. MaxVisibleOnOneSide: 1,
7. };
9. // Update the settings based on the device
10. If ($ isDesktop | $ native. isNative () & $ OS. ipad ){
11. // Check whether ipad1 or ipad2
12. If ($ isDesktop | $ native. getDeviceVersion ()> 1 ){
13. Config. size = 7;
14. Config. maxVisibleOnOneSide = 2;
15. }
16. }
17. Return config;
19. }

GetConfig: function () {// default setting var config = {size: 3, maxVisibleOnOneSide: 1,}; // set if ($ isDesktop | $ native. isNative () & $ OS. ipad) {// check whether ipad1 or ipad2 if ($ isDesktop | $ native. getDeviceVersion ()> 1) {config. size = 7; config. maxVisibleOnOneSide = 2 ;}} return config ;}

Tip 4: avoid scaling and box shadow

Based on our previous experience, we use two HTML/CSS optimization techniques to improve performance:

 

• You can use the width and height attribute specified in the html img label to prevent the client from scaling the image.
• Avoid CSS box shadow: It is very slow under WebKit

 

Technology 5: Reduce DOM nodes

After the above optimization, do you expect the application to never crash again? Wrong! During the test, the above technique makes the application program run longer, but it will crash after a while.

Based on the experience of the iPhone application, we know that keeping DOM nodes at least is the key to smooth scrolling and ensuring sufficient memory. With this in mind, we combine all the nodes used by the placeholder into a virtual node of the same size. The result is: no matter how many pages we slide, the page stream will not crash on any device! The final mechanism 3 is shown below:

Figure 3

Technical Implementation video

Here is a video of DOM behavior when the user slides over the page. On the left side, we load the page stream in the Chrome Window. On the right side, we use Chrome's developer tools to demonstrate how to add or delete nodes and fill in the deleted Webpage Through the width of virtual pages. Note how DOM nodes are kept at a constant number, and how UL's first li node ("virtual" node) how the size increases (you may need to watch the video in full screen mode ).

Failed attempts

We didn't get the correct results in the first place, so we had to list some failed attempts. We first used multiple UIWebViews to render a page and used UISwipeGestureRecognizer to flip the page. However, we soon realized that using multiple Web views for local applications is a bad way of memory and performance.

Then we tried a method similar to 3-Div. It works, but we are not satisfied with the performance of sliding pages. Sometimes if you are turning pages and rendering a page at the same time, a single-threaded UIWebView cannot be added to the page stream.

Thank you

Thanks to Akhilesh Gupta, aarthur ijayaram, AshitGandhi, KiranPrasad, and Ganesh srin.pdf.

In addition, thanks to Ryan for helping me record a video for this article.

Link to the original article: LinkedIn for iPad: 5 techniques for smooth infinite scrolling in HTML5

Reprinted Please note: blog from Jiang Yujie