[to] what happened from the input URL to the completion of the page loading process

Source: Internet
Author: User
Tags switches domain name server domain server http 2 quic

First question: What happened in the process from the input URL to the browser reception? From touch screen to CPU

First is "input url", most people's first reaction will be the keyboard, but in order to keep pace with the times, here will introduce the touch screen device interaction. "

Touch screen sensor, which is mostly based on capacitance (capacitive), has been directly covered on the display, but recently there are 3 kinds of technology embedded in the display, the first is the IPhone 5 In-cell, it can reduce the thickness of 0.5 mm, The second is the use of Samsung On-cell Technology, the third is the domestic manufacturers like to use the OGS full-fit technology, specific details can read this article.

When the finger touches the sensor, some electrons pass through the hand, causing the voltage in the area to change, and the touch screen controller chip can calculate the location of the touch based on this change, and then transmit the signal to the CPU pin via the bus interface.

In Nexus 5, for example, the touchscreen controller used is the Synaptics s3350b, the bus interface is I²C, and the following is an example of a Synaptics touch screen and processor connection:

On the left is the processor, the right is the touchscreen controller, and the middle SDA and SCL connections are I²C bus interfaces.

Processing within the CPU

The CPU in a mobile device is not a separate chip, but is integrated with a chip such as a GPU, called a SoC (on-chip system).

The connection between the touch screen and the CPU is mentioned earlier, and the connection is the same as that of most computers, which are communicated through electrical signals, that is, the change of voltage, such as the following timing diagram:

Under the control of the clock, these currents pass through the MOSFET transistor, which contains N-type semiconductors and P-type semiconductors, which control the opening and closing of the line through the voltage, which then form the CMOS, then the CMOS implementation of the "and" or "non" logic circuit gate, and finally by the logic circuit door can achieve addition, displacement and other calculations, as shown in the overall (from "Computer Architecture"):

In addition to calculations, storage units are also required to load and store data in the CPU, which is typically implemented via triggers (flip-flop), called registers.

These concepts are more abstract, recommended to read "how to Build a 8-bit computer" This article, the author based on transistors, diodes, capacitors and other originals of the production of a 8-bit computer, support simple assembly instructions and results output, although the implementation of modern CPUs is much more complex than this, But the fundamentals are the same.

In fact, I am also just beginning to learn the implementation of CPU chips, so it is not in this fraught, interested readers please read the book recommended later in this section.

From CPU to OS kernel

In front of the touch screen controller to send electrical signals to the CPU corresponding to the PIN, and then trigger the CPU interrupt mechanism, in Linux, for example, each external device has an identifier, called Interrupt request (IRQ) number, you can use the /proc/interrupts file to view all devices in the system interrupt request number, the following is Part of Nexus 7 (2013) Results:

[email protected]:/ $ cat /proc/interrupts            CPU0  17:          0       GIC  dg_timer 294:    1973609   msmgpio  elan-ktf3k 314:        679   msmgpio  KEY_POWER

Because the Nexus 7 uses the ELAN touchscreen controller, the elan-ktf3k in the results is the interrupt request information for the touchscreen, where 294 is the interrupt number and 1973609 is the number of triggers (two interrupts are generated when the finger is clicked, but there are hundreds of interrupts on sliding).

To simplify the priority issue, take the ARMV7 architecture processor as an example, when an interrupt occurs, the CPU stops the currently running program, saves the current execution state (such as the PC value), enters the IRQ state, and then jumps to the corresponding interrupt handler execution, which is typically implemented by a third-party kernel driver. For example, the Nexus 7 driver source mentioned above is touchscreen/ektf3k.c here.

This driver will read the location data from the I²C bus, then record the touch-down coordinates and other information through the kernel's input_report_abs, and finally the input submodule in the kernel will write this information into /dev/input/event0 the device file. For example, the following shows the information generated by a touch event:

130|[email protected]:/ $ getevent -lt /dev/input/event0[  414624.658986] EV_ABS       ABS_MT_TRACKING_ID   0000835c[  414624.659017] EV_ABS       ABS_MT_TOUCH_MAJOR   0000000b[  414624.659047] EV_ABS       ABS_MT_PRESSURE      0000001d[  414624.659047] EV_ABS       ABS_MT_POSITION_X    000003f0[  414624.659078] EV_ABS       ABS_MT_POSITION_Y    00000588[  414624.659078] EV_SYN       SYN_REPORT           00000000[  414624.699239] EV_ABS       ABS_MT_TRACKING_ID   ffffffff[  414624.699270] EV_SYN       SYN_REPORT           00000000
From the operating system GUI to the browser

