TCP protocol: how to ensure that the page file can be completely delivered to the browser?

Z is me 2021-02-23 16:08:48
tcp protocol ensure page file

Let's talk about page file transfer from the perspective of data package

A packet of “ Journey ” The following are from “ How the packet reaches the host ”“ How hosts deliver packets to applications ” and “ How data is fully delivered to the application ” These three perspectives will tell you the process of data transmission .

Internet , In fact, it's a set of architecture composed of concepts and protocols . among , The protocol is a well-known set of rules and standards , If all parties agree to use , Then the communication between them will become unimpeded .

Data in the Internet is transmitted through packets . If the data sent is large , Then the data will be split into many small packets for transmission . Like the audio data we're listening to now , It is split into small packets for transmission , It's not a big file that's transferred at one time .

1.IP: Send the packet to the destination host

Packets are transmitted over the Internet , It's about conforming to the internet protocol (Internet Protocol, abbreviation IP) standard . Different online devices on the Internet have unique addresses , The address is just a number , This is similar to most home delivery addresses , Just need to know the specific address of the family , You can send the package to this address , So the logistics system can deliver the goods to the destination .

The address of the computer is called IP Address , Visiting any website is really just your computer asking for information from another computer .

If you want to send a packet from the host A Send to host B, So before transmission , The packet will be attached to the host B Of IP Address information , In this way, it can be properly addressed during transmission . Extra , A host will be attached to the packet A Of itself IP Address , With these information hosts B Can reply to the host A. These additional information will be put into a file called IP In the data structure of the header .IP The head is IP Information at the beginning of the packet , contain IP edition 、 Source IP Address 、 The goal is IP Address 、 Time to live and so on .

2.UDP: Deliver the packet to the application

IP It's a very low-level protocol , It is only responsible for transferring data packets to the other party's computer , But the other computer doesn't know which program to give the data package to , To browser or to King glory ? therefore , Need to be based on IP Develop protocols that work with applications , The most common is “ User packet protocol (User Datagram Protocol)”, abbreviation UDP.

UDP One of the most important messages in this project is Port number , The port number is actually a number , Every program that wants to access the network needs to bind a port number . Through port number UDP Can send the specified packet to the specified program , therefore IP adopt IP The address information sends the packet to the designated computer , and UDP Distribute the data package to the correct program through the port number . and IP The head is the same , The port number will be loaded into UDP Inside the head ,UDP The header is combined with the original data package to form a new UDP Data packets .UDP Except for the destination port in the header , And the source port number .

In the use of UDP When sending data , There are various factors that can cause packet errors , although UDP It can check whether the data is correct , But for the wrong packets ,UDP There is no retransmission mechanism , Just discard the current package , and UDP It's impossible to know whether the destination can be reached after sending .

although UDP There is no guarantee of data reliability , But the transmission speed is very fast , therefore UDP Will be applied to some attention speed 、 But areas where data integrity is less stringent , Like online video 、 Interactive games, etc .

3.TCP: Deliver the data completely to the application

For browser requests , Or mail, which requires data transmission reliability (reliability) Application , If you use UDP There are two problems with coming to transport :

  • Data packets are easily lost in the process of transmission ;
  • Large files will be split into many small packets for transmission , These small packets will go through different routes , And at different times to the receiving end , and UDP The protocol doesn't know how to assemble these packets , To restore these packets to a complete file .

Based on these two questions , We introduce TCP 了 .TCP(Transmission Control Protocol, Transmission control protocol ) It's a connection oriented 、 reliable 、 Transport layer communication protocol based on byte stream . be relative to UDP,TCP There are two characteristics :

  • In the case of packet loss ,TCP Provide retransmission mechanism ;
  • TCP The packet sorting mechanism is introduced , It is used to ensure that the disordered packets are combined into a complete file .

and UDP The head is the same ,TCP The header contains the target port and the native port number , The serial number for sorting is also provided , So that the receiving end can rearrange the data packet through the serial number .

TCP The transmission process of a single packet and UDP The process is similar , The difference is this , adopt TCP Header information ensures the integrity of a large piece of data transmission .

Let's take a look at the whole TCP Connection process , Through this process you can understand TCP How to ensure the retransmission mechanism and packet sorting function .

