Individuals summarize the memorization scheme of the eight-legged text
URL to the displayed web page
- The browser parses the URL, obtains the protocol, hostname, port number, path and other information, and converts the hostname to the corresponding IP address through a DNS query.
- The browser establishes TCP with the server, performing three handshakes.
- The browser sends an HTTP request to the server, containing the request method, request header, request body and other information.
- The server receives and processes the HTTP request, and returns the corresponding HTTP response according to the path and parameters of the request, including status code, response header, response body and other information.
- The browser receives and parses the HTTP response and determines the result and type of the response based on the status code and response header.
- The browser renders and displays the response body based on its content. If the response body is an html document, the browser generates a DOM tree and a CSSOM tree, and then generates a rendering tree for layout and drawing. If the response body is a js or css file, the browser executes the js code or applies css styles. If the response body is an image or other resource, the browser downloads and displays it.
- The browser will choose to close or maintain the TCP connection for four waves, depending on the situation.
DNS query: local name servers - >host file - >root name servers - >top level name servers query - >permission name servers query. (can be a recursive query or an iterative query)Smart note: localhost root top-level permissions
handshake
- The client randomly initializes the serial number seq=x, while setting the SYN flag bit to 1 to indicate a SYN message. and sends it to the server
- After the server receives the SYN message from the client, it randomly initializes the serial number seq=y, confirms the answer number ack=x+1, and sets the SYN and ACK flag bits to 1. It sends it to the client.
- The client receives the message from the server, ack = y+1, seq = x+1. and sends it to the server
seq=x，SYN=1；`` seq=y,ack=x+1，SYN=ACK=1; `` ack=y+1，seq = x+1。
Why not twice or four times?
- If there are only two handshakes, then there is no guarantee that both parties will receive data. For example, if the client sends a connection request and does not receive a connection confirmation from the server due to network latency or other reasons, then the client does not know whether the server agrees to connect or not, nor does it know the initial sequence number of the server. If the client starts sending data at this point, it may cause the server to fail to process or discard the data correctly.
- If there are four or more handshakes, then time and resources are wasted. For example, if after the second handshake the server sends an additional acknowledgement to the client, then that acknowledgement is redundant because the client has already acknowledged the server's initial sequence number in the third handshake. The extra handshake increases network burden and latency, and takes up cache space on both sides.
Four waves.
- The client sends SYN=1 to the server, after which the client enters the FIN_WAIT_1 state.
- The server sends an ACK to the client, and then the server enters the CLOSED_WAIT state. The client receives the ACK reply message from the server and then enters the FIN_WAIT_2 state.
- After processing the data, the server sends a FIN message to the client, after which the server enters the LAST_ACK state.
- When the client receives a FIN message from the server, it responds with an ACK answer and then enters the TIME_WAIT state.
After the server receives the ACK reply message, it enters the CLOSED state, and the server has closed the connection.
After a period of 2MSL, the client automatically enters the CLOSED state, and the client closes the connection.
computer network hierarchy model
- Physical Layer: Transmits bit streams over physical media (twisted pair, optical fiber, and radio waves) and defines interface standards, electrical characteristics, and coding methods of physical devices, etc. IEEE
- Data link layer: transmits frames between neighboring nodes and provides error control and flow control. ppp, SLIP
- Network layer: sends datagrams from source host to destination host and provides routing and congestion control. ip, icmp, arp
- Transport layer: transport message segments, communication between processes. tcp and udp
- Session layer: session establishment, session authentication, disconnected transfer. smtp, dns.
- Representation layer: data conversion, encryption, compression. TELNET, SNMP
- Application layer: user interface interaction. ftp, http, nfs, ssl
aforementionedOSI seven-layer model，TCP/IP five-layer model: the application layer, the representation layer and the session layer are merged into the application layer; TCP/IP four-layer model: the physical layer and thedata link layermerge into network interface layer (NIL)
Advantages and disadvantages of TCP and UDP communication
- Advantages of TCP: Reliable and stable, TCP establishes a connection through three handshakes, and ensures that the data are undifferentiated, not lost, not duplicated, and arrive in order through confirmation, retransmission, windowing, and congestion mechanisms.
Disadvantages: low efficiency, high consumption of system resources, easy to be attacked. Connection-oriented can only be point-to-point communication. - UDP Advantages: Efficient and secure. Message-oriented, allowing one-to-many and many-to-many communication.
Processes and threadsThe difference between adding a bit of co-programming
- Resources: Processes are the basic unit of resource allocation, while threads are the basic unit of operating system scheduling and execution. Processes have their own separate address space and resources, while threads share the resources of the process to which they belong, but have their own stack and local variables.
- Overhead: The creation and destruction of processes require applying for or releasing resources from the operating system, which involves saving and restoring contexts, and has a higher overhead. Thread creation and destruction only need to be done in user space, involving partial context switching, with less overhead.
- Communication: Inter-process communication requires the use of IPC mechanisms provided by the operating system, such as pipes, signals, and message queues. On the other hand, threads can directly read and write data in the same process, only synchronization control is needed.
- Stability: processes are isolated from each other, a process crash will not affect the operation of other processes; threads are interdependent, a thread crash may lead to the termination of the entire process.
- A concatenation is a user-state lightweight thread, whose creation, scheduling and destruction are controlled by the programmer and do not require operating system support. Concurrent threads are independent of each other, and the crash of one concurrent thread does not affect the operation of other concurrent threads.
The process of process switching
- Saves the context of the currently running process, including program counters, stack pointers, registers, kernel data structures, and other information, so that execution can be resumed next time.
- According to the scheduling algorithm a process in the ready state is selected as the process to be switched.
- Restores the context saved in the first step, including information about program counters, stack pointers, registers, kernel data structures, and so on.
- Transfer control of the CPU to the selected process to begin execution.
Inter-process communication methods, threads have more global variables
- Pipeline: Half-duplex communication method, data can only flow in one direction between parent and child processes.
- Named Pipes: have pathnames associated with them and can communicate between arbitrary processes.
- Message Queue: A message chain table stored in the kernel that supports communication between multiple processes.
- Signals: Enabling Mutual Exclusion and Synchronization between Processes
- Shared memory: multiple processes have direct access to the same physical memory space.
Statement http
- HTTP, full name HyperText Transfer Protocol, that is, the HyperText Transfer Protocol. It is one of the most widely used network protocols on the Internet
All www files must adhere to this standard. - http features: connectionless and stateless, built on top of the TCP/IP protocol, default port number 80, divided into two parts: request and response.
- Requests: GET, POST, PUT, DELETE
- Response: 200 OK, 301 Permanent Redirect, 302 Temporary Redirect, 304 Unmodified, 400 Client Syntax Error, 401 Unauthorized, 403 Forbidden, 404 Not Found, 500 Internal Server Error, 503 Temporary Server Error
- Disadvantages of http:Communication is in clear text and the content can be eavesdropped.
The identities of the communicating parties cannot be authenticated and identities may be subject to disguise.
The integrity of the message could not be verified. - https can be simply understood as: https = http + encryption + authentication + integrity protection.
- Integrity Protection: Encrypts the hash value (hash) of the data and then appends it to the transmitted data. The receiver decrypts and then verifies that the data corresponds to the hash value.
- Encryption: SSL/TLS uses public key encryption and private key decryption to protect the confidentiality of data.
Process: S sends a public key to C, C encrypts a randomly generated symmetric key with the public key and sends it to S. S decrypts this symmetric secret key with the original private key, after which C and S use this symmetric secret key to encrypt and decrypt the data.
What versions of http are available? What new features have been added to each version?
- HTTP 0.9: is the first version of the HTTP protocol and is now obsolete. The composition is simple, only GET requests, and does not support request headers, only plain text.HTTP 0.9 has a typical statelessness, each transaction is processed independently, and the connection is released at the end of the transaction.
- HTTP 1.0：
Introduced request methods, GET, HEAD, POST, began to support the client through the POST method to submit data to the Web server
Content negotiation was introduced to allow the client and server to negotiate the most appropriate content format, such as language, character set, encoding, etc.
Introduced status codes, header fields, short connections, and caching mechanisms. - HTTP 1.1：
Introduced request methods, OPTIONS, PUT, DELETE, TRACE, CONNECT methods
A pipeline mechanism was introduced to allow the client to send the next request before receiving the previous response, further reducing network latency.
Chunked transmission coding was introduced to send content in multiple chunks, each containing its own size information.
Improve the caching mechanism by adding some new features of cache, introducing entity tags, generally known as e-tags, and adding a more powerful Cache-Control header.
Introduced persistent connections, introduced virtual hosting: multiple different domain names on the same IP address and port - HTTP2.0
Binary framing was introduced, where information is split into smaller frames and encoded in binary, thus reducing the complexity and overhead of message parsing.
Introduced multiplexing to send and receive multiple requests and responses on the same TCP connection at the same time
First-part compression is introduced, where the header fields of requests and responses are compressed by the HPACK algorithm.
With the introduction of server push, the server can proactively send data before the client requests it, preloading some resources that the client may need.
Prioritization and flow control are introduced, i.e., clients and servers can set priorities for different requests, allowing important requests to be processed first, while the speed of data flow can be controlled to avoid congestion and waste. - HTTP 3.0
HTTP header compression using QPACK algorithm improves coding efficiency and compression ratio.
Using the QUIC protocol instead of TCP, it realizes unordered, concurrent byte stream transmission and solves the queue head blocking problem.
0-RTT handshake: allows the client to send data on the first request.
WebSocket
- Real-time: WebSocket allows the server to actively push data to the client, realizing real-time communication without the client initiating the request.
- Full-duplex communication: WebSocket allows the client and server to send and receive data at the same time, realizing true two-way communication.
- Lower Latency: WebSocket has lower latency due to the fact that it maintains a long connection after the connection is established, reducing the overhead of connecting and closing.
- Lower Latency: WebSocket has lower latency due to the fact that it maintains a long connection after the connection is established, reducing the overhead of connecting and closing.
- Cross-domain support: WebSocket supports cross-domain communication without the restriction of same-origin policy.
Strong Cache and Negotiated Cache
- Strong Cache: loads resources directly from the local cache when the cache has not expired. Fields include Expires (HTTP/1.0) and Cache-Control (HTTP/1.1)
- Negotiate cache: if the local cache has expired, send a request to ask the server if there is any update to the resources; the server determines this based on Last-Modified or ETag, if there is no update, it returns 304 Not Modified status code to continue to use the local resources, otherwise, it returns 200 status code and the new resources.
ARQ protocol
- Automatic Retransmission Request Protocol, is a protocol used to achieve reliable data transmission. It achieves reliable information transfer on top of unreliable services by using two mechanisms, acknowledgement and timeout. If the sender does not receive an acknowledgement frame within a certain period of time after sending it, it usually retransmits it.
- Stop Waiting ARQ Protocol: It means that the sender stops sending every packet and waits for an acknowledgement from the receiver. If the sender does not receive an acknowledgement within the timeout period, it retransmits the packet. This protocol is simple and easy to implement, but the channel utilization is low.
- Continuous ARQ protocol: It means that the sender can send multiple packets in succession without having to pause and wait for the other party's acknowledgement after each packet. This improves channel utilization, but also increases complexity and overhead. Consecutive ARQ protocols are subdivided into fallback N-frame ARQ protocols and selective retransmission ARQ protocols.
- Fallback N-frame ARQ protocol: If a packet is wrong or lost, it is discarded, along with all subsequent packets. Selective retransmission ARQ protocol: if a packet is wrong or lost, the correctly received packets after that packet are cached, and a separate selective acknowledgement is sent for each correctly received packet.
Common types of attacks CSRF, XSS, DDoS, clickjacking, man-in-the-middle attacks, DNS hijacking
- CSRF: users do not exit website A, visit website B in the same browser, website B carries a cookie and sends a request to website A to get user information, and website A responds to the request based on the cookie. Solution: The server performs same-origin detection, sets http-only: true, and verifies Token.
- XSS: Stored, Reflected, DOM: Stored: malicious code is submitted to the server; Reflected: malicious code is placed in the URL; DOM: DOM structure of the page is modified by malicious scripts. Solution: Encoding user input, checking and filtering special fields, protecting cookies.
- ddos: Multiple devices send a large number of requests to the target server, resulting in the target server not being able to provide services normally or crashing. Solution: Limit the frequency of ip access, use load balancing and caching, use third-party defense services such as CDN and cloud firewall.
- Clickjacking: steal user information by covering the target website with transparent iframes or other clickable elements to trick users into clicking. Solution: Set X-Frame-Options response header (DENY, SAMEORIGIN, SAMEORIGIN) whether to allow the iframe of other web pages to be displayed, js to detect whether other web pages are nested, and choose to jump out or prompt users.
- Man-in-the-middle attack: Intercept communication information between the user and the target website to obtain sensitive user information or tamper with data. Solution: HTTPS protocol, avoid using public wifi.
- DNS hijacking: tampering with DNS servers or local hosts file, so that the domain name accessed by the user is resolved to another ip address, thus accessing the fake website. Solution: Always maintain the local hosts file manually and use a reliable DNS server.
JavaScript event loop mechanism
- js is single-threaded, if you encounter asynchronous tasks, such as setTimeout, Promise, Ajax, etc., they will be put into a task queue, waiting for the current synchronous task execution is complete, and then according to certain rules from the task queue to remove the asynchronous task execution. This process is the event loop.
- When the synchronization code finishes executing, the event loop checks the microtask queue and finishes executing it in turn, then it checks the macro task queue and finishes executing it in turn.
- Macro tasks include setTimeout, setInterval, Dom events, setImmediate, requestAnimationFrame, I/O, UI rendering, etc. Micro tasks include Promise, async/await, MutationObserver, etc.
The JavaScript new process
- Create an empty simple JavaScript object (i.e. {});
- Pointing the prototype of this empty object to the prototype of the constructor, i.e. setting theproto Attributes;
- Passes this empty object to the constructor as the context for this and executes the code in the constructor;
- If the constructor does not explicitly return an object (returning a basic type won't work either), return this empty object, otherwise return the object returned by the constructor.
say sth.Chromeprocess architecture
- Browser process: responsible for interface display, user interaction, sub-process management, as well as providing storage and other functions.
performance optimization
- Before visiting the site:
(1) Push resources: Push page resources such as JS, images, multimedia files to the client/browser in advance.
(2) Preload: prefetch (possible resources), preload (necessary resources), prerender
(3) Pre-request AJAX: Get the ajax data needed for the next jump page in advance, and cache it to localstorage. - Loading process:
(1) Query strong cache: service worker, strong cache
(2) Resolve the dns:
(3) Establishing tcp links: http1.1 persistent links, http2 multiplexing
(4) Send request: wizard map, disk cache negotiation cache, small image base64 exemption request
(5) Parsing html: css on top, js on the bottom to avoid blocking
(6) Build a rendering tree: reduce the number of DOMs and nesting levels, reduce redrawing and rearranging, lazy loading.
(7) Running JS: streamlining code, code splitting, tree shaking - Page runtime:
(1) Virtual scrollbars to cope with infinite loading
(2) Throttling and anti-dithering
(3) Memory: avoid global variables, avoid closures, manual reclamation (obj=null)
Homology strategies and cross-domain /discuss/514959073205370880
- Any one of the domain name, protocol, and port number is different is cross-domain.
- Resolve cross-domain: JSONP (script tags can load resources across domains), CORS (Cross-Origin Resource Sharing, server-side response header "Access-Control-Allow-Origin"), proxy servers, WebSocket protocols are not subject to the same-origin policy, postMessage
XMLHttpRequest and fetch difference /weixin_43073401/article/details/132001688
- Usage: xhr usage is more complex, in order to create objects, set request attributes, listen for state changes, send requests; fetch is simpler, just call the fetch function and pass in the arguments
- Return Value: xhr returns an xhr object, get data via responseText or responseXML; fetch returns a Promise object, get data via () or ().
- Cross-domain requests: xhr cross-domain needs to set withCredentials to true, and server-side needs to set headers that allow cross-domain requests. fetch does not send cookies by default, and can set credentials: 'include' to carry cookies. Cookie: 'omit' will not carry a cookie, 'same-origin' will carry a cookie.
- Error handling: xhr can handle errors through events such as onerror and onreadystatechange; fetch needs to manually check the ok attribute of the response to handle errors
- Compatibility: xhr supports a wide range of browsers, including old and old browsers; fetch is a new feature of ES6, and does not support Internet Explorer (except Edge) and some older browsers, but it can be made compatible by polyfill.
Loading js asynchronously https:///article/
- Add async attribute to script tag: load the script asynchronously and execute it as soon as it finishes loading, the order of loading is not fixed.
- Add the defer attribute to the script tag: the script is loaded asynchronously and executed after the document is parsed, in the order in which it appears on the page.
- JavaScript Dynamic Creation
Session, Cookies and Token /discuss/515115466998734848
- Session is a server-side session state management mechanism, the first time you access the server will create a unique session id returned to the client via Set-Cookie, stored in the server memory or database to occupy server resources.
- Token is a token for authentication and authorization that is generated by the server to be sent to the client and does not depend on the server's session storage.
- Cookies are text files stored in the browser. Subsequent requests carry the appropriate cookie information, and because they exist on the client side, there is a risk of tampering and hijacking.
- cookie attributes: name, value, domain, path, expires or max-age, secure (HTTPS), HttpOnly, SameSite: ("Strict", "Lax " or "None").
What's New in ES6 and Beyond
- ES6: lets, const, arrow functions, template strings, deconstructed assignments, extension operators, default parameter values, classes and inheritance, Promise, Set and Map, Symbol
- ES7: array includes, exponentiation operator (**)
- ES8: async/await, values/entries, padStart/padEnd, allow commas at the end of function argument lists, ()
- ES9: asynchronous iterators, (), Rest/Spread properties, regular expression named capture groups/reverse assertion/dotAll patterns
- ES10: flat flattening, flatMap mapping arrays, trimStart/trimEnd,,(), JSON Superset superset,() enhanced formatting transformations,() more stable,() reworked
- ES11: optional chain operator (?...) , null merge operator (???) , dynamic import (), BigInt, globalThis, and for in structures.
- ES12: replaceAll,, Logical assignment operator ?? =, &&=, ||=, WeakRef(()), numeric underscore separator, ,
- ES13: class private methods and fields (# prefix), new .at() method on indexable data, (object, property)
Difference between require and import:
- import is ES6 syntax and require is commonJS syntax.
- Import file types: import can only import ES6 modules or use tools such as Babel to convert to ES6 module code, while require can import CommonJS modules, AMD modules, UMD modules and built-in modules and other types of modules.
- Variable lifting: the import statement is executed statically (import() is executed at runtime and imported dynamically) and creates a local scope inside the module and does not variable lift, so you need to place the statement at the top of the file; the require function is executed dynamically, which means that it is executed at runtime and can variable lift.
- Export: export xxx or export default {} for import, and = {} for require.
- Import content: require requests the entire package object, import requests only the parts of the module that are needed;
Front-end storage solutions for browsers
- Cookies: Cookies can be used to store small amounts of data and have a certain expiration time, but they are not suitable for storing large amounts of data since they are carried with every request.
- Web Storage (localStorage and sessionStorage)
- IndexedDB: is a client-side database that can store large amounts of structured data in the browser. It provides SQL-like query functionality and the data can be persisted on the client.
- Cache Storage: part of the Service Worker, used to cache data from network requests, enabling offline access and improving application performance.
- WebSQL (deprecated): is a solution for using SQL databases on the client side, but is deprecated and not recommended.
js design patterns
- Singleton pattern: ensures that there is only one instance of a class and provides a global access point. Used to manage global state, configuration, etc.
- Observer Pattern: defines a one-to-many dependency relationship, when the state of an object changes, all objects that depend on it will be notified and automatically updated.
- Publish-Subscribe Pattern: decouples Publisher and Subscriber based on the Observer pattern, mediated through a message center.
- Strategy pattern: a function has multiple options to choose from, encapsulate each option and make them interchangeable. (Extraction of public logic)
- Proxy Patterns: Provide a proxy for other objects to control access to this object. Protected Proxy, Virtual Proxy, Cached Proxy
- Iterator pattern: provides a way to sequentially access the elements of an aggregated object without exposing the internal representation of that object. Such as js's forEach, map, some, etc. (Iterator and Generator)
- Adapter pattern: to solve the problem of interface incompatibility between two interfaces/methods.
- Hedonic pattern: a large number of similar objects, extract common part of the attributes as internal state, other attributes as external state. (Extraction of common attributes)
- Decorator Pattern: Dynamically add new functionality to an object or enhance the original functionality without changing the structure of the original object. (Higher-order components)