Among the front-end developers, a large proportion of students are not from specialized courses, so they do not have much contact with basic required courses, such as computer composition principle, operating system, computer network, data structure and algorithm.

The more you learn, the more you realize how important this knowledge is.

For example, we all know that js inside 0.1 + 0.2 is not equal to 0.3, why? This involves the representation of floating point numbers in the constitution of the computer, and the addition and subtraction of floating point numbers (the text will have the vernacular version of the solution).

For example, input a+ B from the keyboard, how to output to the screen through the CPU scheduling? This is where the Von Neumann system comes in. If you’re a programmer and you don’t know the basic flow of data from keyboard to screen, it’s time to read this’ Complete supplement ‘

This article is a computer composition principle of the most basic entry article, I think there is no need for the front end so in-depth this topic, master the basic computer composition principle of common sense.

1. How computers work

First, the five basic components of a computer are shown below: input device (such as keyboard), memory (such as memory), arithmetic unit (CPU), controller (CPU), and output device (display).

It works as follows

1.1 Controller –> Control input device —-> instruction flow to memory

As we enter data, the controller in the CPU asks the input device to store these instructions into memory.

1.2 Controller analysis instructions –> control memory –> send data to the arithmetic unit

After the controller analyzes the instructions, the memory then sends the data to the computer (both the controller and the computer are inside the CPU)

Note here that memory can store both data and instructions

1.3 The controller controls the arithmetic unit to perform data operation and return the operation result to the memory

1.4 The controller controls the memory to return the results to the output device

From here, let’s take a closer look inside the computer, at how the CPU interacts with the memory.

2. CPU and its working process

The two most important parts of the CPU are the arithmetic unit and the controller. Let’s take a look at the main functions of the arithmetic unit

2.1 Main components of arithmetic unit

As shown above, the most important part of an arithmetic unit is the ALU, or arithmetic logic unit in Chinese, which performs arithmetic and logical operations. The other MQ,ACC, we don’t have to worry about that, it’s just registers.

2.2 Main Components of the controller

The most important part of the controller is the CU (control unit), as long as it is the analysis of instructions, give control signals.

IR (instruction register), which stores the instruction that needs to be executed currently

The address of the instruction stored on the PC.

2.3 Example – The execution process of fetch command

First, the process of fetching instructions is as follows

  • The first step,PCThat’s where the instruction is located, and to know what the next instruction is, we have to go to memory,CPUI know what to do next.PCTo the memory storeMARTake the address of the instruction to execute,MAR(a place in memory where instruction addresses are stored)
  • Step two and step three,MARGo to the storage body to get the instruction, put the instruction address inMDR(a place in memory dedicated to storing data)
  • The fourth stepMDRIs returned toIRInside,IRIt’s where we put the instructions we just took out of the storage

The instructions are then analyzed and executed as follows

  • Fifth,IRPut instructions inCU, to analyze the instruction, such as analysis is a fetch instruction, and then to execute the instruction (here fetch instruction, in fact, is an address code, press this address to the storage to fetch data)
  • Step six, step sevenIRThey’ll go on to the one in the storageMAR(where addresses are stored),MARJust go to the store according to the address in the fetch instruction
  • In step 8, the retrieved data is returned toMDR(Where data is stored)
  • Step 9,MDRThe data is put into the register of the arithmetic unit, where the fetch process is finished.

For an interlude, we know that the data is stored in memory in binary, which is 0 and 1, what are the terms for 0 and 1?

Let’s take one of the ways to store zeros and ones

  • Does the capacitor have a charge, a charge is 1, no charge is 0
  • The following figure

3. Computer programming languages

Let’s take a look at machine language, how to represent the instruction to store a number, such as the following figure

00000000000000010000

  • The first of them0000, is in assembly languageLOADSo load, load what
  • Loading address000000010000On the data to the second0000(Register location).

Now, let’s see what happens in assembly language

LOAD A, 16 means to STORE the data in unit 16 in the storage body into register address A. ADD C, A,B means to ADD the data in registers A and B to get C STORE C, 17 means to STORE the data in registers 17 in the storage body

And finally, what do we do in high-level language

High level languages are very simple, just a+ B, you don’t have to worry about registers, storage things.

Summary of this section

High-level languages generally have two ways of translating into machine languages

  • One is to use it directlyThe compiler, to convert the high-level language tobinaryCode, such ascSo that thecIt’s extremely fast to run because it’s compiled in machine language and runs directly on the system, but the problem is that it can be slow to compile.
  • One is explanatory, for examplejs, is to translate a line of code intoMachine languageIt is possible thatassemblyCode orThe bytecode), interpret a line, execute a line

