2020-Byte-Frontend-Interview

1. First introduce some languages ​​you know, mainly the backend

2. Do you understand cross-domain?

Domain: The URL composition of a website includes protocol name, subdomain name, main domain name, and port number. For example, https://www.github.com/80 . Where https is the protocol name, www.github.com is the subdomain name, github.com is the main domain name, and the port number is 80. When requesting data from a url on the page, if the protocol name, subdomain name, and main If any one of the domain name and port number is different, cross-domain problems will arise. Even if you  request http://127.0.0.1:80/ on the  http://localhost:80/ page,   there will be cross-domain issues (because the domain names are different). All domains here refer to the collection of protocol\domain name\port number, and the same domain means that the protocol domain name and port number are the same

The cross-domain problem is that browsers are restricted by the same-origin policy. The js of the current domain name can only read window properties under the same domain. 

Same-origin strategy: In the front-end development process, common HTML tags, such as <a/>,<form/>,<img/>,<script/>,<iframe/>and ajaxoperations can point to a resource address or can initiate a request for a resource, then the requests mentioned here include same-domain requests and cross-domain requests. The same-origin strategy is the core basic security strategy of the browser, which is used to defend against illegal attacks. However, we cannot block all cross-domain problems just because we want to defend against illegal attacks.

Cross-domain request: when the request domain is inconsistent with the domain pointed to by the requested resource

• In front-end development, third-party service interfaces (such as mock server, fake API) are often used. With the emergence of specialized division of labor, there are many professional information service providers that provide various interfaces for front-end developers. In this case, cross-domain requests are required (most of them are solved by cros)
• The front-end and back-end belong to different services. When the front-end and back-end separation architecture is adopted, there are cross-domain problems (most of them are solved by reverse proxy methods)

Solution:

• The simplest and most common: use jsonp, that is, json with padding, which, as the name implies, is to fill JSON into a box
• Once and for all: directly set up cross-origin resource access CORS (Cross-Origin Resource Sharing) on ​​the server side, set Access-Control-Allow-Origin in the Request Header header to specify the domain name that can obtain data
• Simple and effective: directly request an image
• Find "Dad": Cross subdomains by modifying document.domain
• Good brothers: receive data across domains through window.name
• Neolithic Age: Cross-domain using HTML5 window.postMessage method

3. Tell me about the http caching mechanism?

Web cache: It can be roughly divided into: database cache, server-side cache (proxy server cache, CDN cache), browser cache. The browser cache contains a lot of content: HTTP cache, indexDB, cookies, localstorage, etc.

HTTP message: The data block sent and responded when the browser and the server communicate. 
The browser requests data from the server and sends a request (request) message; the server returns data to the browser and returns a response (response) message. 
Message information is mainly divided into two parts 

1. The header that contains the attributes————————–Additional information (cookies, cache information, etc.) and cache-related rule information are all included in the header 
2. Contains the body of the data———————The part of the HTTP request that really wants to be transmitted

Properties in Response Headers:

• Etag (higher priority than Last-Modified / If-Modified-Since): When the server responds to the request, it tells the browser the unique identifier of the current resource on the server (the generation rule is determined by the server).
• Last-Modified: When the server responds to the request, it tells the browser the last modification time of the resource.
• If-Modified-Since: When requesting the server again, use this field to notify the server of the last modification time of the resource returned by the server during the last request. After receiving the request, the server finds the header If-Modified-Since, then compares it with the last modification time of the requested resource. If the last modification time of the resource is greater than If-Modified-Since, indicating that the resource has been modified, it will respond to the entire resource content and return a status code of 200; if the last modification time of the resource is less than or equal to If-Modified-Since, the resource has no New modification will respond to HTTP 304, telling the browser to continue using the saved cache.
• If-None-Match: When requesting the server again, use this field to notify the server of the unique identifier of the data cached by the client segment. After the server receives the request, if it finds the header If-None-Match, it will be compared with the unique identifier of the requested resource. If it is different, indicating that the resource has been changed, it will respond to the entire resource content and return a status code of 200; the same, indicating the resource If there is no new modification, it responds with HTTP 304 to inform the browser to continue using the saved cache.
• Expires: It is HTTP 1.0. Now the default browsers use HTTP 1.1 by default, so its function is basically ignored. 
• Cache-Control: Consistent with Expires, both indicate the validity period of the current resource and control whether the browser directly fetches data from the browser cache or re-sends a request to the server to fetch data. It's just that Cache-Control has more choices and more detailed settings. If set at the same time, its priority is higher than Expires. There are six values:

