The present invention relates to web page rendering, and more specifically, to optimization for rendering web pages.
Nowadays, Web 2.0 is becoming more popular, and browsers are facing more difficulties in rendering entire web pages, especially complex Web 2.0 application pages. Current rendering mechanisms of web browsers typically are not well suited for Web 2.0 single page applications (SPA), which typically include lots of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript together.
Traditional web applications can cause disruption in user experience and workflow. For example, traditional web applications work by reloading the entire web page. In order to advance through a workflow, the user interacts with page elements (such as hyperlinks and form submit buttons) that cause the browser to issue a request to the server for a completely new page. Continual page redraws disrupt the user experience because the network latencies cannot be hidden from the user. There is typically a perceivable transitional jolt from one page to the next. Data of the next page is retrieved from the server, the old page is unloaded, and the new page is rendered to screen. The complete page reload that occurs on each user interaction results in unnecessary re-transmission of data over the network. This can make the overall performance of the website slower.
A single page application (SPA), also known as single page interface (SPI), is a web application that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. SPAs address the above issues by requiring no page reload by the browser during an application session. All user interaction and changes of the application state are handled in the context of a single Web document. The user experience becomes more continuous and fluid, and network latencies can be hidden more easily.
In a SPA, either all necessary code (HTML, JavaScript, and CSS) is retrieved with a single page load, or partial changes are performed which load new code on demand from the web server, usually driven by user actions. The page is not automatically reloaded during user interaction with the application, and control is not transferred to another page. Updates to the displayed page may or may not involve interaction with a server. Thus, compared to normal Web applications that still use URL to switch between various functions and pages, the single page application achieves transferring of Web application programs from server side to client side, i.e., to browsers. This mechanism brings an additional advantages of cost reduction in servers, in addition to improvements in interactivity and response speed that can be perceived by users, and lower bandwidth occupancy between servers and clients.
However, since for SPA the Web application is transferred to client side, i.e., to a browser, the performance of the browser becomes important. For example, time cost on the first time rendering for a SPA web page is large, and frequent reflow and repaint via user behavior with respect to the SPA web page will bring bad performance.
Currently, there are several commonly used ways to improve the performance of a browser, one of which is to perform a reflow only when some reflow condition is matched, instead of performing the reflow unconditionally.