Shulou(Shulou.com)06/02 Report--

This article mainly explains the "web front-end hot update principle is what", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's train of thought slowly in-depth, together to study and learn "web front-end hot update principle is what" it!

Before the launch of H6, the only mechanism for browser applications to communicate with the server was the http protocol. Http is a stateless network protocol. The front end initiates a request to the server, and the server gives a reply, and the server cannot initiate communication to the client. This design is mainly designed to save bandwidth resources, and the client and server do not need to maintain a long connection.

Brief introduction to websocket Hot Update

In the early days, even if a browser was to be implemented by a communication tool (such as webQQ), because the server could not initiate communication to the client actively, the client could only set a timer to periodically initiate a request to pull messages from the server. Obviously, this polling method is a pig knife for performance.

H6 launched websocket in response to the situation, which gives web developers another choice to deal with complex scenarios. WebSocket is an independent TCP-based protocol, the front end and the server can establish a long connection, the client can push the message to the server, and the server can actively push the message to the client.

This article does not explain websocket in detail. If you are interested, you can leave your comments.

Thermal renewal principle

The web page of the browser establishes a long connection with the server through the websocket protocol. When the css/js/html of the server is modified, the server will send an updated message to the front end. If the css or html has changed, the web page executes js to directly operate the dom, and the local refresh. If the js has changed, the whole page has to be refreshed.

When js changes, it is impossible to judge the local impact on dom, so it can only be refreshed globally.

Why not mention the update of the image? if the image path is modified in html or css, then update html and css, as long as the image path is not wrong, then you have reached the path to update the image. If the image of the same path is replaced, you often need to restart the service.

In a simple web application, this process may only save the hassle of manually refreshing the browser, but in the responsible application, if you need several steps from the page entrance to get there, for example: login-> list-> details-> pop-up window, then local refresh will greatly improve debugging efficiency.

Case analysis

If you use the front-end development work environment built by gulp, you must be familiar with browserSync. Do you understand how it works?

BrowserSync is easy to use:

Varbs=browserSync ({

Port:5000,// service port

Notify:false

LogPrefix:'PSK'

Server: {

BaseDir:'_dev',// service path, that is, the path where page resources are stored

Directory:true

}

Does open:false// need to open the browser automatically?

}, function () {

/ / callback after startup

})

Thank you for reading, the above is "what is the principle of web front-end hot update" content, after the study of this article, I believe you have a deeper understanding of what the principle of web front-end hot update is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.