Others111

1What is http

To put it simply, http is a request response protocol and an application layer protocol for computer communication. It is applied on top of tcp and fixes the message data format between the server and the client. The message body is mime format, the request header is in ASCII format. It is a hypertext transfer protocol.

1.1 What is HTTPS?

HTTPS is actually HTTP + SSL/TLS, but what is SSL/TLS? In fact, it is SSL或TLS, both of which are 加密安全协议, and SSL is the predecessor of TLS. Now most browsers do not support SSL, so now TLS is more widely used, but because SSL is relatively famous, So it is still collectively calledSSL/TLS.

Then why use HTTPS? Because HTTP is transmitted in clear text, which is not safe. a> is relatively safeHTTP + SSL/TLS is relatively safe, that is, HTTPS

1.2 Several versions of http were born in total

There are three versions of http, namely HTTP1.0, http1.1 and http2.0

http1.0: Short link Each request must establish a connection, called a tcp connection. When both ends process the data, the connection is immediately disconnected, so this is a stateless request, and the server does not record the client's previous requests.

http1.1 long connection adds a connection field on the basis of 1.0. Its value is keep-alive, which means that the connection is not disconnected. This connection method improves network utilization.

http 2.0 just uses a frame to encapsulate 1.1. It supports multiplexing, connection sharing, and header compression, and supports active push by the server.

Baidu security verification

2 http status code

• 1XX: After receiving the request, the requester needs to continue to perform the operation, which is less commonly used.
• 2XX: Request successful, commonly used is 200
• 3XX: Redirect, the browser will automatically jump to a new URL address after getting the status code returned by the server. This address can be obtained from the Location header of the response:
  • Benefits: Website revision, domain name migration, multiple domain names pointing to the same main site to divert traffic
  • Commonly used:
    • 301: Permanent jump, such as domain name expiration, change domain name
    • 302: Temporary jump
• 4XX: Client error, the request contains a syntax error or the request cannot be completed.
• -Commonly used:
•           - 400: Request error, such as protocol
•           - 403: No permission to access
•           - 404: The interface or file corresponding to this path cannot be found
•           - 405: This method is not allowed to be submitted. For example, the interface must be POST, but GET is used.
• 5XX: Server error. An error occurred while the server was processing the request.
  • Commonly used:
    • 500: The server reported an internal error and could not complete this request.
    • 503: Server down

304 Encountered? Another question, has cache been used?

    304 is a response from the server when the client has cache.
      When the browser requests a URL for the first time, the return status from the server will be 200, the content is the resource requested by the client, and there is also a Last -Modified attribute tagThe time when this file was last modified on the server side. When the client requests this URL for the second time, according to the provisions of the HTTP protocol, the browser will send the If-Modified-Since header to the server to ask for the time. Whether the file has been modified since. The format of the two timestamps is as follows:

      Last-Modified:Last-Modified : Fri , 12 May 2006 18:53:33 GMT

      If-Modified-Since : Fri , 12 May 2006 18:53:33 GMT

      If the resource on the server side has not changed, HTTP 304 (Not Changed.) status code will be automatically returned with empty content, thus saving the amount of data to be transmitted. When the server-side code changes or the server is restarted, the resource is reissued and the return is similar to the first request. This ensures that resources are not sent to the client repeatedly, and also ensures that when the server changes, the client can get the latest resources.

      For static files, such as CSS and images, the server will automatically compare Last Modified and If Modified Since to complete caching or updating. However, for dynamic pages, Last Modified information will not be included, and browsers, gateways, etc. will not cache it, that is, a 200 request will be completed every time a request is made.

The following two pictures are shown. Picture 1 shows the status code of the browser without cache. It can be seen that the status is all 200. Figure 2 shows the status codes when there is cache in the browser. It can be seen that they are all 304. At the same time, we can also compare the loading time of the two pages. The time is located in the Load Time at the bottom line. It can be seen that the gap is relatively large. Using cache can save a lot of time.

 

 

Another article: Look! !

Understanding http 304 response_Response 304_Huang Haha’s blog-CSDN blog

 2.1 The difference between forced caching and negotiated caching

First determine whether the file is expired (I will tell you how to determine whether it is expired below). If it is not expired, it will be triggered. Force caching , and the browser will read it directly. Local file, http status code200 (from memory cache) or (from disk cache)

The file has expired, triggeringnegotiation cache and initiating a request to ask the server if the file是否 has been updated. If there is no update, the browser's local cache file will be used and 304 will be returned. If the file is updated, the server will return the new file to the client and update the new expiration time and cache it.

