Browser Protocol TCP Detailed Explanation

Browser Protocol TCP Detailed Explanation

The browser process is responsible for storage, interface, download and other management. In the rendering process, the well-known main thread, compositing thread, JavaScript interpreter, typesetting engine, etc. are running.

1. The browser process processes the user's input in the address bar and then sends the URL to the web process.
2. The network process sends a URL request, parses it after receiving the response data, and then forwards it to the browser process.
3. After the browser process receives the response, it sends a "submit navigation" message to the rendering process.
4. The rendering process starts to receive the data sent by the network process and render the document.

http/https protocol

The HTTP protocol works on a client-server architecture.

As an HTTP client, the browser sends all requests to the HTTP server, namely the WEB server, through the URL.

Web servers include: Apache server, IIS server (Internet Information Services), etc.

The web server sends response information to the client according to the received request.

The default HTTP port number is 80, but you can also change it to 8080 or other ports.

• The browser correctly implements HTTPS and a correct and trusted certificate authority is installed in the operating system;
• Certificate Authorities only trust legitimate websites;
• The website being visited presents a valid certificate, i.e. it is issued by a certificate authority trusted by the operating system (most browsers will warn about invalid certificates);
• The certificate correctly authenticates the website being visited
• The encryption layer (SSL/TLS) of this protocol can effectively provide authentication and high-strength encryption.

TCP:

• three handshake
• waved four times
• The TCP protocol has the following three main characteristics:
  • The TCP protocol is connection-oriented, and before any data is exchanged, a connection process must first be established between two computers.
  • Due to the use of sequence numbers and return notifications, the TCP protocol assures the user of the reliability of the transmission.
  • The TCP protocol uses byte stream signaling, which means that data is treated as a sequence of bytes without information
  • Caching strategy: can be divided into strong caching and negotiation caching
• Cache-Control/Expires : The browser judges whether the cache has expired. If it is not expired, it will directly use the strong cache. The
  max-age priority of Cache-Control is higher than that of Expires
• Use the negotiated cache when the cache has expired
• 
  Unique identification scheme: Etag (carried by response) & If-None-Match (carried by request, the Etag returned last time ): the server determines whether the resource has been modified
• Last modified time: Last-Modified(response) & If-Modified-Since ( request ,
  last returned Last-Modified )
• If it is consistent, return 304 directly to notify the browser to use the cache
• If inconsistent, the server returns a new resource

Common Status Codes

1xx: Accept, continue processing
200: Success, and return data
201: Created
202: Accepted 203:
Become, but not authorized 204
: Success, no content
205: Success, reset content
206: Success, partial content
301: Permanent Move, redirect
302: Temporary move, the original URI can be used
304: The resource has not been modified, and the cache can be used
305: Proxy access is required 400
: Request syntax error
401: Authentication is required
403: Request rejected
404: Resource does not exist
500: Server mistake

get / post

• get : Cache, request length is limited, will be recorded in history,
  no side effects (no resource modification), idempotent (the number of requests has nothing to do with resources) scenarios
• post : security, big data, more encoding types

Websocket

• Websocket is a persistent protocol, based on http, the server can actively push
• WebSocket is a technology used for arbitrary two-way data transmission between a web browser and a server. The WebSocket protocol is implemented based on the TCP protocol, including the initial handshake process and the subsequent two-way transmission of multiple data frames. Its purpose is to prevent the server from opening multiple HTTP connections to save resources and improve work efficiency and resource utilization when WebSocket applications and WebSocket servers perform frequent two-way communication. Compatibility
  :
• FLASH Socket
• Long polling: send ajax regularly
• long poll: send --> respond when there is a message

事件       事件处理程      描述
open     ws.onopen      连接建立时触发
message  ws.onmessage   客户端接收服务端数据时触发
error    ws.onerror     通信发生错误时触发
close    ws.onclose     连接关闭时触发

Example:

<script>
let mes  = new WebSocket('ws://localhost:8080')
mes.onopen = function(e){
    
    
    console.log('开始接通')
    $('.btn-send').click(function(){
    
    
        mes.send($('.botton').btn()) // 点击发送
      })
      mes.onmessage = function(msg){
    
     // 监听消息
        $('div').append('<span>'+ msg.data +'</span>')
      }
      $('.btn-close').click(function(){
    
    
        mes.close()  //  关闭连接
      })
}
</script>

cross domain

亿点小知识：JSONP : 利用 <script>标签不受跨域限制的特点， 缺点是只能支持 get 请求

• Set CORS: Access-Control-Allow-Origin: *
• postMessag

Safety

Browser security can be divided into:
Web page security: same-origin policy, XSS attack, CSRF attack
Browser network security: HTTPS

The above is the server and the network. Thank you for reading.
If you encounter other problems, you can discuss and study with me in private.
If it is helpful to you, please like and collect. Thank you~!
Pay attention to favorite bloggers and will continue to update...