It is important to note that in accordance with the first one will be a lot of advanced code translated into machine language, which has a lot of space to make the compiler code optimization, interpreted language is hard to do the optimization, but in the v8 engine, js, or to be optimized, the compilation phase (code is compiled and executed two phase) to do some optimization code, The method of executing immediately after compilation is often referred to as JIT (Just In Time) Comipler.

4. Base conversion

Section 4.3 explains why 0.1 + 0.2 equals 0.3

4.1 How to convert binary to decimal

For example, how to convert base 2 101.1 to base 10. (parseInt(‘101.1’, 2) is not acceptable because parseInt returns an integer.)

The transformation method is as follows:

What is the rule of the figure above?

I’m going to multiply every number in binary by 2 to the corresponding power, and notice I’m multiplying it by the negative power after the decimal point. One more example and you’ll see,

Binary 1101 is converted to decimal

4.2 Converting decimal integers to binary

JS can use toString(2) method to convert. If you want to use a general method, such as converting a decimal number (29) to a binary number, the algorithm is as follows:

  • Divide a given decimal number 29 by 2, resulting in 14. The remainder 1 is the lowest digit of the binary number
  • Divide 14 by 2, which becomes 7 and has a remainder of 0
  • Divide 7 by 2, you get 3, you have a remainder of 1, and divide 3 by 2, you have a remainder of 1
  • Divide 1 by 2 again, the quotient is 0, remainder 1 is the highest digit of binary number

4.3 Decimal Conversion of decimals to binary

The method is to use “multiply by 2, take the whole, order” method. The specific approach is:

  • Multiply two by a decimal number to get the product, taking out the integral part of the product –
  • Multiply the remaining fraction by 2, and you get another product, and then you take out the integral part of the product
  • This continues until the fractional part of the product is zero or the desired precision is achieved

Let’s take a specific example

For example, decimal 0.25 is converted to binary

  • 0.25 * 2 = 0.5 Take the integer part: 0

  • 0.5 x 2 = 1.0 Take out the integer 1

That is, the binary of decimal 0.25 is 0.01 (the first fetch is the highest bit, the last fetch is the lowest bit).

At this point we can try decimal 0.1 and 0.2 how to convert to binary

0.1(decimal) = 0.0001100110011001(binary) Decimal number 0.1 to binary Calculation process: 0.1 x 2 = 0.2...... 0 -- The integer part is "0". The integer part "0" becomes "0" after being zeroed out, followed by "0.2". 0.2 * 2 = 0.4... 0 -- The integer part is "0". When the integer part "0" is cleared, it becomes "0" and is then calculated with "0.4". 0.4 * 2 = 0.8... 0 -- The integer part is "0". The integer part "0" becomes "0" after being zeroed out, and is then calculated with "0.8". 0.8 * 2 = 1.6... 1 -- The integer part is "1". The integer part "1" becomes "0" after being zeroed out, followed by "0.6". 0.6 * 2 = 1.2... 1 -- The integer part is "1". The integer part "1" becomes "0" after being zeroed out, followed by "0.2". 0.2 * 2 = 0.4... 0 -- The integer part is "0". When the integer part "0" is cleared, it becomes "0" and is then calculated with "0.4". 0.4 * 2 = 0.8... 0 -- The integer part is "0". The integer part "0" becomes "0" after being zeroed out, and is then calculated with "0.8". 0.8 * 2 = 1.6... 1 -- The integer part is "1". The integer part "1" becomes "0" after being zeroed out, followed by "0.6". 0.6 * 2 = 1.2... 1 -- The integer part is "1". The integer part "1" becomes "0" after being zeroed out, followed by "0.2". 0.2 * 2 = 0.4... 0 -- The integer part is "0". When the integer part "0" is cleared, it becomes "0" and is then calculated with "0.4". 0.4 * 2 = 0.8... 0 -- The integer part is "0". The integer part "0" becomes "0" after being zeroed out, followed by "0.2". 0.8 * 2 = 1.6... 1 -- The integer part is "1". The integer part "1" becomes "0" after being zeroed out, followed by "0.2". ... ... So, be an integer, in turn, are: "0" and "0" and "0", "1", "1", "0" and "0", "1", "1", "0" and "0", "1"... . So you can definitely see that there's an infinite loop going on in the integer part.Copy the code

Let’s look at 0.2

