The front-end page is hot updated
Those who have learned about front-end performance optimization should know that the ultimate solution to speed up page loading is CDN, which is determined by the characteristics of BS architecture itself. No matter what front-end speed means, it will eventually return to the transfer of client files. In contrast, CS architecture does not have loading pressure, but the problem of CS architecture is that the update is not flexible. So is there a way to combine the advantages of the two architectures to find a balance between loading speed and update flexibility? This is one of the solutions discussed in this article: front-end hot update.
Solution overview
“Front end” and “hot update” these two words often appear together, rarely mentioned hot update is generally refers to a silent update APP, this way would quietly detect when users to use and download the incremental updates, when the user next time when you open the APP application updates automatically, thus the APP “update” the destruction of the continuity of hidden in action; Front-end page loading is equivalent to “full update” every time, if the front-end page can also use “local template”, it will greatly shorten the front-end loading time, and on this premise, we can also achieve a front-end template hot update mechanism, so as not to affect the real-time page update.
Application scenarios
Scenario 1: APP embedded pages.
For example, the home page of e-commerce apps often needs to be modified or skinned, so how to reduce the update cost becomes a big problem. Using the hot update scheme, we can use HTML to realize the home page of APP. The page content is stored in the form of template in localStorage, and the background silently updates the template, which will take effect automatically next time. In view of the activities of the skin has a certain timeliness, we issued in the form of patches, patch files stack effect the activities of the final template in the template, for the patch package we can load in advance and pre existing local, patches should contain its own session information, front-end time applying patches are in a cycle is detected. Finally, hot update pages can be achieved regardless of revision or activities, only the front-end version can be issued, without the participation of the APP end.
Scenario 2: Fast Web pages.
For Web pages, updating is not a problem, but loading is the biggest problem. If individual pages want to maximize the speed of page presentation, then this scheme can also be used as a means to speed up, but because all the code of the page will be stored in localStorage, so it is not suitable for large-scale use.
Demand for refined
Based on the above scenarios and requirements, the final thing we need to do is a “shell” page, the page has no specific business content, only to achieve hot update function, each load will first check whether there is a template in localStorage, if there is an immediate application of the template, then the page is displayed, if not, go to the next step; In the next step, the system requests the template management interface to obtain the latest template information. If the template information is available on the local PC, the system compares the version of the template with that of the local PC. If the version is the same, the cache matches, and the process ends. If the local version is not the latest, obtain the latest template and save it to the local PC. The latest template will be applied when the next page is loaded. The process ends. The other case is that there is no template in the first load, so the latest template is obtained, saved to the local, and the template is applied, and the process ends.
The previous section describes the update process of a stable template. After the stable template process is complete, the patch template update process is started. If yes, check whether the current time matches the effective period of the patch. If yes, apply the patch. If no, go to the next step. In the next step, obtain the latest patch template and save it to the local PC. Then, check whether the current time matches the validity period of the latest patch. If yes, apply the template.
The complete process is shown in the figure:
Implementation details
The interface data
According to the functional requirements, we need the interface to return stable template information and active template information, which respectively contain ID and URL fields. Id is used for version verification, and URL points to the download address of template file. Active template information also needs to provide the cycle field to define the effective period of active template. In contrast, we also need the interface to return the current time of the server, which is used to match the validity period of the active template. The final complete data structure is as follows:
{ "status": "Y", "data": { "stableVersion": { "id": "17", "url": "" }, "activeVersion": { "id": "18", "url": "" and" cycle ", "2018,02,10,02,01-2018"}, "today" : "2018,02,06"}}Copy the codeThe local data
The local data is roughly the same as the interface data, except stableVersion and activeVersion information. Template is added to the ID and URL field to save the template string. The complete local data structure is as follows:
{ "stableVersion": { "id": "17", "url": "", "template": "" }, "activeVersion": { "id": "18", "url": "", "cycle": "2018,02,01-2018,02,10", "template": ""}}Copy the codeTemplate file
The front page is made up of three languages, but we want to get the template file with only one request, so the template is a text file containing HTML/CSS/JS, and the label format is to keep the ordinary HTML file writing method. Considering the implementation of the template application part, we need to agree on the label writing method. For example, CSS must be wrapped with
tags, and JS must be wrapped with tags. In this way, it is easy to extract the various code segments with regular expressions.
A template application
As mentioned in the previous section, you can use regular expressions to get the three language codes, and then insert them in the order CSS > HTML > js into the page. The only difference is that the HTML code is innerHTML into the body element. In the application order, CSS is placed before HTML to avoid redrawing, and JS is placed after HTML to be able to manipulate the DOM within JS.
Activity template is defined as a patch, but the template form with stable template is the same, the application is exactly the same way, just because the template activity template in stable after application, so the activities of the CSS and js will affect the page in the form of patches, demand for ordinary in skin need only CSS and js is enough, But if you want your HTML to change as well, depending on how HTML is overridden, you need to provide a complete HTML code in the activity template to modify the HTML.
Results show
Example shows
The practical application
The homepage of a health online shopping APP is realized with web-OTA scheme, which can cope with daily iterations with ease.
Afterword.
The process of the whole scheme is trivial, but the implementation process is very simple, the deployment cost is not high also, just need to back-end template management rise, have to do is to provide an updated interface, but still have a little problem the update mechanism, that is when there is a new release when the user is not the first time to see the new version, must visit next time to update to the new version, This is a small price to pay for silent updates, but if you really care, it can be easily resolved by simply prompting the user to restart/refresh when a new version is detected remotely.
Compared to HTML5’s manifest caching solution, I think it is more flexible, but the shortcoming is that it does not support static file fragmentation management, but it is not complicated to extend this feature, just a few more fields in the template information.
The code is here, more details to see the code itself: github.com/tower1229/W…
Front-end road original technical article, reproduced please indicate the source: refined-x.com/2018/02/07/…
If you have any questions about the content of this article, please leave a comment or scan the qr code below to join the “Front-end road – Knowledge Planet” paid questions.
