Recently doing a series of operational activities, pure html, css, js achieve. For the tool can only use a simplified version of zepto jquery. Since all things are hanging in the cdn. Cdn direct user requests file html like. And the page itself also exist in different states, a large number of page images, and the need to pre-load some of the data to change the view, and so the question for the first time really make this page a simple record of purely operational activities about it.
First, the structure of the deal for the page:
Because the page has a different status, change alone is not a small part. But the great length of the page changes. Displaying a corresponding page needs to be sent after a request is determined so active in certain states. In order to keep the page produce poor user experience, first load the loading state of a page. Use of the insertion node in the return way of the interface status of the request, The completed spliced page displays. In this event only the code into a js file. And put it in the head, so we should pay attention to the question of whether some of the dom node can be found. Page structures are generally loaded and run js file ====> $ (document) .ready ====> status acquisition request transmission ====> different states according to different string concatenation ====> characters sequence inserted into the corresponding node. This does not appear there was a display page. But the interface is more substantial issues of the page and then return to the state. Of course, this problem also has, is the need for a first screen loading, but such a process is no way. After all, all requests are ajax, and no backend template stitching, etc. auxiliary.
Second, for picture processing
Operational activities have a lot of pictures. Specific operations can refer to a variety of game activities page. The entire page stitched together by a variety of pictures. Such a picture display is very embarrassing. As the gap between speed it is likely to have a large blank page after loading out. This will require the use of images preloaded features. Because the browser can determine if the picture the same path, once loaded, it will not send the request again to get a new picture, but directly to the pictures in the cache. Then we can advance this way preload picture. Specific code as follows:
imgPreLoad (preImg); // preImg need preloaded image array function imgPreLoad (ARR) { arr.forEach ( function (Item) { the let I = new new Image (); i.src = Item; }) }
In addition, although such a process for the picture pre-loaded, but there will be problems loading time of the picture. In simple terms, this is only to solve the non-first-screen display image problem. If you just open it when the page is actually there is nothing useful. Because the picture will still be slow to load. Such a solution is for some special pictures extracted, in addition to the normal picture pre-loaded images, and then loaded on the first screen image to img.onload () method, when all the necessary image is loaded, again hidden loading of course this is also a problem that image is too large, speed is too slow, loading show is too long, but this is no way. I want to get the full show on the need to give up some efficiency, like as appropriate.
Third, the preloaded data page changes
Some data interface and the interface are separate status page. This will need to be separated. Such a data interface will have two, the first, to obtain the data needed when no user operation is rendered to the page, and the second is when the user operation is displayed on the page. This requires them to do differently. The first case needs to send a request code into the $ (document) .ready because we can not determine when the html will be finished loading. Unable to find the most likely acquisition dom element inserted, it must be placed in the appropriate position. The second case can be executed directly when loading the script of the acquired data into a global variable in their definition of when to use different data to generate a new dom node according to different requirements, it should be noted Do not add a node. After it was organized into a complete string added to it.
ps: also recorded a few minor problems, was only just heard, there is no detailed understanding of these.
A, $ (document) .ready and use window.onload problem
Note that this means that all the window.onload dom nodes, resource pages, all completely finished loading will run. This has a big problem. Because the first page of the screen display page, and various internal pop, buttons, prompts, and so on. We have a lot of pictures. In this case it is no reason to increase a lot of time to load. Page load out long ago but only images not loading up pages loading will always lead to progress, so do not use this.
Should use the $ (document) .ready, it is just a method of execution after the dom elements load, it will be placed before the window.onload method of execution.
Second, the browser-related knowledge
First, the browser is a single-threaded language. If js head into the head, it will wait until the end of the first js download and run behind the content to load it. So pay attention to the order of script and whether there is an infinite loop code, or code that takes a long time. If there is to recommend its tail into the body. Webworkers and so on ways to reduce or increase the appearance of such problems.
In addition to external resources Image resources it can be loaded in parallel. And that does not block execution of other browsers.