Summarize:

Forced caching and negotiated caching are both for static resources. For dynamic resource caching methods, please refer to the pseudocode above.
Force cache first, negotiate cache last.
Forced caching is triggered when the resource has not expired, and negotiation caching is triggered after the resource expires.
Methods to determine expiration expires (absolute time), cache-control (relative time)
Determine whether the resource has been updated (Last-Modified and ETag)

The difference between forced caching and negotiated caching_The difference between strong caching and negotiated caching_stubborn丶lili's blog-CSDN blog

3 RestFul style

Restful is a style of resource positioning and resource operation. Not a standard or a protocol, just a style. Software designed based on this style can be simpler, more hierarchical, and easier to implement mechanisms such as caching.

Function

Resources: All things on the Internet can be abstracted into resources

Resource operations: Use POST, DELETE, PUT, GET, and use different methods to operate resources.

Corresponding to add, delete, modify and query respectively.

4 The entire process of the browser from inputting the URL to rendering the page

Answer: The general process is as follows:
1.DNS resolution
2.TCP connection
3. Send an HTTP request
4. The server processes the request and returns the required data
5. The browser parses and renders the page
6. Connect End

After entering a domain name, the domain name needs to find the server address (ip) corresponding to the domain name through DNS resolution, request the link service through TCP, and return the data through the WEB server (apache). The browser builds a DOM tree based on the returned data, and uses the css rendering engine and The js parsing engine renders the page and closes the tcp connection

5 Browser rendering process

First we need to understand the browser's rendering process:

　　1. Parse HTML, generate DOM tree, parse CSS, generate CSSOM tree

　　2. Combine the DOM tree and CSSOM tree to generate a rendering tree (Render Tree)

　　3. The content contained in each element of the rendering tree is calculated, and it is called layout. The browser uses a streaming method to lay out all elements with only one drawing operation.

　　4. Draw each node of the rendering tree to the screen. This step is called painting.

　　That is: parse html and css to build dom tree and cssom tree -> Build render tree (render tree) -> Layout render tree (layout) -> Draw render tree (painting)

Browser rendering mechanism

In general, it can be divided into 4 steps.
1 Parse html and generate DOM tree
2 Parse css and generate CSSOM tree
3 Merge DOM tree and CSS rule tree, Generate render rendering tree
              The rendering tree will only include the nodes that need to be displayed and the style information of these nodes. If a node has the style of
display:none, then It will not be built into the render tree.

             There is an interview question like this, if there are 10 nodes in the DOM
tree, will there definitely be 10 nodes in the rendering tree? What do you think the answer is?
The answer is no. Because we just said that the rendering tree will only include the node that needs to be displayed and its style. If the style of an element in the node is already displaynone, it will not be built into the rendering tree.

4 Layout and draw based on the render tree
This involves two concepts, namely reflow and redraw

             Reflow: When the element attributes change and affect the layout (width, height, inner and outer margins, etc.), reflow occurs, which is equivalent to refreshing the page.
              Redrawing: When the element attributes change but does not affect 126 construction, etc.), redrawing occurs, which is equivalent to dynamically updating the content without refreshing the page

There is a saying: Redrawing does not necessarily cause reflow. Reflowing will definitely cause redrawing.

In actual projects, we usually try to reduce reflow and redraw as much as possible in order to improve performance. This point is also often tested in interviews.
 

6 What is reflow, what is repaint, and what are the differences between them?

Redraw: When the page element style change does not affect the element's position in the document flow (such as background-color, border-color, visibility), the browser will only A new style is assigned to the element and repainted.

Reflow: When part or all of the render tree changes due to the size, layout, hiding, etc. of elements, the browser re-renders part or all of the DOM.

Reflow will definitely cause a redraw, but redraw will not necessarily cause a reflow.

have to be aware of is 

　　display:none will trigger reflow, while

　　Visibility: The hidden attribute indicates a hidden element. The element still occupies the layout space and does not change the layout and geometric size, so it will only trigger repaint.

The difference between reflow and redraw

　　Reflow will be triggered when the position or geometric size of the element changes.

　　And when the background color and color changes will cause redrawing,

　　Note: Reflow will definitely cause redrawing, but redrawing does not necessarily cause reflow!

https://www.cnblogs.com/bryanfu/p/15059250.html

6.1 How to reduce redraw and reflow (reflow)

1. Avoid reflow and redrawing in CSS

