Our title is Web Front-end Development Engineer, which is a subset of Web development. In fact, regardless of the front end and back end, will eventually master the development skills of the front and back end, but there is emphasis on proficiency, depth and details. Mastering back-end development knowledge and computer network knowledge is of great help to troubleshooting and cooperation and communication in work. Here’s a very common interview question to start with:

Interview question: What are the steps from entering the URL to presenting the page?

Simple version example:

  1. The user typed inwww.baidu.com
  2. To send a web request to Baidu, the browser needs to know baidu’s IP address first, so it asks the DNS server, and the DNS server returns the IP:180.101.49.11:443
  3. The request packets are packaged by HTTP, SSL, TCP, IP, and Ethernet protocols for transmission.
  4. Because the two parties do not belong to the same subnetwork, the transmission needs to be forwarded through the network adapter. The MAC address of the local network adapter is sent to the gateway MAC address of baidu server (obtained through ARP).
  5. The server establishes a TCP connection with the client, receives the request, and returns an HTTP response containing an HTML page
  6. The browser receives the response, parses the HTML page from top to bottom, and does different things when it encounters different tags. For example,scriptThe tag will execute the JS code inside it,styleTags are added to stylesheets and so on, where several requests are made for the tag, requesting the corresponding resource file.
  7. After the browser parses, the page is displayed.

You can see that there are two big steps in the whole process: one. Network security accurate and complete transmission of data; Ii. Browser parsing processing displays all kinds of resources. First, just like the rookie Courier station, no matter what your delivery is, use a layer of protocol package to paste the address and contact information, accurate delivery to the destination. The other is to run the code as an application for users to use.

For more information about the process, you can refer to Nguyen Yifeng – Introduction to Internet Protocol (1), Nguyen Yifeng – Introduction to Internet Protocol (2), how is the network connected

To learn more about the process of 2, refer to the browser page rendering mechanism, browser environment you don’t know

Interview questions derived from the steps above:

  • In Step 2, what does DNS do:
    • The Domain Name System (DNS) does a very simple task. It checks IP addresses based on Domain names. Think of it as a giant phone book.
    • In the absence of caching, the ORDER of DNS queries is root -> top-level -> secondary -> tertiary, for examplewww.baidu.com, the query order is.root ->.com ->.baidu ->.www. The root domain name is usually omitted.
    • For more information, see introduction to DNS Principles
  • What is a CDN and what does it do
    • Content Delivery Network (CDN) is a Content Delivery Network that enables users to obtain resources nearby and improves access efficiency.
    • The CDN takes over the DNS query in Step 2 and returns the most efficient node (usually the nearest node) to the user based on the nearest principle and load balancing, thus improving the transmission efficiency.
  • What is HTTP in Step 3, and how is it different from version 1.0, 1.1, and 2.0
    • HTTP is a stateless protocol. JS in the browser sends HTTP requests to the server when invoking XHR. Protocol is for the front and back ends to understand and communicate with each other. An HTTP packet consists of a header and a body. The contents of a request packet and a response packet are different
    • HTTP 1.1 has the following major optimizations compared to HTTP 1.0:1. More headers that control caching policies; 2. Support resumable transmission at breakpoints; 3. More status codes; 4. Pass hostname; 5. Support long links
    • HTTP 2.0 has the following major optimizations compared with HTTP 1.1:1. Parsing packets in Binary Format; 2. Multiplexing, where multiple requests on a connection are independent of each other and do not block; 3. Compress the header to avoid repeated transmission of the header; 4. Support server push instead of only client initiating request.
    • More on the differences between HTTP1.0, HTTP1.1, and HTTP2.0
  • What does HTTPS do in Step 3
    • HTTPS is HTTP + SSL/TLS. SSL processes and transmits HTTP packets. Encrypt transmissions to prevent them from being hijacked.
    • SSL/TLS uses asymmetric encryption to transmit symmetric encryption keys, which in turn uses symmetric encryption to transmit content. Asymmetric encryption requires a trust certificate to obtain a public key.
  • What is the process of establishing a TCP connection in Step 5
    • Three times to shake hands four times to wave, three times to make sure you’re responding properly, four times to make sure you’re disconnected properly.
    • A DDoS attack uses a three-way handshake. A large number of clients do not respond after the first handshake. As a result, the server consumes huge resources to maintain the connection and other normal users fail to connect.
    • More on TCP/IP (5th edition)
  • What is the order of JS execution in Step 6?scriptOf the labeldefer asyncWhat does an attribute do
    • When the browser parses HTML, it encounters an object with no special attributesscriptTag, which suspends parsing and executes the JS code immediately. If you havesrcProperties wait until the download is complete before parsing the HTML down. If the download or execution time is too long, it will affect the subsequent page rendering. To solve this problem, you can wearscriptOf the labeldefer asyncattribute
    • addasyncProperty, the JS code download will not block parsing, but after downloading, if parsing is not complete, parsing execution code will be suspended.
    • adddeferProperty, the JS code download will not block parsing, after downloading, if the parsing is not completed, will not suspend parsing HTML, wait until the HTML processing is finished. Multiple beltdefer 的 scriptTags are executed sequentially.
    • That is to say,asyncProperty, which may or may not block parsing,deferProperty must not block.