Cache-Control	Is the most important rule. Common values ​​are private, public, no-cache, max-age, no-store, and the default is private.
private	Client can cache
public	Both the client and the proxy server can be cached (the front-end students can think that public and private are the same)
max-age=xxx	The cached content will expire in xxx seconds
no-cache	Need to use contrast cache to verify the cached data (described later)
no-store:	All content will not be cached, forced cache, and contrast cache will not be triggered (for front-end development, the more cache, the better, so... basically say 886 to it)

Mandatory caching: The server informs the browser of a caching time. During the caching time, the next request will use the cache directly, and the comparison caching strategy will be executed if it is out of time.  Comparing cache: Send the Etag and Last-Modified in the cache information to the server through a request, and the server will verify it. When a 304 status code is returned, the browser directly uses the cache.

4. Introduce some IO models?

Blocking IO, non-blocking IO, multiplexed IO, signal driven IO, and asynchronous IO.

1. Blocking IO: The most traditional IO model, that is, blocking occurs in the process of reading and writing data. When the user thread issues an IO request, the operating system kernel will check whether the data is ready, if it is not ready, it will wait for the data to be ready, and the user thread will be in a blocked state, and the user thread will hand over the CPU. When the data is ready, the kernel copies the data to the user thread, and returns the result to the user thread, and the user thread releases the block state.
2. Non-blocking IO: When a user thread initiates a read operation, it does not need to wait, but gets a result immediately. If the result is an error, it knows that the data is not ready, so it can send the read operation again. Once the data in the kernel is ready, and it receives a request from the user thread again, it immediately copies the data to the user thread and then returns. So in fact, in the non-blocking IO model, the user thread needs to constantly ask whether the kernel data is ready, that is, non-blocking IO will not hand over the CPU, but will always occupy the CPU. But for non-blocking IO, there is a very serious problem. In the while loop, you need to constantly poll whether the kernel data is ready, which will lead to a very high CPU usage. Therefore, the while loop is rarely used in general. Read the data.

   //伪代码
   while(true){
   new MyThread(socket)
   }
   class MyThread{
   data = socket.read();
   if(data!= error){
   //处理数据
   break;
   }
   

3. Multiplexed IO: The multiplexed IO model is currently the most used model. In the multiplexed IO model, there will be a thread that continuously polls the status of multiple sockets, and only when the socket actually has read and write events, the actual IO read and write operations are actually called. Because in the multiplexed IO model, only one thread can be used to manage multiple sockets . The system does not need to create new processes or threads, nor does it need to maintain these threads and processes, and only when there are socket read and write events. IO resources will be used only when it is time, so it greatly reduces resource occupation. In Java NIO, the selector.select() is used to query whether each channel has an arrival event. If there is no event, it will always be blocked there. Therefore, this method will cause the blocking of the user thread. Maybe some friends will say that I can use multithreading + blocking IO to achieve similar effects, but because in multithreading + blocking IO, each socket corresponds to a thread, which will cause a lot of resource occupation, and especially for long In terms of connections, thread resources will never be released. If there are many connections later, it will cause a performance bottleneck. In the multiplexed IO mode, multiple sockets can be managed through one thread, and only when the socket actually has a read and write event will it take up resources to perform the actual read and write operations. Therefore, multiplexed IO is more suitable for situations with a large number of connections. In addition, why multiplexed IO is more efficient than non-blocking IO model is because in non-blocking IO, the socket status is constantly asked through the user thread, while in multiplexed IO, each socket is polled The state is performed by the kernel, and this efficiency is much higher than that of user threads. However, it should be noted that the multiplexed IO model uses polling to detect whether an event arrives, and responds to the arriving events one by one. Therefore, for the multiplexed IO model, once the event response body is large, subsequent events will not be processed late and will affect new event polling.
4. Signal-driven IO: When a user thread initiates an IO request operation, it will register a signal function to the corresponding socket, and then the user thread will continue to execute. When the kernel data is ready, a signal will be sent to the user thread. After the user thread receives the signal, Call IO read and write operations in the signal function to perform the actual IO request operation.
5. Asynchronous IO: It is the most ideal IO model. In the asynchronous IO model, when a user thread initiates a read operation, it can start to do other things immediately. On the other hand, from the perspective of the kernel, when it receives an asynchronous read, it will immediately return, indicating that the read request has been successfully initiated, so no block will be generated for the user thread. Then, the kernel will wait for the completion of the data preparation, and then copy the data to the user thread. When all this is done, the kernel will send a signal to the user thread to tell it that the read operation is complete. In other words, the user thread does not need how the actual entire IO operation is performed. It only needs to initiate a request first. When the success signal returned by the kernel is received, the IO operation has been completed and the data can be used directly. In other words, in the asynchronous IO model, the two phases of the IO operation will not block the user thread. Both phases are automatically completed by the kernel, and then a signal is sent to inform the user thread that the operation has been completed. There is no need to call the IO function again for specific read and write in the user thread. This point is different from the signal-driven model. In the signal-driven model, when the user thread receives a signal, it indicates that the data is ready, and then the user thread needs to call the IO function for actual read and write operations; while in the asynchronous IO model, The signal indicates that the IO operation has been completed, and there is no need to call the iO function in the user thread for actual read and write operations. Note that asynchronous IO requires the underlying support of the operating system, because whether it is multiplexed IO or signal-driven model, the second stage of IO operation will cause the user thread to block, that is, the process of data copying by the kernel will let the user thread block.

5. Know the Node model?

Node.js uses event-driven and asynchronous I/O to implement a single-threaded , high-concurrency JavaScript runtime environment.

6. Know mysql? Know sql index? There is a large amount of data in the database, how to search quickly.

Reasons for slow query efficiency:

1: No index or index failure

The where condition uses the following statement to invalidate the index: null,! =, <>, or connection, in (must be used, can be replaced by the keyword exist) and not in,'%abc%';

Use parameters: num=@num, expression operation: where num/2=100, function operation: where substring(name, 1, 3)='abc'-name;

2: The amount of data queried is too large, and unnecessary rows and columns are returned

Only query useful fields, do not use * to query all fields. Replace "*" with a specific field list, and do not return any fields that are not used.

Use multiple threads for multiple queries. If the query condition is a range condition such as a certain period of time, you can split the time condition and combine multiple query results.

3: Lock or deadlock

4: I/O throughput is small, forming a bottleneck effect.

5: Insufficient memory.

Create fewer objects. Objects are only created when they need to be used, and don't pass through the entire context.

Clean up the jvm memory in time.

6: The network speed is slow. 

SQL optimization method

1: If the index is a composite index, the first field of the index must be used as a condition to ensure that the system uses the index, otherwise the index will not be referenced, and the field order should be consistent with the index order as much as possible.

2: Indexes are not as many as possible. A table index is best not to exceed 6. Although the index can improve the efficiency of select, it also reduces the efficiency of insert and update, because insert and update will rebuild the index, so how to build the index needs to be carefully considered.

3: Some optimizations of table building:

Try to use numeric fields as much as possible. If the data contains only numeric information, try not to design it as a character type. This will reduce the performance of queries and connections and increase storage overhead. Because the engine compares each character in the string one by one when processing queries and connections, and for numeric types, only one comparison is sufficient.
Try to use varchar/nvarchar instead of char/nchar, because first, variable-length fields have a small storage space and can save storage space. Secondly, for queries, the search efficiency in a relatively small field is obviously higher.
4: Try to avoid using the cursor, because the efficiency of the cursor is poor. If the data operated by the cursor exceeds 10,000 rows, then you should consider rewriting. (Cursor is a very old function, almost obsolete.)

5: Not all indexes are effective for queries. SQL is optimized based on the data in the table. When a large amount of data is repeated in the index column, the SQL query may not use the index. For example, there are fields sex, male, and Females are almost half, so even if an index is built on sex, it will not play a role in query efficiency.

6: Try to avoid large transaction operations and improve system concurrency.

Precautions:

1: When using like, be sure to remember to blank

... where name like'%'. variable name.'%'; (variable value is passed in from outside)

If: the variable is empty, it becomes the following sql

...where name like'%%'; - The consequence of this condition is'select all data or update all data or delete all data', which is equivalent to no writing condition, which is a serious problem after it occurs.

2: like with wildcards: the use of% and _

The classification of
wildcards: %% wildcard: Indicates that any character appears any number of times** (can be 0)**.
_Underscore wildcard: It can only match a single character, no more or no less, just one character.

Like operator: The
function of LIKE is to indicate that the search pattern behind mysql is to use wildcards instead of direct equal matching for comparison.
Note: If the like operator is used, the effect of the latter without the general matching operator is the same as =, SELECT * FROM products WHERE products.prod_name like '1000'; The only matching result is 1000, but it cannot match the result like JetPack 1000.

1)% wildcard use:
match records starting with "yves": (including record "yves")
SELECT * FROM products WHERE products.prod_name like'yves%';

