Application: how many comments user names already exist,
partial asynchronous refresh
1. The relationship between domain name ip and port
To obtain the domain name, first read the hosts file, read the file of the mapping relationship between the ip and the domain name, if there is no mapping relationship, go through the DNS domain name resolution server, query the corresponding ip address, return the address to the personal computer, and use this ip to query the route through the telecommunications router Table, find the port of the QQ server, distinguish the port such as chat, web, email service
www.baidu.com: 80 web service
2. Agreement
HTTP, HTTPS Hypertext Transfer Protocol
FTP File Transfer Protocol
SMTP Simple Mail Transfer Protocol
In the HTTP protocol, you need to roughly understand: request header, response header, request body, and response body.
Communication protocol is the rules agreed in advance when computers communicate
3、 PHP
Both the declaration of variables and the use of variables need to use the $ symbol for
string splicing.
The browser cannot parse the php
echo followed by only the strings
print_r and var_dump to output more complex
echo json_ encode($arr);//convert the array to a string in json format
Asynchronous mechanism, that is, single thread plus event queue
settimeout only does one thing, puts it in the queue, and then executes it down.
The event queue stores callback functions, including some on functions
Asynchronous, synchronous, there is no following steps.
XML is too large, slow in transmission, too much metadata, and inconvenient to parse
4. Cross-domain
Same protocol, domain name, and port number, same-origin policy. Ajax can get data
, so do we need to deal with the situation of getting non-same source data? The answer is yes. Because the front-end interface access to non-same-origin servers is very common, such as obtaining weather data in the front-end interface, the weather data must exist on other people’s servers, if we can’t use ajax. for access, then what can we do about it? Here you need to use cross-domain.
Ajax is to access the data of your own server, and cross-domain is to access the data of other people's servers.
The src attribute of script is not restricted by the same-origin policy
. The essence of cross-domain ①Introducing external js②Introducing external php③Create script dynamically
① 
②
③
More flexible in the code file
5、 jQuery
https://www.w3school.com.cn/jquery/ajax_ajax.asp The
last line can be omitted
The dataType of the ajax method of jQuery will use the data under the same source address in the case of text xml json.
If it is jsonp, the script will be dynamically created.
6. Three situations
1 Four steps of Ajax on your own server
2 Third-party interface jsonp format to dynamically create script cross-domain
3 Third-party interface json format
Understand, this is the back-end
JSON is a format for transmitting data (using objects as a template, which is essentially an object, but the purpose is different, the object is for local use, and json is used for transmission) json must use double quotation marks. The
transmission is actually a string
JSON.parse(str); string — > json
JSON.stringify(str); json — > string
The eval() function can be used to execute a piece of JS code in the form of a string and return the execution result
If the string executed with eval() contains {, it will treat {as a code block.
If you don’t want to parse it as a code block, you need to add a () before and after the string
in case the user passes
Reduce efficiency in two cases of
reflow rearrangement (more):
delete dom node, add
dom node width and height change, position change, display none—> block
offsetWidth offsetLeft
repaint repaint (less): such as font color (font width and height) Is rearrangement)
Before js is loaded synchronously,
why can't the download execution of js and HTMLcss be parallel? js will modify html and css.
Why is js single-threaded? Assuming multi-threading, one thread adds nodes, and one thread deletes nodes. The
mobile phone is left blank and loaded with js
Load js asynchronously and download htmlcss in parallel
. Disadvantages of js loading: The loading tool method does not need to block the document. If the js loading is too late , the page efficiency will be affected. Once the network speed is not good, the entire website will wait for the js to load without subsequent rendering. .
Some tools and methods need to be loaded on demand, and then loaded when used, there is no need to load them.
Three schemes of javascript asynchronous loading
1. Defer asynchronous loading, but it will not be executed until all the dom documents are parsed (the tree is built, it must happen before the page is loaded). Only IE can be used. Defer has the meaning of deferring. The
attribute name is equal to the attribute value. Just write the attribute name.
2. Async is loaded asynchronously, executed after loading, async can only load external scripts, and cannot write js in the script tag. W3C. Asychoronous
1 and 2 do not block the page when they are executed.
3. Create a script, insert it into the DOM, and callBack after loading. function asyncLoaded
js loading timeline
1. Create a Document object and start parsing the Web page; at this stage document.readyState ='loading';
2. When encountering link external css, create a thread to load, and continue to parse the document;
3. When encountering script external js , And there is no async, defer set, the browser loads and blocks, waits for js to load and executes the script, and continues to parse the document;
4. When encountering script external js, and set async, defer, the browser creates a thread and continues to parse Document;
for async attribute scripts, the script is executed immediately after loading is completed (document.write() is prohibited asynchronously; in addition, it can eliminate the document flow after the entire document is loaded, or even delete them all)
5. Encounter img, etc., first parse the dom structure normally, then the browser asynchronously loads the src, and continues to parse the document;
6. When the document is parsed, document.readyState ='interactive';
7. After the document is parsed, all scripts with defer will be Follow the order. (Note the difference between defer and async);
8. The document object triggers the DOMContentLoaded event, which also marks the transition of the program execution from the synchronous script execution stage to the event-driven stage; ↓After the event dom is parsed, the function body
is executed only on addlistener.
9. When all async scripts are loaded and executed, and after the loading of img etc. is complete, document.readyStste ='complete', the window object triggers the load event;
10. From then on, the user input, network events, etc. will be processed in an asynchronous response mode;
①Create Document object ②Analyze ③Load execution
Print out that loading
interactive is parsed and form a dom tree, but it will be interactive after the end, and the render tree is only half
complete.
The two or three lines of the console happen
in parallel . What is the benefit of writing the js code at the bottom? https://www.jianshu.com/p/454f63169bff
And window.onload waits until everything is loaded before executing
Asynchronous JavaScript & XML
does not need to refresh the current page
XmlHttpRequest object type API
onload only has 4, onreadyState has 2, 3, 4