What is the back-end typically responsible for in a Web application?

In a Web application, the back end is responsible for returning a Response based on a Request. In the early days of Web application development, there was no concept of separation between the front and back ends, and data was returned via templates such as JSP and ThinkPHP, or data was returned via interfaces. It can be seen that after the front-end application is deployed, it is also a Web service. Whether it is static construction or server rendering, it also returns Response according to Request and all kinds of resources.

When a user accesses a web page, the front-end returns HTML, CSS, JS, and IMG resources. The browser executes the XHR request in JS after parsing. The back end receives the request and returns the corresponding data to the front end according to the authentication information and parameters in the request. The front end renders the page by requesting the callback data.

Interface documentation and front-end requests

Currently, mainstream back-end applications provide interfaces, for example, simple user login and obtaining user information.

/ / interface documentation - user login url: http://www.example.com/api/user/login method: POST params: - name: the username type: string required: true - name: password type: string required: true response: - code: 200 msg: success data: - user-token: xxxxxyyyyCopy the code

The front end initiates a request through AXIos:

axios
  .post("http://www.example.com/api/user/login", {
    username: "admin".password: "123456",
  })
  .then((res) = > {
    console.log(res.data);
    localStorage.setItem("user-token", res.data.userToken);
    // { code: 200, msg: success, data: [{ user-token: xxxxxyyyy }] }
  });
Copy the code

In this step, the user obtained the login certificate user-token through login and saved it in localStorage. Then set the axios interceptor, each request automatically with login credentials for server authentication, axios interceptor example is as follows:

axios.interceptors.request.use((config) = > {
  config.headers["user-token"] = localStorage.getItem("user-token");
  return config;
});
Copy the code

When other requests are made, the user-token field is added to the header to enable the server to authenticate the current user. Now we request the user information interface:

/ / interface documentation - user information url: http://www.example.com/api/user/info method: GET response: - code: 200 MSG: success data: - username: admin avatar: http://www.example.com/avatar.pngCopy the code
axios.get("http://www.example.com/api/user/info").then((res) = > {
  console.log(res.data);
  // { code: 200, msg: success, data: [{ username: admin, avatar: http://www.example.com/avatar.png }] }
});
Copy the code

With user-token, the interface can identify the user and return different information for each user. Let’s see how to write an interface like this:

The process of writing an interface

Back-end students like to call themselves CRUD (add, delete, modify and check) tool people when developing business, indicating that most business development has to be completed based on data add, delete, modify and check. To implement a login (search) interface, first implement the register (add) interface. There are also interfaces for password change and user logout.

Before writing an interface, you should have a clear understanding of the functions of the interface, be able to preliminarily determine the parameters and return values of the interface, and write the interface document. Take registering the interface as an example:

/ / interface documentation - registered url: http://www.example.com/api/user/register method: POST params: - name: the username type: string required: true - name: password type: string required: true response: - code: 200 msg: success data: user-token: xxxxxyyyyCopy the code

With the interface documentation, you can see that the registration interface receives the user name and password and returns success. To store user data, back-end services need to connect to the database and create tables. Here we use the NodeJS environment, Koa framework, MySQL database, and Sequelize to manipulate the database. Create table user first:

CREATE TABLE user (id INT NOT NULL AUTO_INCREMENT, username VARCHAR(255) NOT NULL, password VARCHAR(255) NOT NULL, PRIMARY KEY (id) );Copy the code

Then connect to the database:

const Sequelize = require("sequelize");
const sequelize = new Sequelize("database"."username"."password", {
  host: "localhost".dialect: "mysql".pool: {
    max: 5.min: 0.idle: 10000,}});Copy the code

Writing the registration interface

// Define User model
const User = sequelize.define("user", {
  username: Sequelize.STRING,
  password: Sequelize.STRING,
});

User.sync({ force: true }).then(() = > {
  // Create a data item in the User table
  User.create({
    username: "admin".password: "123456"}); ctx.body = {code: 200.message: "Registration successful"}; });Copy the code

For those who want to know more about the back-end practice, you can refer to a complete set of blog project websites based on Node.js Koa2 practice development

A few words can only briefly describe the business interface development process, but the back-end knowledge network includes but is not limited to: operating system, operation and maintenance, network, database, etc. (see backend Architect technical map). The students who are interested in it are only advised to try their best to be proficient in one of them with limited energy.

5. Front-end NodeJS knowledge and common tools

— small tail — my name is ge shengming, good at the front end, have ideas have questions welcome private discussion ^_^