1. Change the class at the end of the DOM tree as much as possible
2. Avoid setting multiple layers of inline styles
3. Apply animation effects to On elements whose position attribute is absolute or fixed, break away from the document flow
4. Avoid using table layout
5. Use visibility:hidden more and display:none less a>
a> 2. JS operations avoid reflow and redrawing 6. Use css3 hardware acceleration to prevent animation effects such as transform, opacity, and filters from causing reflow and redrawing

1. Avoid using JS to modify one style and then change the next style. It is best to change the CSS style all at once, or define the style list as the name of the class
2. Avoid frequent changes Manipulate the DOM, create a subtree using document fragments, and then copy them into the document

3. Avoid looping to read attributes such as offsetLeft and save them before looping
4. For complex animation effects, use absolute positioning to separate them from the document flow, otherwise it will cause A large number of parent elements and subsequent elements reflow

Interview question: Let’s talk about reflow (reflow) and redrawing and how to avoid reflow to improve performance_Wanshishengyisy’s Blog-CSDN Blog

7 localStorage and sessionStorage, the difference between cookies

Life cycle
cookie: You can set the expiration time yourself. If not set, it will expire after closing.

localStorage: Saved permanently unless cleared manually.

sessionStorage: is cleared after the browser is closed.

Storage size
cookie: Storage size is only 4k

sessionStorage and localStorage have 5M

http request
cookie: carried with every http request, affecting performance.

sessionStorage and localStorage are only stored on the client side and do not participate in server-side communication.

8 Can sessionStorage be shared among multiple windows?

Answer: Yes, but there are restrictions; and the word "share" cannot be used. It should be a copy and cannot be interoperated. ...

1. sessionStorage
SessionStorage itself means that every time a new window is opened, it has its own sessionStorage object. Closing the window expires the sessionStorage of the current window;
However, the B page opened through the A page (such as: window.open('Same source URL')) will copy the source web page sessionStorage and be accessible in window B;
Modifying the sessionStorage of window A will not affect the sessionStorage inside window B.

2. locaStorage
does not expire and can be shared (N pages can access the same localStorage object as long as they are in the same domain)
 

9 The difference between tcp and udp and their application scenarios

Both tcp and udp are communication protocols and transport layer protocols, but their communication mechanisms and application scenarios are different
1udp is connectionless (no data is sent before sending it) Need to establish a connection) TCP is connection-oriented (data needs to be transmitted after establishing a connection, what is mentioned here is the three-way handshake of TCP;

2udp is unreliable transmission, and tcp is reliable transmission (because tcp has congestion control and other mechanisms to ensure error-free delivery of data, while udp has no relevant mechanism and does not guarantee reliable delivery of data)

3udp is oriented towards message transmission, while tcp regards data as a series of unstructured byte streams and is oriented towards byte stream transmission.

4 udp supports one-to-one, one-to-many, and many-to-many interactive communication; tcp is a one-to-one two-point service, that is, a connection has only two endpoints.
In summary, it can be seen that
tcp is a reliable transmission protocol, but the efficiency is slow; while udp is an unreliable transmission protocol, but the efficiency is fast.

Therefore
Applicable scenarios of tcp:

Used in situations where the integrity and accuracy of communication data are required. Such as: important file transfer, email sending, etc.

Applicable scenarios for udp:

It is used in situations where the requirements for communication speed are high and the security and integrity of data information are relatively low. Such as: real-time communication such as Internet phone calls, live video conferencing, etc.

10 git common commands

1. How are projects managed in your company?

Answer: Project version control is mainly done through git.

1. What are some common git commands?

Answer: The commonly used ones in my work include git add, git status, git commit –m, git push, git pull, etc.

1. Let’s talk about how to resolve conflicts if multiple people operate the same file.

Answer: When a conflict occurs when multiple people collaborate to modify the same file, I first git pull the remote file, manually modify the conflicting code, then git add, git commit, git push and then upload it to the remote warehouse. If the pull fails and a conflict occurs, you can temporarily save it through git stash, then pull it, and then git stash pop, take out the original writing, modify it manually, and then submit it.

Comprehensive list of commonly used Git commands: basic usage of git commands

11 User interaction, experience knowledge

What are the methods for improving user experience in front-end software development? - Know almost

12 Have you ever been exposed to low code?​ 

Low Code (Low Code) is a visual application development method that uses less code and delivers applications faster, eliminating the need for programmers to develop The code is automated and is called low code.

What is low-code? - Know almost

13 Cross-domain

Why does cross-domain occur?

Currently, the most popular thing is to separate front-end and back-end projects, that is, front-end projects and back-end interfaces    are not under the same domain name, then the front-end There must be cross-domain behavior when the project accesses the back-end interface.

Cross-domain: refers to requests restricted by the browserSame Origin Policy

When any of the protocols, subdomain names, main domain names, and port numbers are different, they are all counted as different domains. Requesting resources from different domains is considered "cross-domain".

solve:

The first type, server (backend) CORS

Change header

res.header("Access-Control-Allow-Origin", "*"); // 允许的域名
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 允许的请求方法

(Will trigger preprocessing options)

Second type: open the proxy on the front end

In test environment: 

Cross-domain development environment, that is, the cross-domain problems we encounter when accessing the interface when developing and starting services in the vue-cli scaffolding environment. vue-cli has opened a service locally for us, and we can use this service to help us proxy Request, resolve cross-domain issues

This is vue-cli configuring webpack's reverse proxy

前端和后端存在跨域问题， 但是后端和后端不存在跨域问题

vue-cli为我们在本地开启了一个服务，前端访问本地服务，ip端口都相同， 不存在跨域问题

然后本地服务再访问服务器--》也就是后端访问后端，不存在跨域问题

 Add configuration in vue.config.js:

module.exports= {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
         // 路径重写
        pathRewrite: {
            // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
            '^/api': ''// 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 '^/api': ''  的意思是吧/api幻化成’’ 
        }
      },
    }
  }
}