Match records containing "yves" (including record "yves")
SELECT * FROM products WHERE products.prod_name like'%yves%';

Match the records ending with "yves" (including the record "yves", excluding the record "yves", that is, the records with spaces after yves, which needs attention here)
SELECT * FROM products WHERE products.prod_name like'%yves';

2) Use of wildcard characters:
SELECT * FROM products WHERE products.prod_name like'_yves'; The
matching result is: record like "yyves".

SELECT * FROM products WHERE products.prod_name like'yves__'; The
matching result is: records like "yvesHe". (An underscore can only match one character, no more or no less)

Other operations:

 insert into tb (...) values(...),(...)...; is better than insert into tb (...) values ​​(...); insert into tb (...) values (...);...The method of batch insertion is highly efficient [reason]: The main reason for the high efficiency of the second SQL execution here is the log volume after the merge (MySQL's binlog and innodb transactions make the log) reduced, reducing the log The amount and frequency of data brushing, thereby improving efficiency. By merging SQL statements, it can also reduce the number of SQL statement parsing and reduce network transmission IO.

7. Do you understand processes and threads? What is the basic unit of CPU processing?

Process is the basic unit of operating system resource allocation, and thread is the basic unit of task scheduling and execution. Process is a container of threads

8. Tell me about the algorithm of CPU processing?

9. What is process deadlock?

Definition of deadlock: Deadlock is the phenomenon that multiple processes in a process set wait for each other due to competition for resources. For example: A and B eat dumplings, A holds soy sauce, B holds vinegar, A wants vinegar, and B wants soy sauce. As a result, they both wait to eat dumplings.

Causes of deadlock: insufficient system resources; unreasonable advancement sequence of multiple processes; improper resource allocation

Necessary conditions for deadlock:

(1) Mutual exclusion: Resources cannot be shared and can only be used by one process.

(2) Request and hold conditions (Hold and wait): Processes that have already obtained resources can apply for new resources again.

(3) Nopre-emption: The allocated resources cannot be forcibly deprived from the corresponding process.

(4) Circular wait condition (Circular wait): Several processes in the system form a loop, and each process in the loop is waiting for the resources being occupied by adjacent processes.

There are four ways to deal with deadlock: 1) Prevent deadlock 2) Avoid deadlock 3) Detect and remove deadlock

