What did the computer do when you browsed the Web page?

What did the computer do when you browsed my blog

Technical considerations, Computer principles

When I was in college, I always had a lot of questions about computers, especially how computers worked, and why it was so powerful that it changed our lives more and more dramatically.

With the accumulation of knowledge, OS, process, thread, computer network, web development, a knowledge island in one day finally connected, forming a very clear flow of information.

I believe that you, as a reader, will be very interested in figuring out the principles, or have figured out but there may be some questions, so I will do a very common operation to analyze the flow of information and try to analyze each step of the hierarchy.

The operation is: what did the computer do when you were browsing my blog?

For the sake of narrative convenience, I have restricted the use of chrome, Nginx, unicorn, rails to describe them, in fact, these components can be replaced.

Chrome:

1. Start a new child process, render a new tab
2. Receives user input URLs, sends network request DNS, and subsequent HTTP requests, waits for DNS to respond to the blog server, and eventually gets to HTML, CSS, JavaScript network data.
3. According to the specification, HTML is rendered as a DOM node, according to CSS style requirements, layout and effect display.
4. Execute the JavaScript code in it, modify the corresponding DOM node as appropriate, perform network operations, and so on.

Since this layer can be a browser, it may be a crawler, and possibly other things, so collectively referred to as the user agent. (User Agent)

Because of the great complexity of the specification, UI rendering mechanism is very complex, JS execution engine is also very "high-tech content", which led to our domestic not really independent browser, all with IE or chrome "nuclear", their own shell.

The development complexity of the browser is comparable to writing a complete operating system.

keywords : User agent, HTML5, Javascript, CSS.

OS Upper:

The most common operating systems are currently OS X or Windows 8, and Linux, which is often used as a server.

This layer, which provides a space for the process: a piece of memory, some restricted resource operations such as read disk, send network data, interact with other processes.

2. You receive a request from the chrome parent process to create a child process:
   • A new process of memory storage PID and its environment variables, called process descriptors.
   • Receives system calls from the Exec () series, prepares a piece of memory, loads the child process's code, and inherits the running data of the parent process.
   • Receiving a render UI request, the command display displays the color of the specified memory location, which is too troublesome to be handed over to its younger brother DMA automatically.

4. Receives a system call to the socket () series, directing the NIC to send the specified message:

   • DNS Request:

     0) Find the native hosts mapping file (for example, OSX 10.10 in/etc/hosts) and return the IP address directly if found, otherwise continue with the steps below.

     1) Fill in the contents of the UDP message: request the IP address of the yafeilee.me.

     2) Assemble ip:8.8.8.8, PORT 53, type: DNS, content: Above UDP message in IP message

     3) Assemble SMAC:xx:xx:xx:xx:xx:xx on the link layer, DMAC: Router mac. (If the routing Mac is not recorded, send ARP to find)

     4) delivery to the network card, the network card began to send.

     5) The operating system starts to do something else and waits for the other party to respond

     6) The NIC receives the response data from the other side, tells the operating system that it has received.

     7) The OS notifies the chrome process that the IP address has been found, to you.

     8) The chrome process starts preparing HTTP requests.

   • Assemble the HTTP request data from the upper layer.

     1) Find an idle IO port from 1024-65535, bind, avoid other process occupation.

     2) hold three handshake with each other (the IP address you just found) to confirm that the other party is online.

     3) Assemble the HTTP data and send the data to the network card according to the above-mentioned DNS report request.

     4) After receiving the data, notify Chrome that the data has arrived. The chrome child process may continue to request some data (such as loading pictures, other resources, etc.)

How does the operating system do the process abstraction?

Not hard. The following points are achieved:

1. Implement virtual memory mapping, the term MMU, through a fault call, each process can simulate 4G (32-bit bus bits) of independent memory, non-interference.
2. The CPU hardware supports RING0 and RING3 at least two levels of switching, allowing RING3 to prohibit certain instructions, such as switching the RING and accessing the network card, the operating system configures this feature and causes the process to run under RING3. But what if I need access to hardware?
3. Use soft interrupts to provide APIs to process calls.

At this point, on top of the operating system level, processes are independent of each other, can not interfere with each other, and does not have the authority to interfere with other processes.

keywords : OS, process, thread, user state, MMU, socket programming.

Operating system underlying

At the bottom, the operating system is responsible for "understanding" and executing the corresponding instructions, such as:

How to deliver data to a network card, how to obtain new data for the NIC, and how to store a data.

is also responsible for solving a very magical problem: how to convert the various instructions to 0 and 1, and the results of the operation.

1. Everything can be counted.

   Imagine a sound that can digitize its frequency to 0 and 1, store it up, play it by the CPU in a little bit of time, and drive the sound to play. (electrical signals to go through the CPU, bus, audio output, sound)

   An image, each pixel of it can be stored in RGB, written as 0 and 1, to display (the display is dedicated to display RGB data as an image of the device)

   At the moment, almost everything can be digitized.