As mentioned earlier, the Linux kernel has completed the abstraction of the hardware, other programs only need to listen to /dev/input/event0 the changes in the file to know what the user touch, but if each program is too cumbersome to do so, in the image operating system will include a GUI framework to facilitate application development, such as Linux under the famous X.

But Android does not use X, but instead implements a GUI framework, in which a Eventhub service listens /dev/input/ to files in the directory Epoll way, and then passes that information to the Android Window Management Service (Windowmanagerse Rvice), it finds the appropriate app based on location information, and then invokes the listener function (such as OnTouch, etc.).

In this way, we answer the first question, but because of the time is limited, here omitted a lot of details, want to further study of readers recommend reading the following books.

Extended Learning
    • Computer architecture
    • "Computer Architecture: Quantitative Research Methodology"
    • "Computer composition and Design: Hardware/software Interface"
    • Encoding
    • "Getting Started with CPU"
    • "Operating system Concept"
    • "Armv7-ar Architecture Reference Manual"
    • "Linux kernel design and implementation"
    • "Mastering Linux device Driver Development"
Second question: How does a browser send data to a network card? From browser to browser kernel

As mentioned earlier, the operating system GUI passes the input events to the browser, in which case the browser may do some preprocessing, such as Chrome will estimate the Web site of the input character according to the historical statistics, for example, enter the "ba", according to the previous historical Discovery 90% probability will visit " www.baidu.com", so it will start to establish a TCP link or even render before entering the carriage return, there are many other strategies, the interested readers recommend reading High performance Networking in Chrome.

Then enter the URL after the "carriage return", then the browser will check the URL, first judge the protocol, if the HTTP is handled according to the WEB, but also the URL for the security check, and then directly invoke the browser kernel corresponding method, such as WebView in the Loadurl side Method.

In the browser kernel, the cache is first viewed, then HTTP information such as UA is set and the method for network requests under different platforms is invoked.

Note that the browser and browser kernel are different concepts, the browser refers to Chrome, Firefox, and the browser kernel is Blink, Gecko, the browser core is only responsible for rendering, GUI and network connection and other cross-platform work is browser implementation

Sending an HTTP request

Because the underlying implementation of the network is related to the kernel, so this part needs to deal with different platforms, from the perspective of the application layer to do two things: through the DNS query IP, send data through the Socket, the next step is to introduce the two aspects of the content.

DNS queries

Applications can directly invoke the Getaddrinfo () method provided by LIBC to implement DNS queries.

DNS query is actually based on UDP, here we have a specific example to understand its search process, the following is dig +trace fex.baidu.com the result of using the command (omitted some):