Prevent deadlock: destroy one of the four necessary conditions

① Destruction of mutual exclusion conditions: Allow resources to be shared. For example, SPOOLing technology can allow several processes to generate print data at the same time.

Disadvantages: SPOOLing technology is not suitable for all resources, such as process tables, etc., so it is more difficult to destroy the mutual exclusion of resources, this method is not very good

②Destruction request and retention conditions: resources are allocated at once.

Disadvantages: With this mechanism, the process no longer applies for resources during the execution process, but the efficiency of this method is extremely low and resources cannot be fully utilized.

③Break the inalienable condition: There are two methods, one is to give up the resources originally occupied when the requested resources are not met; the other method is only applicable to the process of applying for resources with higher priority When the process priority of the resource is high, if the resource requested by a process is occupied by other processes, and the priority of the application process is higher, then it can force the process occupying the resource to give up. This method is generally applicable to processors and storage resources.

④Destruction cycle waiting condition: The system assigns a number to each type of resource, and each process requests the resource in the order of increasing number, and the release is the opposite (such as the philosopher meal problem)

There are two ways to avoid deadlock: 1) Resources are allocated in order and 2) Banker's algorithm.

There are two ways to remove deadlock: 1) Resource deprivation method 2) Process cancellation method 3) Process rollback method

10. Give you the url of a website, please write down all the urls in this url and all the urls redirected through these urls that are not repeated results?

11. What is the difference between the content type of uploading a file and clicking a button? What is the difference between http transmission protocol?

content-type：

Generally refers to the Content-Type that exists in the webpage, which is used to define the type of network file and the encoding of the webpage, and determine what form and encoding the browser will read this file. This is the result of frequently seeing some PHP webpage clicks. Is the reason for downloading a file or a picture. The header tells the client the content type of the content actually returned. It is the entity header field of Http, which is used to describe the encoding method of the request or returned message body. It exists in both the request header and the response header.

Common types:

text/(plain, css, html, xml) (text,, css, html, xml) type
application/(x-javascript, json, xml, octet-stream) (js, json, xml, binary stream data) type
image /png jpg gif image/*    

Upload excel file: .xls     application/vnd.ms-excel

12. Algorithm problem: output an int array {1, 2, 5, -7, 8, -10} such that the continuous sub-array with the largest sum

 

to sum up:

The preparation this time is mainly js knowledge. I didn't expect that the byte interview was very low-level and I didn't review it. . . I didn't brush up on the algorithmic questions. I did it for half an hour and couldn't do it. . . It feels much more difficult than Ant Financial's interview some time ago. . .