As can be seen from the figure below , A complete TCP The life cycle of the connection includes “ Establishing a connection ”“ To transmit data ” and “ disconnect ” Three stages .

 One TCP The life cycle of the connection

  • First , Establish connection phase . This stage is through “ Three handshakes ” To establish a connection between the client and the server .TCP Provide connection oriented communication transmission . Connection oriented refers to the preparation between two ends before data communication . So-called Three handshakes , It means building a TCP When the connection , The client and server send three packets to confirm the connection ( for the first time : The client sends a message with SYN Packets for flags The second time : The server sends a message with SYN and ACK Marked packets third time : The client sends a message with ACK Packets for flags ).
  • secondly , Data transmission phase . In this phase , The receiver needs to confirm every packet , That is to say, after receiving the packet, the receiver , Need to send confirmation packet to sender . So when the sender sends a packet , The confirmation message fed back by the receiver is not received within the specified time , Then it is judged that the packet is lost , And trigger the retransmission mechanism of the sender . Again , A large file will be split into many small packets during transmission , When these packets arrive at the receiver , The receiver will follow TCP The sequence number in the header is the order , So as to ensure the composition of complete data .
  • Last , Disconnection phase . After data transmission , It's about to terminate the connection , It's about the last stage “ Four waves ” To ensure that both sides can disconnect ( for the first time : The client sends a message with FIN Packets for flags The second time : The server receives FIN After package , Send to client with ACK Data packets third time : The server sends a FIN To the client The fourth time : Client received FIN after , Send to the server with ACK Packets for flags ).

Here you should understand ,TCP In order to ensure the reliability of data transmission , At the expense of packet transmission speed , because “ Three handshakes ” and “ Packet verification mechanism ” And so on to double the number of packets in the transmission process .


  • Data in the Internet is transmitted through packets , Packets are easy to lose or make mistakes in the process of transmission .
  • IP Responsible for delivering packets to the destination host .
  • UDP Responsible for delivering packets to specific applications .
  • and TCP Ensure the complete transmission of data , Its connection can be divided into three stages : Establishing a connection 、 Transfer data and disconnect .

Reference material

Browser working principle and practice

本文为[Z is me]所创,转载请带上原文链接,感谢

  1. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  2. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  3. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  4. 前端面试常考题:JS垃圾回收机制
  5. Frequently asked questions in front end interview: JS garbage collection mechanism
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. Java之HTTP网络编程(一):TCP/SSL网页下载
  8. HTTP network programming in Java (1): TCP / SSL web page download
  9. Java之HTTP网络编程(一):TCP/SSL网页下载
  10. HTTP network programming in Java (1): TCP / SSL web page download
  11. 使用vite搭建vue项目
  12. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  13. 在 vue 中通过 express 连接数据库
  14. Using vite to build Vue project
  15. Display PDF file in component: Vue pdf
  16. Connecting database through express in Vue
  17. 2021届秋招哈啰出行前端面经(一面)
  18. vue使用sdk进行七牛云上传
  19. Javascript性能优化【内联缓存】 V8引擎特性
  20. Small true wireless smart headset evaluation: put intelligence into the ear
  21. The front end experience of the 2021 autumn recruitment
  22. Vue uses SDK to upload Qi Niu cloud
  23. 深入理解 Web 协议 (三):HTTP 2
  24. dhtmlxGantt如何重新排序任务
  25. JavaScript performance optimization [inline cache] V8 engine features
  26. 深入理解 Web 协议 (三):HTTP 2
  27. Deep understanding of Web protocol (3): http 2
  28. 深入理解 Web 协议 (三):HTTP 2
  29. How dhtmlxgantt reorders tasks
  30. 深入理解 Web 协议 (三):HTTP 2
  31. JavaScriptBOM操作
  32. JavaScriptBOM操作
  33. Deep understanding of Web protocol (3): http 2
  34. Deep understanding of Web protocol (3): http 2
  35. dhtmlxGantt甘特图重新排序任视频教程
  36. vue实现七牛云上传图片功能
  37. vue.js环境配置步骤及npm run dev报错解决方案
  38. Deep understanding of Web protocol (3): http 2
  39. JavaScript BOM operation
  40. JavaScript BOM operation
  41. Dhtmlxgantt reordering video tutorial
  42. Vue to achieve seven cattle cloud upload image function
  43. vue.js Environment configuration steps and NPM run dev error reporting solution
  44. 什么是HTTPS以及如何实施HTTPS?
  45. vue使用sdk进行七牛上传
  46. JavaScript 邮箱验证 - 正则验证
  47. Codeless development platform cloud watch sets off a "new revolution" in enterprise Digitalization
  48. Codeless development of cloud watch for enterprise digital solution
  49. What is HTTPS and how to implement it?
  50. Vue uses SDK to upload seven cows
  51. JavaScript mailbox verification - regular verification
  52. JavaScriptBOM操作
  53. JavaScript BOM operation
  54. How to create a new NPM package and publish it to the NPM community
  55. vue --tinymce 解决上传图片的方法
  56. Vue development
  57. A simple solution for vite to batch introduce SVG symbol
  58. Building 3D rendering engine from scratch with JS (2)
  59. Vue -- tinymece solution to upload pictures
  60. Common configuration of nginx