2. Instruction arithmetic

   First, the theoretical guidance of Boolean algebra allows the machine to perform binary operations with circuits. Boolean algebra with relays (now transistors, LSI) can deduce the creation of memory, trigger (clock), arithmetic (computational addition), controller (Control instruction processing, common instruction store, load, jump, addition)

   With the above tools, the CPU is born.

   All programs are stored by the compiler for binary code, which is then taken out by the CPU and processed in turn.

3. Operation Abstraction

   For the CPU, its pin is the input and output, the network card through the bus and the CPU connection, the operating system will set some parameters to tell the CPU once there is a hardware interrupt, processing the preset instructions. This method is called a hard interrupt. (Can imagine, hard interrupt there are many kinds of, hard disk, printer, network card, mouse, keyboard, so will also rank a serial number, called the interrupt number.)

   For applications, for system security, the operating system uses CPU RING3 and MMU to abstract process descriptors for them, process space (32-bit defaults to 4G), providing them with a set of APIs, such as starting a subprocess, communicating with other processes, listening to network messages, and so on (standard Unix operating system API has more than 1000), this set of API calls also take advantage of the CPU interrupt processing (default interrupt number 0x80), this method is called soft interrupt.

Through the above abstract processing, in the computer "only know the addition operation" case, understand the instruction to obtain the network data, the final drive display (if the image is too large, it may be given to the graphics card calculation) rendered the blog content.

keywords : CPU principle, Turing, digitization, relays.

Web Mail

When the network card receives the sending instruction, the data is encoded into an electrical signal composed of high and low levels according to 0, 1, which is sent to the network cable, and then the data is sent until there is no data being transmitted on the network cable.

After the home router accepts the NIC data, it forwards the MAC and IP from the data message to its own, to the next router.

If dial-up access is used, these messages are converted from a digital signal to an analog signal by a cat, to the other end of the telephone network: a service provider (ISP), such as telecommunications. They put the signal back into the digital signal by the cat. We call this way for PPPOE to surf the internet.

If the fiber is used, the digital signal can be direct to the service provider.

Service providers of the next router like a postman, the Mail (data message) of the postmark and reply to make some adjustments, continue to send to the next router, in turn, the final delivery to my blog IP address of the computer.

Each router can be understood as a computer.

This scheme is called Routing and switching technology.

keywords : routing, switching, computer network, Ethernet.

Blog server response

The blog server runs on a VPS, and a VPS looks like a real computer, but in fact it's a virtual computer running on a real computer called virtualization technology. A variety of recently popular cloud service providers are using this technology to achieve.

The blog server also runs an operating system, which is named Linux, but does not have a graphical interface. It works in a similar operation to the above operating system.

Skip the processing of the operating system directly (described above), directly from the blog server listening process, the process called Nginx Master, listening to 80 port (the default port of the WEB program), once received a new request, Nginx Master to determine the source, according to the To transfer the connection to its appropriate child-process Nginx worker and continue to listen for new requests.

After the worker receives the connection request, the reply-to-end connection is ready, the other side is balabla ... Sent the request data over.

The worker will clarify the request and find that the request is to be processed by the Ruby on Rails service process Unicorn, adding some additional fields, such as x-forwarded-for, HOST, etc., to the unicorn.

Why do you need this two-step "superfluous" part?

1. A server may provide multiple Web site services, all of which must use port 80 and need to have a dispatcher: Nginx/apache.
2. For faster delivery of data, some static data does not change, data is compressed, and these distributors are very professional in handling this content.

keywords : nginx, Unicorn

Ruby on Rails process

Ruby on Rails is just one of thousands of Web development applications, like PHP, Java EE, and ASP. They are essentially responsible for one thing:

How to make WEB applications more efficient to be developed and delivered to users faster, and better maintained in the future.

The unicorn is a production container for Rails applications that is highly efficient and easy to use.

Unicorn received the request from Nginx, the request URL and parameters of a layer of analysis (rack), by the routing table, found that this is to the Controller Posts_controller index method.

Then call the Posts#index method.

Posts#index will take out the latest blog post in the Postgres database. and render the App/views/index.html.slim data into HTML, delivered to the previous layer.

Nginx transmits the data to the user.

In the meantime, the browser and nginx after many interactions, the final, the picture, JS, HTML, CSS are basically in place, the browser began to render the final result.

keywords : web development, Ruby on Rails, session, cookies, cache.

Summarize

I try to put all the processes together, what is the point of this? I use the following analogy to say:

If you are a hotel chef now, just add ingredients and make delicious meals. You don't need to know where the raw materials are shipped from.

But only if you know the raw material well, you may find the best raw materials in the world before you can become the world's top chef.

I think that only curiosity can drive us farther away.

At this point, for the macro world, the world is only for you to consume fraction degree of electricity, add a little entropy.

Attached, main bibliography:

1. Modern operating systems
2. Network
3. In-depth understanding of computer systems
4. The Secret of coding
5. Ruby on Rails Agile Development

More bibliography can be found in my watercress reading list: http://www.douban.com/people/41759170/

Read more in-depth article: Https://github.com/skyline75489/what-happens-when-zh_CN

PS: This article is a huge amount of information, I understand limited, if you find any errors or problems, please leave a message to me below.

What did the computer do when you browsed the Web page?