Disclaimer: The materials used in this column are written by VIP students of Kaige Academy. Students have the right to remain anonymous and have the right to final interpretation of the article. Kaige Academy aims to promote VIP students to learn from each other based on public notes.
Two program architectures are introduced:
1. C/S architecture (client/server): The feature of this architecture is that the client can perform a series of audio and video processing by calling the relevant hardware of the client to achieve the gorgeous effect the program wants, while the server only It needs to be responsible for transmitting data with the client, which reduces the pressure on the server. Therefore, it is necessary for users to download relevant programs on the client side to conduct business. But the program of this architecture will be very troublesome to update, because a server may be connected to thousands of clients. Once the server is updated, the programs on the clients connected to it also need to be updated together. There will also be some verification, information processing and other operations above, which will make the update very troublesome. If the network speed is not good, the update time will be too long, and it cannot be used during the update period, which greatly affects the user's business processing. Therefore, this structure is more suitable for large-scale games, such as League of Legends, but not suitable for some software and management software involving shopping and information, such as the payment system of China Unicom and banks. The advantages and disadvantages of this architecture are summarized as follows:
1.1 Advantages:
1.1.1 Can reduce server pressure
1.1.2 Can call some local hardware devices such as printers, serial ports, etc.
1.1.3 Can achieve brilliant special effects
1.2 Disadvantages:
1.2.1 update is troublesome
1.2.2 Equipment needs to be installed in advance
2. B/S architecture (browser/server): This architecture does not need to download any client, just enter the address directly on the browser, as long as there is a browser. Therefore, the browser is equivalent to a page parser. The page content (such as page structure, materials, etc.) displayed on the browser is all downloaded from the server. Every time the page is refreshed, the page data will be downloaded from the server again. There is no such thing as updating and not updating, but the pressure on the server will also be great. However, in order to reduce the pressure on the server, some materials, such as photos, are cached locally, and each time the photos are refreshed, they will not be downloaded again. This kind of architecture is suitable for some information software, but it cannot be used for large-scale games, because large-scale games need that kind of gorgeous effect, and this kind of program architecture is difficult to achieve. The advantages and disadvantages of this architecture are summarized as follows:
2.1 Advantages:
2.1.1 The content on the page is downloaded from the server, and it is not updated
2.1.2 Just refresh to see the latest content
2.2 Disadvantages:
2.2.1 The browser will not be able to handle large-scale online games or if there are many temporary files to download
2.2.2 It is difficult to access local hardware devices, it will be very troublesome if you really want to access
2.2.3 The server is under great pressure
3. The benefits of B/S architecture: Nowadays, web pages are everywhere, and many software are used as an APP shell, and then some parts are embedded in web pages to develop software. For example, QQ, QQ security settings, space dynamics, etc. are actually web pages. For example, clicking on an article in the official account in WeChat is actually opening a web page. This development can save a part of human and financial resources. Imagine that a software needs to be updated and downloaded if only a little content is modified. This will require a lot of human and financial resources. However, if it is embedded in a web page, if the content of the web page changes, the user will only You need to log in again or refresh to see the latest content.
The process of browser parsing web page:
1. Browser kernel: The browser is actually a parser, which is used to parse the markup. We use a variety of browsers, such as IE, Firefox, 2345, etc., but it seems that there are so many browsers. In fact, many browsers use the same kernel. Here are a few more popular browsers. The kernel and its corresponding browser:
2. Analysis process:
2.1 Text solution:
2.1.1 There are mainly page structure (markup code), material, JS and CSS, and logic on the server. Except for logic, everything else can be downloaded by the browser. After we enter an address on the web page, the DNS domain name resolution system will resolve the domain name and get an IP address;
2.1.2 The browser carries the requested path and client information (such as the version of the browser, the version of the operating system, the language used, etc.) to access the server according to this IP address. At this time, the server does not immediately store all the content. Download it to the browser, but first let the browser download the page structure, that is, the markup code part. After the browser accepts the tag, it will parse it immediately, and then the general framework of the web page will come out;
2.1.3 If the browser encounters materials such as photos that need to be downloaded during the parsing process, it will request the server to download the materials. In order to reduce the pressure on the server, some browsers will cache these materials locally. We usually use 360 to clean up Browser garbage is actually cleaning these caches. So here, if the browser has this operation, then when the browser requests to download the material, it will first ask if there is any in the local cache, and then request the server to download, if the browser does not have this operation, it will directly request The server downloads the material. If there is one photo, request the server to download once, and if there are several photos, request the server to download several times; at this point, the analysis is over.
2.2 The diagram is as follows:
In order to prevent the browser from maliciously intercepting and leaking privacy when accessing the server based on the IP address, two protocols have been developed: http and https. If it is https, it means that it is encrypted and the security can be guaranteed. Generally, websites designed for finance will be https.
Introduction to web technologies we will learn next:
1. HTML5 (markup): This is actually the markup code part of the above parsing process, which is responsible for building a web page structure. HTML is divided into versions. The difference between version 4 and version 5 is a bit big. Compared with version 4, version 5 has abandoned some outdated tags. What we have to learn is version 5.
2. JS (Scripting): It is actually a programming language, but it runs in the browser. It is mainly responsible for asynchronous data loading and simple logic operations (the main logic operations are still completed by the logic part).
3. CSS (style sheet): It is suitable for adjusting the appearance of each mark, and is mainly responsible for the simple actions, color effects and gorgeous effects of the web page.
4. Take the website of Tukai Ge School as an example: the general frame structure of the entire page is completed by HTML, while the font effects and various pictures are completed by materials and CSS3, and some floating advertisements and windows are completed. What is done by JS.
