Currently, many pages are using front-end wireless data template rendering, then in a bad situation speed, into a page, you see is not black and white is loading, it becomes black and white issue.
This problem occurs because basically boils down to the speed with static resources
1, css files takes some time to load, in the process of loading the page is blank. Solution: consider the front and inline css code.
2, the first screen no actual data content, and then wait for an asynchronous load data rendering result in a blank page. Solution: html rendering synchronized directly in the fold, and then a subsequent scroll asynchronous request data and the like and rendering html.
3, the first screen rendering inline js execution will be blocked pages. Solution: Try not to fold html code to place inline script. (From Xiang Song)
solution
The fundamental reason is the client rendered powerless, so the easiest way is on the server side, using a template engine to render all pages. Simultaneously
1 to reduce the file volume loading, such as compression html, js compression
2 js accelerate the speed of execution such as the common infinite scrolling page, you can use js to render something within a range of screen
3 provides some friendly interaction, such as providing some fake scrollbar
4 Using static files stored locally.