JavaScript client and server-side communication

High-performance network communication includes the following aspects: Choosing the right data format and matching the transmission technology.

First, the data format

The data formats used for transport are:

1) HTML, only for specific occasions, the transmission of large amounts of data, but it can save the CPU cycle of the client,

2) XMl, relatively cumbersome and slow to parse;

3) JSON lightweight, fast parsing speed

4) The custom format for character segmentation is very lightweight and fast when parsing a large number of datasets, but requires writing additional server-side constructs and parsing on the client. When creating a custom format, one of the most important decisions is what delimiter to use, ideally it should be a single character, and should not exist in the data, the first few characters of the ASCII character sheet in most of the service-side language can work and easy to write, of course, can also be used as the promise of split. such as \u0001,\u0002 and so on.

Second, the client requests data from the server

There are five common techniques for requesting data from the server.

1) XMLHttpRequest (XHR)

2) Dynamic Script injection

3) IFRAMEs

4) Comet

5) Multipart XHR

Of these, comet and iframes are used in extreme cases where there is not much to do with the introduction.

2.1 XHR

This is the basis of Ajax, used a lot, it provides the most complete control and flexibility, you can set or modify the HTTP request header, and will receive all the data as a string, which may reduce the parsing speed.

2.2 Dynamic Script Injection (JSONP's principle, unlike SQL injection)

Dynamic script injection allows for cross-domain requests and local execution of JavaScript and JSON, but the interface is not secure, and the following is a case of dynamic script injection. 、

Dynamic script injection provides a limited amount of control, cannot set the requested header information, and parameter passing can only be performed in Get mode, not post. You cannot set the request time-out processing or retry. In fact, even if you fail, you don't necessarily know. You must wait for all data to be returned before you can access them.

It is also important that the response message be the source code for the script tag, that it must be executable JavaScript code, that it cannot use pure XML, pure JSON, or any other form of data, regardless of the format, which must be encapsulated in a callback function.

JS (datastuct.js) code as the response message:

function Callback (name,age) {    return'{' name ': Name, ' age ':' Age} ' }

The code for the invocation section is as follows:

//Dynamic Script InjectionvarScriptelement=document.createelement ('Script'); Scriptelement.src=". Datastruct.js";d Ocument.getelementsbytagname ('Head')[0].appendchild (scriptelement);varData=callback (' Bobo '); Console.log (data);//Output {"name": "Bobo", "Age": "+"}Console.log (Json.parse (data). Name);//Output Bobo

With this technique, the response message executes directly as a JavaScript without further processing. As a result, it is the fastest way for clients to get and parse data, but this technology does not implement permissions and access control, so it takes extra care to request data from those uncontrollable servers.

2.3 Multipart XHR

Multipart XHR is a new technology that allows clients to transfer multiple resources from the server to the client with only one HTTP request, in which any data type can be sent as a string by JavaScript. By wrapping the resources (CSS files, HTML fragments, JavaScript code, or Base64 encoded pictures) in the server into a long string that is separated by the original characters of the two parties, it is sent to the client. The JavaScript code then processes the long string and resolves each resource based on its Mime-type type and the incoming "header information". Take pictures as an example, the picture is not converted from Base64 string to binary, but is created using the Data:url method, and the Mime-type is set to Images/jpg.

The specific implementation code here tentatively.

The biggest disadvantage of Multipart XHR is that resources obtained in this way cannot be cached by the browser. Therefore, the page contains a lot of resources that are not available elsewhere (so there is no need to cache), especially when it comes to images. After all, HTTP requests are one of the biggest bottlenecks in Ajax, so reducing the number of requirements also makes the entire page much more performance-boosting. (Feel good for base station patrol system picture performance improvement)

3. Clients only need to send data to the server

If you only need to send data to the server, there are two widely used technologies that do not require the server to return data: XHR and beacons.

3.1 XHR

XHR not much to say, it can be used to send data to the server, but also to request data to the server.

3.2 Photo Beacons (beacons)

　　

JavaScript client and server-side communication