In production environment:Use Nginx reverse proxy

server{
    # 监听9099端口
    listen 9099;
    # 本地的域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://baidu.com
    location ^~ /api {
        proxy_pass http://baidu.com;
    }    
}

https://manor.blog.csdn.net/article/details/121027173?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-121027173-blog-126756786.235%5Ev32%5Epc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-121027173-blog-126756786.235%5Ev32%5Epc_relevant_default_base3&utm_relevant_index=5https://manor.blog.csdn.net/article/details/121027173?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-121027173-blog-126756786.235%5Ev32%5Epc_relevant_default_base3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Rate-2-121027173-blog-126756786.235%5Ev32%5Epc_relevant_default_base3&utm_relevant_index=5

• Jsonp

  The earliest solution can be implemented using the cross-domain principle using script tags (unrestricted).

  limit:

  • Need service support (Getting)
  • Only GET requests can be initiated

15 Threads and processes

Process: There are many independent programs in the computer. Each program has an independent process, and the processes are independent of each other. Such as QQ, computer manager, etc.

Thread: It is the smallest execution unit of a process. A process has at least one thread.

16 nginx

Reverse proxy: A proxy to the server

Client ---------- Reverse proxy ----------- Server

The client can only access the reverse proxy server, but the real server cannot.

Complete step record of Vue project packaging and publishing_vue packaging and publishing_The blog of a small code farmer who loves shoulder training-CSDN blog

17 What is the structure of jwt parsed, and the difference between jwt and session

What is the difference between jwt and traditional session? _The difference between jwt and session_Jianquan~Richardlie's blog-CSDN blog

Traditional session authentication

1. The user sends the username and password to the server.

2. After the server is verified, relevant data, such as user role, login time, etc., will be saved in the current session.

3. The server returns a session_id to the user and writes it into the user's Cookie.

4. Each subsequent request by the user will pass the session_id back to the server through Cookie.

5. The server receives the session_id, finds the data saved in the previous stage, and learns the user's identity.

Problems revealed based on session authentication.

The problem with this model is that it does not scale well. Of course, there is no problem with a single machine. If it is a server cluster or a cross-domain service-oriented architecture, session data sharing is required, and each server can read the session.

Token-based authentication mechanism

The token-based authentication mechanism is similar to the http protocol and is stateless. It does not need to retain the user's authentication information or session information on the server. This means that applications based on the token authentication mechanism do not need to consider which server the user logs in to, which facilitates application expansion.

The process is as follows:

• User uses username and password to request the server
• The server verifies the user's information
• The server sends a token to the user through verification
• The client stores the token and sends the token value with each request.
• The server verifies the token value and returns the data

What does a JWT look like?

JWT is composed of three pieces of information. Linking these three pieces of information text with . forms a JWT string. like this:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

• The first part we call it the header
• The second part is called payload (similar to the items carried on an airplane)
• The third part is the visa (signature).

The header defines the type, encryption algorithm, and then base64 encryption

The payload puts some useful information of the user and encrypts it with base64.

The visa part requires the base64-encrypted header and the base64-encrypted payload to be used. The string composed of concatenation is then encrypted with a salted secret combination through the encryption method declared in the header, and then constitutes the third part of the jwt.