0.2 binary is 0.2*2=0.4, the integer bit is 0 0.4*2=0.8, the integer bit is 0 0.8*2=1.6, the integer bit is 1, 0.6 0.6*2=1.2, the integer bit is 1, 0.2*2=0.4, the integer bit is 0 0.4*2=0.8. Integer bit zero just push it down! It's a decimal times 2, and it just keeps going and it keeps going 0.0011001Copy the code

So 0.1 and 0.2 don’t translate perfectly into binary, so of course they don’t add up to 0.3

Fixed-point and floating point numbers

First of all, what are fixed-point numbers?

5.1 fixed-point number

Binary 1011 and -1011, for example, are pure integers, represented by 0 if they are integers, and 1 if they are negative

Similarly, pure decimals can be expressed as follows:

What if it’s not a pure decimal or a pure integer?

For example, 10.1 can be multiplied by a scaling factor of 10.1 –> 101 — 10, or 10.1 –> 0.101 — 100

Fixed point number is very simple, next we introduce floating point number, and then JS inside, the numbers are double precision floating point number, so learning floating point number for us to understand JS numbers help.

5.2 floating point number

What about floating point numbers?

Above is the scientific notation of the decimal system, from which we need to know a few concepts, one is mantissa, radix and order code

  • mantissaIt has to be a pure decimal, so in the figure above1.2345The mantissa format is invalid and needs to be changed0.12345
  • baseIn binary it is2
  • exponentIt’s what power

So the general representation of floating point numbers is as follows:

  • S stands for mantissa
  • R stands for cardinal number
  • J stands for order code

It is important to note that adding and subtracting floating-point numbers is not as simple as we have described above, and is done in the following steps

If you’re interested in these terms, you can look them up on the Internet, and you just need to know that floating-point addition and subtraction are a lot of trouble, but if you’re going to build a library of floating-point operations, you’re going to want to know everything about them.

6. Locality principle and CATCHE

Look at the picture below

(Note that MDR and MAR are logically in main memory, but in circuit implementation, MDR and MAR are close to the CPU.)

The figure above shows a string of code that can be interpreted as a FOR loop for JS

const n = 1000;
const a = [1, 2, 3, 4, 5, 6, 7]
for(let i =0; i < n; i++) {
    a[i] = a[i] + 2
}
Copy the code

We can see that

  • Array data is sometimes stored consecutively in memory
  • If we want to fetch data, such as 1000ns(ns stands for nanoseconds) to fetch a[0] from memory, then 1000 * 8 = 8000 ns to fetch a[0] to a[7]
  • If our CPU finds that this is fetching array data, then I would like to store the nearest data blocks A [0] through A [7] in the cache, so that it only needs to fetch data once, consuming 1000ns

Cahce is an application of the locality principle

  • Spatial locality: Information to be used in the near future (instructionanddata), likely with the information now being used inThe storage spaceUpper is adjacent
  • Time locality: Information to be used in the near future, most likely nowInformation in use

As you can see, the cache fetches data from a[0] to a[9] all at once in 1000ns. Since the cache is a high-speed memory, it can interact with the CPU much faster than the CPU can interact with main memory.

Moving on to the final section (which skips bus), the evolution of I/O devices

7. Evolution of I/O devices

What is I/O?

Input /Output (I/O for short) refers to the transfer of data between any operation, program or device and a computer.Copy the code

File reads and writes, for example, are typical I/O operations. Let’s take a look at the evolution of I/O devices

cpu
I/O devices
I/O devices
CPU
I/O devices
cpu
cpu
I/O
I/O
cpu

Let’s move on to phase two

  • In order to solve the first phase of the CPU waiting for the I/O device, the serial way of working, all the I/O devices talk to the CPU through the I/O bus, and once one of the I/O devices has finished its task, it tells the CPU through the I/O bus, in the form of an interrupt request, that I’m ready.

  • But for high-speed peripherals, they perform the task quickly and so frequently interrupt the CPU, in order to solve this problem, high-speed peripherals with with a direct data access between main memory and the DMA bus connection, only need to arrange began to high-speed CPU peripherals to do, the rest of the need not tube, this can prevent frequent interruptions CPU.

Finally, let’s look at stage three

In the third stage, the CPU manages the I/O devices through the channel control unit. The CPU does not need to arrange tasks for it, but simply issues commands such as start and stop, and the channel unit automatically arranges the corresponding I/O devices to work

The end of this article, I hope you give a thumbs up, than the heart 💗.