; <<>> DiG 9.8.3-p1 <<>> +trace fex.baidu.com;           Global options: +cmd.           11157 in NS g.root-servers.net.           11157 in NS i.root-servers.net.           11157 in NS j.root-servers.net.           11157 in NS a.root-servers.net. 11157 in NS l.root-servers.net.;            Received 228 bytes from ( in mscom.            172800 in NS a.gtld-servers.net.com.            172800 in NS c.gtld-servers.net.com.            172800 in NS m.gtld-servers.net.com.            172800 in NS h.gtld-servers.net.com. 172800 in NS e.gtld-servers.net.;      Received 503 bytes from ( in 185 msbaidu.com.      172800 in NS dns.baidu.com.baidu.com.      172800 in NS ns2.baidu.com.baidu.com.      172800 in NS ns3.baidu.com.baidu.com.      172800 in NS ns4.baidu.com.baidu.com. 172800 in NS ns7.baidu.com.; Received 201 bytes from ( in 1237 Msfex.baidu.com. 7200 in CNAME fexteam.duapp.com.fexteam.duapp.com.       In CNAME duapp.n.shifen.com.n.shifen.com.       86400 in NS ns1.n.shifen.com.n.shifen.com.       86400 in NS ns4.n.shifen.com.n.shifen.com.       86400 in NS ns2.n.shifen.com.n.shifen.com.       86400 in NS ns5.n.shifen.com.n.shifen.com. 86400 in NS ns3.n.shifen.com.; Received 258 bytes from ( in 2 ms

You can see that this is a gradual narrowing of the lookup process, first by the DNS server set by this machine ( to the DNS root node query responsible for. com zone of the domain server, and then through one of the responsible. COM server query responsible for baidu.com servers, and finally by one of the B The aidu.com domain name server queries the address of the fex.baidu.com domain name.

Maybe when you query some domain names you will find that it is not the same as above, the bottom will see a strange server first to return results ...

Here in order to facilitate the description, ignoring a lot of different situations, such as actually walk is loopback, and network card device does not matter; For example, Chrome will pre-query 10 of the domain names you might access when the browser launches, and Hosts file, cache time TTL To live) and so on.

Sending data through the Socket

With the IP address, you can send data through the Socket API, you can choose TCP or UDP protocol, the specific use of the method here is not introduced, recommended reading Beej ' s Guide to Network programming.

HTTP is commonly used TCP protocol, because the specific details of the TCP protocol can be seen everywhere, so this article does not introduce, here to talk about TCP Head-of-line blocking problem: Assume that the client sent 3 TCP fragments (segments), the number is 1, 2, 3, if the packet number 1 is lost, even if the number 2 and 3 have arrived can only wait, because the TCP protocol needs to guarantee the order, this problem is more serious under HTTP pipelining, because the HTTP pipelining can allow multiple HTTP requests through a TCP sends, such as sending two pictures, perhaps the second picture of the data has been received, but still have to wait for the first image of the data to be transmitted.

To address the performance of the TCP protocol, the Chrome team last year introduced the QUIC protocol, which is a reliable transmission based on UDP, which can reduce the number of back and forth (round trip) times and forward error correction codes (Forward error Correction) over TCP. Function. Google Plus, Gmail, Google Search, Blogspot, Youtube and many other Google products are now using QUIC, which can be chrome://net-internals/#spdy found through the page.

Although no one has used QUIC in addition to Google, I think it is promising because optimizing TCP requires upgrading the system kernel (such as Fast Open).

Browser to the same domain has a connection limit, most of it is 6, I used to think to change the number of connections to improve performance, but in fact, it is not the case, the Chrome team has done experiments, found that the performance has been reduced from 6 to 10, resulting in many factors, such as the cost of establishing a connection, Congestion control issues, such as the SPDY, HTTP 2.0 protocol, although only one TCP connection is used to transfer data, performance is better and the request priority is achieved.

In addition, because the HTTP request is in plain text format, the HTTP text can be parsed directly in the TCP data segment, if found ...

Socket implementation in the kernel

How is the socket API implemented when the browser's cross-platform library sends the data by invoking the socket API?

Take Linux as an example, its implementation here socket.c, at present I do not quite understand, recommend the reader to look at the Linux kernel map, it marked the key path of the function, easy to learn from the protocol stack to network card driver implementation.

Specific examples of underlying network protocols

Next, if you continue to introduce the IP protocol and MAC protocol may be a lot of readers will faint, so this section will use Wireshark to explain through specific examples, the following is my request Baidu homepage crawl to the network data:

At the bottom is the actual binary data, the middle is parsed out of the various field values, you can see the bottom of the HTTP protocol (hypertext Transfer Protocol), before HTTP 54 bytes (0x36), which is the cost of the underlying network protocol, We then analyze these protocols.

Above HTTP is the TCP protocol (transmission Control Protocol), which is specific to the following:

With the binary data at the bottom, you can see that the TCP protocol is prepended to the HTTP text, which has 20 bytes, which defines the local port (Source Port) and the destination port (Destination port), the sequence number (Sequence numbers), Information such as window length, the following is a complete description of the data for each part of the TCP protocol:

 0 1 2 3 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9          0 1+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+|       Source Port |                        Destination Port |+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+|                    Sequence number |+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+|  Acknowledgment number |+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+|           Data | | u| a| e| r| s|                               F| || Offset| Reserved | r| c| o| s| y|            i|       Window | |           | | G| k| l| T| n|                               n|           |+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+|         Checksum |                    Urgent Pointer |+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+| Options                   |                             Padding |+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+| Data |+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

The role of the individual fields is not described here, and interested readers can read RFC 793, which is understood in conjunction with packet capture analysis.

It is important to note that there is no IP address information in the TCP protocol because this is defined in the IP protocol of the previous layer, as shown in:

IP protocol is also in front of the TCP, it also has 20 bytes, where the version number is indicated (versions) is 4, the source (Origin) IP is , the target (Destination) IP is , so the most important role of IP protocol is to determine the IP address 。

Because the IP protocol can be viewed to the destination IP address, if some specific IP addresses are found, some routers will ...

However, the IP address is not able to communicate, because the IP address is not tied to a device, such as the IP of your laptop is at home , but to the company becomes , so in the bottom of the communication need to use a fixed address, which is the MAC (media access cont ROL) address, each network card Factory MAC address is fixed and unique.

So again up is the MAC protocol, which has 14 bytes, as follows:

When a computer joins the network, it needs to tell other network devices through the ARP protocol what its IP and its corresponding MAC address are, so that other devices can find the corresponding device by IP address.

The topmost Frame is the Wireshark number that represents the packet, not the network protocol.

In this way, we answered the second question, but in fact there are many many details did not introduce, we recommend that you learn further through the following books.

Extended Learning
    • "Computer network: top-down approach and Internet features"
    • Computer network
    • The authoritative Guide to Web performance
The third question: how can data be sent from a native NIC to a server? From the kernel to the network adapter (Interface Card)

In the previous call to the Socket API, the kernel encapsulates the underlying stack of data, and then starts the DMA controller, which writes the data from memory to the NIC.

In the case of Nexus 5, it uses the BCM4339 chip communication, the interface uses the same SD card as the SDIO, but the details of this chip is not disclosed, so this is not discussed here.

Connecting Wi-Fi routing

The Wi-Fi network card needs to communicate with the outside through the Wi-Fi route, the principle is based on radio, through the change of current to generate radio, this process is also called "modulation", and in turn the radio can cause the electromagnetic field changes, resulting in current changes, using this principle can be used to interpret the radio information is called " Demodulation ", where the number of changes per unit time is called frequency, the current frequency used in Wi-Fi is divided into 2.4 GHz and 5 GHz two.

In the same Wi-Fi routing, because the frequency is the same, the use of the same time conflict, in order to solve this problem, Wi-Fi uses a method called CSMA/CA, simply to verify that the channel has been used before transmission, not to send data.

2g/3g/lte, which is also based on the principle of radio, encounters similar problems, but it does not use the same exclusive solution as Wi-Fi, but instead uses the frequency division (FDMA), Cent (TDMA), and Code (CDMA) to reuse, the details are not expanded here.

With Xiaomi routing as an example, it uses a chip that is BCM 4709, which is made up of ARM CORTEX-A9 processor and flow hardware acceleration, and uses hardware chips to avoid operating system outages, context switches, and so on, thereby improving performance.

The operating system in the router can be developed on the basis of OpenWrt or dd-wrt, and I do not know the details, so I will not expand it.

Because the IP of the intranet device is similar to 192.168.1.x the intranet address, the extranet cannot send the data directly to this address, so the network data is routed, the route modifies the relevant address and port, this operation is called NAT mapping.

The last home route is typically connected to the carrier network via a twisted pair cable.

Routing within the carrier network

After the data has been sent to the operator network, there are also many intermediate route forwarding, the reader can view the IP and location of these routes through the traceroute command or the online visualizer.

When the data is passed to these routers, the router takes out the prefix of the destination address in the package, finds the corresponding output link through the internal forwarding post, and how is this forwarding publication obtained? This is the most important routing algorithm in the router, there are a lot of options, I do not know much about this, it seems that Wikipedia entries on the list is very full.

Transmission between backbone networks

For long-term data transmission, usually using optical fiber as a medium, optical fiber is based on the full reflection of light to achieve, the use of optical fiber needs a special emitter through electroluminescence (such as LED) to turn the electrical signal into light, compared to the previous radio and twisted pair, the fiber signal is much better anti-jamming, and energy consumption is much smaller.

Since the data is transmitted based on light, the speed of transmission depends on the speed of the light, which is close to 300,000-kilometer/s in the vacuum, because the refractive index (refractive index) in the fiber cladding (cladding) is 1.52, so the actual speed of light is about 200,000-kilometer/s, The distance from the capital airport to Guangzhou Baiyun Airport is 1967-kilometer, and it takes 10 milliseconds to reach it by this distance. This means that if you are in Beijing, the server in Guangzhou, and so you send data to the server to return data at least 20 milliseconds, the actual situation is expected to be 2-3 times, because there are various nodes routing processing time, such as I tested a Guangzhou IP discovery average latency of 60 milliseconds.

This delay is beyond the reach of existing technologies (unless you find a way over the speed of light), only by using a CDN to shorten the transmission distance, or to minimize the serial back-and-forth requests (such as the 3 handshake required by TCP to establish a connection).

IDC Intranet

Data through the optical fiber will eventually come to the server's IDC room, into the IDC intranet, you can first through the splitter to the traffic mirror a copy to facilitate the analysis of security checks, but also to carry out ...

Here the bandwidth cost is high, is based on the peak to settle, at a monthly per Gbps (note here refers to a bit, not a Byte) for the unit, Beijing side price of more than 100,000 yuan, the general website uses 1G to 10G range.

Next, the data in the fiber will go into the cluster (Cluster) switch, then forward to the switch at the top of the rack (Rack), and finally to the server in the rack via the port of the switch, refer to (from Open Compute):

On the left is the front, the right side, and you can see where the switch is left on the top.

In the past, the internal implementation of these switches is closed, the relevant vendors (such as Cisco, Juniper, etc.) will use a specific processor and operating system, the outside world is difficult to flexible control, and sometimes need to be manually configured, but in recent years with the popularity of OpenFlow technology, there are also open switch hardware (open Switch Hardware), such as Intel's web platform, suggests that interested readers suggest looking at its video, which is much clearer than the text description.

It is important to note that the switches mentioned in the general network book only have the function of two layer (MAC protocol), but the exchanger in IDC basically has the function of three layer (IP protocol), so there is no need to have a special route.

Finally, because the CPU is processing electrical signals, the light in the fiber needs to use the relevant equipment through the photoelectric effect to turn the light signal into an electrical signal, and then into the server network card.

Server CPU

In front of the data has reached the server network card, then the network card will copy the data into memory (DMA), and then interrupt to notify the CPU, the server side of the CPU is basically Intel Xeon, but in recent years there have been some new architectures, such as in the storage area, Baidu uses ARM Architecture to increase storage density because ARM consumes much less power than Xeon. In the high-performance world, Google recently tried to develop a server based on the POWER architecture of the CPU, the latest POWER8 processor can execute 96 threads in parallel, so it should be helpful for high concurrency applications.

Extended Learning
    • The Datacenter as a computer
    • Open Computer
    • "Software Defined Network"
    • "Big Talk Wireless Communication"
Question fourth: What happens when a server receives data?

To avoid duplication, this will not introduce the operating system, but directly into the backend service process, because there are too many technology selection, so I only choose a few common public parts to introduce.

Load Balancing

The request may go through a load-balanced machine before it enters the real application server, and its role is to reasonably allocate the request to multiple servers, while having the ability to attack and so on.

There are many kinds of load balancing implementations, there are direct hardware-based F5, LVS on the operating system Transport layer (TCP), and reverse proxies (also called seven-tier proxies) implemented in the application layer (HTTP), and then the LVS and reverse proxies are introduced.

Load balancing strategy is also many, if the following multiple server performance balance, the simplest way is to cycle through (round-robin), other strategies are not introduced, you can refer to the algorithm in LVS.


The role of LVS is from the external view only one IP, and in fact, the IP after the face should be multiple machines, and therefore also become Virtual IP.

The previously mentioned NAT is also a kind of LVS in the work mode, in addition to the DR and tunnel, the specific details here will not unfold, their shortcomings are unable to cross the network segment, so Baidu developed its own BVS system.

Reverse Proxy

The direction Agent is working on HTTP, the concrete implementation can be based on HAProxy or Nginx, because the reverse proxy can understand the HTTP protocol, so can do a lot of things, such as:

    • A lot of unified processing, such as anti-attack strategy, crawl, SSL, gzip, automatic performance optimization, etc.
    • The application layer's triage strategy can be done here, such as the request of the/XX path to the a server, the request of the/YY path to the B server, or according to the cookie small flow test, etc.
    • Cache and display a friendly 404 page when the backend service is hung out
    • Monitoring back-end services for exceptions
    • ??

Nginx code written very good, from which to learn a lot, for high-performance server development interested readers must look.

Processing in Web Server

After the request has been previously load balanced, it goes to the WEB server on the corresponding server, such as Apache, Tomcat, node. js, and so on.

In Apache, for example, after receiving a request will be handed over to a separate process to process, we can write the Apache extension to deal with, but it is too cumbersome to develop, so it is generally called PHP and other scripting language to handle, such as the CGI is to put the HTTP parameters in the environment variables, Then start the PHP process to execute, or use FastCGI to pre-start the process.

(The processing in node. JS is then presented separately)

Enter back-end language

As mentioned earlier, Web Server calls back-end language processes to handle HTTP requests (this is not entirely true, there are many other possibilities), then the backend language is processed, and most of the back-end languages are based on virtual machines, such as PHP, Java, JavaScript, Python and so on, but the topic in this area is very large, it is difficult to clarify, readers interested in PHP can read my previous HHVM introduction article, which mentions a lot of virtual machine basics.

Web Framework (framework)

If your PHP is just for simple profile "personal home page", it's not necessary to use a web framework, but if the code grows more and more difficult to manage, the general Web site will be developed based on a web framework, so when the backend language executes, it first enters the web The framework's code is then called by the framework to invoke the application's implementation code.

There are a lot of optional Web frameworks, which are not covered here.

Reading data

This part does not expand, from the simple read and write files to the data middle tier, there are too many options.

Extended Learning
    • "Deep understanding of Nginx"
    • "Python Source code Anatomy"
    • "In-depth understanding of Java virtual machines"
    • "Database System Implementation"
Question Fifth: How does the browser handle the data after the server returns it?

In front of the service end processing of the request, the results will be sent back to the client through the network browser, starting from this section will introduce the browser to receive data processing, it is worth mentioning that before there is a good article how Browsers work, so a lot of content I do not want to repeat the introduction, So focus on the part of the article that was overlooked.

from 01 to Characters

HTTP request returned HTML after passing to the browser, if there is gzip decompression first, and then the most important question is to know what its encoding is, such as the same "medium" word, under UTF-8 encoding its content is actually "11100100 10111000 10101101"is"e4 B8 ad", and GBK"11010110, 11010000""d6, how can I know the encoding of the file? There are many ways to judge:

    • User settings, you can specify page encoding in the browser
    • In the HTTP protocol
    • <meta>The value of the CharSet property in
    • For JS and CSS
    • For IFRAME

If not specified in these places, the browser is very difficult to deal with, it seems to be a bunch of "0" and "1", such as "Chinese", it is UTF-8 under 6 bytes, if according to GBK can be used as "trickle po" the 3 characters to explain, the browser how to know whether it is "Chinese" or "trickle po" it?

But a normal person can recognize "Juan Po" is wrong, because these 3 words too uncommon, so some people think of the method of judging common words to detect the code, typical such as Mozilla's universalcharsetdetection, but this east false rate is also very high, So it's better to indicate the coding.

So the subsequent operation of the text is based on the "character" (Character), a Chinese character is a char, no longer care whether it is 2 bytes or 3 bytes.

Loading of external chain resources

(to be added, there are scheduling policies)

Execution of JavaScript

(Follow up separately, recommend everyone see R big last year finishing this post, there is a lot of relevant information, in addition I spoke two years ago in the JavaScript engine performance optimization, although some content is not quite correct, but also can see)

From character to picture

Two-dimensional rendering of the most complex to the number of text display, although it seems very simple, not just a text corresponding to the glyph (glyph) to find out? This is fine in both Chinese and English, because one character corresponds to a glyph (glyph), a glyph is found in the font file, and then it can be painted, but not in Arabic, because it has a conjoined form.

(It is very complex to be introduced separately.)

Cross-platform 2D drawing Library

The graphical drawing API is available in different operating systems, such as GDI under Quartz,windows under Mac OS X and Xlib under Linux, but they are not compatible with each other, so in order to support cross-platform drawing, the Skia library is used in Chrome.

(In a separate introduction, Skia internal implementation of the call hierarchy too much, directly speaking code may not be suitable for beginners)

GPU compositing

(in the following separate introduction, although simply to rely on stickers, but also to introduce OpenGL and GPU chips, the content is too long)

Extended Learning

This section is I am most familiar with, the result is because of this just want to spend more time to write well, so wait until later send out well, we can first look at the following several sites:

    • Chromium
    • Mozilla Hacks
    • Surfin ' Safari
Question sixth: How does the browser show the page?

As mentioned earlier, the browser has rendered the page as a picture, and the next question is how to display the image on the screen.


In Linux, for example, the most straightforward way to control the screen in an application is to write the bitmap of the image to /dev/fb0 a file, which is actually a memory area mapping, a memory area called Framebuffer.

It is important to note that hardware acceleration, such as OpenGL, is not Framebuffer.

From memory to LCD

There is usually an LCD controller on the phone's SoC, and when the Framebuffer is ready, the CPU notifies the LCD controller via the AMBA internal bus, which then reads the data in the Framebuffer, formats the conversion, gamma correction, and so on, eventually via the DS I, HDMI and other interfaces sent to the LCD display.

Take OMAP5432 as an example of a parallel data transfer that it supports:

LCD Display

Finally, briefly introduce the LCD display principle.

First, in order for the human eye to see, must have the light enters, either through the reflection, or has the light source, for example the Kindle uses the E-ink screen itself is not luminous, therefore must be in the light place to be able to read, its advantage is the power saving, but the limit is too big, therefore almost all LCD will bring the light source.

At present, the LCD is usually used led as a light source, led on the power supply, under the action of the voltage, the internal positive and negative electronic bonding will release photons, resulting in light, this physical phenomenon called electroluminescent (electroluminescence), which is introduced in the previous introduction of optical fiber.

Here's what IPod Touch 2 looks like when it's taken apart: (from Wikipedia):

You can see 6 LEDs in it, which is the light source for the entire screen, which is output to the screen through reflected reflection.

With a light source to be colored, it is common practice in LEDs to use the color filter to turn the LED light source into different colors.

In addition, the direct use of three colors of the LED is also feasible, it can avoid the light-induced photon waste, reduce power consumption, very suitable for smart watches such a small screen, Apple acquired by the Luxvue company is this way, interested to study its patent

Each physical pixel on the LCD screen is actually made up of 3 dots of red, green, and blue, each of which can be individually controlled, with the following microscope amplification (from Wikipedia):

It is white when you can see every 3 colors of the filter, it is black, if you look closely you can see that some points are not completely black, this is the anti-aliasing effect on the font.

A variety of colors can be produced by the different combinations of these 3 color intensities, which can generate 256 * 256 * 256 = 16777216 Colors If each color point produces 256 brightness.

Not all display brightness can reach 256, in the selection of the display is a parameter 8-bit or 6-bit panel, wherein the 8-BIT panel can physically reach 256 kinds of brightness, and 6-bit is only 64, it needs to rely on the refresh rate control (Frame rate contr OL) technology to achieve a 256 effect.

How do I control the brightness of these color points? This depends on the liquid crystal, the characteristics of the liquid crystal is when the current through the rotation will occur, so that some of the light is blocked, so long as the voltage control of the liquid crystal can control the brightness of the color point, the current mobile phone screen is usually used to control the TFT controller, the most famous in the TFT to the number of IPS panel.

Most of these filtered light will go directly into the eyes, some light will also be on other surfaces through diffuse (diffuse) reflection or mirror (specular) reflection and then into the eyes, plus the effect of environmental light, to really calculate how much light to the eye is a problem, Interested readers can study physics-based rendering.

When the light enters the eye, the next step is the field of biology, so we're done here.

Extended Learning
    • "Computer Graphics, 3rd edition:principles and practices"
    • "Interactive computer Graphics"
What is ignored in this article

For ease of writing, many of the underlying details are ignored in the previous introduction, such as:

    • Memory-related
      • Heap, there are a number of allocation strategies here, such as the implementation of malloc
      • Stacks, function calls, already have a lot of excellent articles or books introduced
      • Memory mapping, dynamic library loading, etc.
      • Queues are almost everywhere, but these details and principles don't matter much.
    • Various caches
      • CPU cache, OS cache, HTTP cache, backend cache, and more
    • Various monitoring
      • Many logs are saved for subsequent analysis

[to] what happened from the input URL to the completion of the page loading process

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.