Record the test and interview experience of the front-end school recruitment for one push, and the front-end test

Record the test and interview experience of the front-end school recruitment for one push, and the front-end test
Pen exam photos written test answers computer basic questions (mandatory) 1. Slightly 2. memory overflow and Memory leakage

Memory overflow refers to the amount of data that can be stored out of the obtained memory. For example, a memory overflow occurs when 1000 is stored in one byte;
Memory leakage means that the program occupies too much memory due to errors or vulnerabilities, or cannot be released after it occupies the memory (in many cases, the memory is applied but not released after the program ends ).

3. What are the effects of indexes, primary keys, unique indexes, and joint indexes on database performance?

• An index is a special file that contains reference pointers to all records in a data table.
• The only function of a common index is to speed up access.
• Common indexes: the indexed data can contain duplicate data. The unique index specifies that the index values are different.
• A primary key is a special unique index. A table can only have one primary key to uniquely identify a record.
• The associated index means that the index can cover multiple data columns.
• The index accelerates the query speed, but slows down the speed of adding and deleting updates, because before performing these operations, you must first index

4. Differences between internal and external connections in the database

• Internal join: the connection result contains only rows that meet the connection conditions. Both tables involved in the connection must meet the connection conditions.
• Outer Join: the connection result contains not only the rows that meet the connection condition, but also the rows that do not meet the condition. Including left outer connection, right outer connection, and full outer connection.

The internal connection can only query records that match the relationship between two tables. The external connection can not only query records that match the relationship between the two tables, but also query records that do not match.

5. How to Handle deadlocks in threads and processes and Multithreading

Contact:

• A thread only belongs to one process. A process can have multiple threads, but at least one thread is called the main thread.
• Resources are allocated to processes in a unified manner, and threads in the same process share all resources of the process.
• In the process of execution, threads need to collaborate and synchronize data between different processes through message communication.

Differences:

• A thread is the basic unit of scheduling and allocation, and a process is the basic unit of resource allocation.
• Concurrency: not only can concurrent execution be performed between processes, but also between different threads in the same process.
• Resources: A process is an independent unit that owns resources. A thread does not possess resources, but can access all resources of a process.

When to use multithreading:

• Time-consuming or heavily occupied processor blocking User Interface operations
• When each task has to wait for external resources

Avoid deadlocks in multiple threads

• Lock Order (threads are locked in a certain order)
• Lock time limit (when the thread attempts to obtain the lock, it adds a certain time limit. If the time limit is exceeded, it gives up the request for the lock and releases its own lock)
• Deadlock Detection

6. cache application scenarios

• First, let's explain the cache, as its name implies, is the place where data is stored. You can think of it as getting data from the disk and temporarily storing it in the memory for later processing to read. Data that can be stored in the cache is usually frequently accessed and not frequently modified. You can find a suitable cache by knowing what the cache is and what data can be stored in the cache (the cache here is the object or container ).
• Currently, there are two main cache operations: one is to use the map object that comes with the Program (like the hashmap of jdk), the other is the cache software, and the other is not described in detail, let's take a look at the implementation and application of hashmap. Here we mainly talk about cache software. The popular cache software is memcached and redis (if you don't know about it, google). Some blogs also talk about mongodb. I personally think that, because we need to take into account some characteristics of the DB, we cannot use the epoll or libevent event-driven solution of the other two caches to achieve extremely high throughput, so we will exclude it here. The cache mentioned below refers to the second type.

7. Slightly 8. Slightly 9. Differences Between TCP and UDP

• Connection-based and non-connection-based
• Simple UDP program structure
• Requirements for system resources: TCP and UDP
• TCP ensures data correctness, UDP may cause packet loss, TCP ensures data order, and UDP does not guarantee
• Stream mode, datagram Mode

10. Observer Mode

When there is a one-to-many relationship between objects, the Observer Pattern is used ). For example, when an object is modified, its dependent object is automatically notified. The observer mode is a behavior mode.

Front-end Question 1. What selector does CSS have and how to differentiate priorities? What is the effect of the following code?

• Derivative selector (declare with HTML tags)
• Id selector (declare with dom id)
• Class selector (declare with a style class name)
  In addition to the first three basic selectors, there are also some extension selectors, including
• Descendant selector (use space interval, such as div. {})
• Group selector (using comma intervals, such as p, div, # {})

CSS selector priority Definition

Basic Principles:

Generally, the more special a selector is, the higher its priority is. That is, the more accurate the selector points, the higher its priority.

Complex calculation methods:

• 1 indicates the priority of the derived selector.
• 10 indicates the priority of the class selector.
• Use 100 to indicate the priority of the ID Selector
• Div. test1. span var Priority 1 + 10 + 10 + 1
• Span # xxx. songs li Priority 1 + 100 + 10 + 1
• # Xxx li priority 100 + 1

<style>#id{color:green;}.class-a{    color:blue;}#my-id.class-b{color:yellow;}p.class-a.class-b{    color:red;}</style><body>    <p class="class-b class-a" id="my-id">123</p></body>

The answer is yellow, yellow.

2. How to Use css to make an element invisible

• Opcity: 0; hides the corresponding element and occupies the original space of the element.
• Display: none; hide the corresponding element but not occupy the original space of the element.
• Visibility: hidden; hides the corresponding element and occupies the original space of the element.
  That is, after the CSS display: none attribute is used, various attribute values such as the width and height of the HTML element (object) will be "lost". After the visibility: hidden attribute is used, the HTML element (object) is invisible visually (completely transparent), and the space occupied by it still exists.

3. Add the css code of. B to align <div class = "B"> </div> horizontally on the page to list all the methods you can think.

. B {width: 200px; height: 100px; background: # ccc; // continue to add code}

Traditional center Mode

Add the code margin: 0 auto;

Absolute Positioning method (the child element width and height must be known, and the parent element needs relative positioning)

Add code

position:absolute;left:50%;margin-left:-100px;

Absolute Positioning method (you do not need to know the width and height of the child element, but the parent element requires relative positioning)

position:absolute;left:0;right:0;margin:0 auto;

4. How should I optimize a page that is large and slow to load?

• Lazy loading of images. You can add a scroll bar event in the Invisible Area of the page to determine the distance between the image position and the top of the browser and the page. If the former is smaller than the latter, it is preferentially loaded.
• For slides and albums, you can use the image pre-loading technology to download the first and last images.
• If the image is a css image, you can use technologies such as css Sprite, SVGsprite, Iconfont, and Base64.
• If the image size is too large, you can use a specially encoded image. During loading, a compressed thumbnail is first loaded to improve the user experience.
• If the image display area is smaller than the actual image size, the image is compressed on the server based on the business needs. The size of the image after compression is consistent with that after display.

5. How to eliminate repeated elements in an array?

This is a common question, and there are many ways to search online.
Here is a solution for es6.

ES6 adds two new useful items, set and Array. from.

Set is a new data structure that can receive an array or a class array object and automatically remove duplicate items.

var arr = [1,1,'1','1',null,null,undefined,undefined,NaN,NaN];console.log(new Set(arr));

Here we can see that repeated projects have been removed, including NaN. Under normal circumstances, NaN = NaN returns false, but in the set, it can help you remove duplicates.

But here we can see that set returns an object, but what we want is an array.

This is the turn of Array. from. Its function is to convert Array objects and iteratable objects into arrays.

var arr = [1,1,'1','1',null,null,undefined,undefined,NaN,NaN];var newArr = Array.from(new Set(arr));console.log(newArr);

6. Briefly describe the differences between var let const

• Variables defined by var can be modified. If they are not initialized, undefind will be output, and the global information will be leaked sometimes, causing some impact.
• To solve this leakage bug, with the es6 let, let defines a block-level domain for the number of rows. The variables defined by let in the function can only work within the function.
• A const is used to define a constant volume that cannot be modified. An initial value must be assigned.

7. How to copy objects in depth? What should I pay attention to in JSON. stringfiy?

This article describes the concept of shallow copy and deep copy, and the concept of shallow copy and deep copy in js. Knowledge about copying complex data types (Object, Array.

• Shallow copy: it is a copy reference. All the copies point to instances of the same object, and operations between them will affect each other.

Var a = {c: 1}; var B = a; console. log (a = B); // outputs true. A. c = 2; console. log (B. c); // output 2

• Deep copy: re-allocate the memory in the heap and copy all attributes of the resource object. The Copied object is completely isolated from the original object, which does not affect each other.

Common methods include JSON. parse (), JSON. stringify (), $. extend (true, {}, obj) of jQury)

Var a = {c: {d: 1 }}; var B = $. extend (true, {}, a); console. log (a = B); // outputs falsea. c. d = 3; console. log (B. c. d); // output 1, not changed.

• JSON. stringfiy
  First, let's talk about the concepts of JSON. parse () and JSON. stringfiy.

JSON. parse () is to convert a string into a json object.

Var str = '{"name": "zp", "age": "22"}' result: JSON. parse (str) Object age: "22" name: "zp" _ proto __: Object

JSON. stringfiy, on the contrary, converts a json object to a string.

Vara = {a: 1, B: 2} result: JSON. stringify (a) "{" a ": 1," B ": 2 }"

JSON. stringfiy

JSON. stringfiy will not convert values that do not have the json Representation

Numeric (integer or floating point number) string (in double quotation marks) logical value (true or false) array (in square brackets) object (in curly brackets) null

Undefined is not in it.

8. Are there any differences between <a onclick = "a. click"> and <a onclick = "a. click ()">? If so, what are the differences?

The former calls a function and can execute the function when you click it.
The latter only assigns the value after the function is run to a, so it does not execute the function when it is clicked.

9. How to quickly find logs sorted by time. What is the time complexity?

This is the log information in the data structure. If you are interested, you can use Baidu

10. Write a fiter function executor. The first parameter is the filter function. The remaining parameters are passed into the filter for execution and the result is returned. exeFilter ()

First, let's look at the usage of js filter,
Array. filter (function (currentValue, index, arr), thisValue)
Parameter description

• Function (currentValue, index, arr)

  * CurrentValue is required. The value of the current element * index is optional. The index value * array of the current element is optional. Array object of the current element

• Optional. The object is used when the callback is executed. It is passed to the function and used as the "this" value. If thisValue is omitted, the value of "this" is "undefined"

var ages = [32, 33, 16, 40];function exeFilter(age) {    return age >= 18;}function myFunction() {    document.getElementById("demo").innerHTML = ages.filter(exeFilter);}

11. This is a browser. An error message is reported on the console, which requires an explanation. If the picture is not taken, you can perform an interview on your own.

The presentation started at and didn't eat dinner. I ran to listen to the presentation. I thought it would end at, but it took me 10 minutes to finish the presentation + test + interview.

Not much nonsense. Focus

It was my turn to wait in the interview queue. First, I would like to say hello to the interviewer and hand the resume to him. He started to read the resume directly and didn't say anything. Then I introduced myself first, I spoke about the basic situation and some practical experiences.

Then the interviewer began to ask questions. The framework that was directly asked as soon as it came up seemed very important.

Interviewer: You wrote angular. js on your resume. Can you tell me about angular?

The framework is not ready yet because of the announcement notice temporarily received. I only talked about some simple knowledge and added the jump of a single page. Then I emphasized vue, but the interviewer did not care too much about it. The company should focus on angular. I feel this question is not answered well.

Then I asked according to my resume.

gulp

• Interviewer: Can you talk about gulp?
• Me: gulp is a front-end engineering development tool that can greatly enhance the workflow.
• Interviewer: What do you do with gulp?
• Me: We mainly use gulp for image compression, less, sass compilation, es6 compilation to es5, and other automated work.
• Interviewer: What APIs does gulp have?

• Me:

  * Gulp. task is mainly used to create a task. Other tasks include * gulp. src is used to find one or more files * gulp. watch is used to listen for file changes, * gulp. dest specifies the file Output Folder path

• Interviewer: Well

es6

• Interviewer: Can you tell us the difference between let and var?
• Me: the variables defined by var sometimes leak to the global environment, which has a certain impact. The es6 let can solve this problem. let is equivalent to assigning a block-level scope, the variables defined by let can only play a role in this scope.
• Interviewer: Okay

Responsive

• Interviewer: Can you explain your understanding of responsiveness?

• Me:

  * The response is mainly because the document rendering mode can change with the browser width. * I mainly use the bootstrap raster system and media queries to achieve this goal. * I also learned about fundation. The main difference between fundation and bootstrap is that fundation can change the Document Style in real time as the browser size changes, in addition, it has the same transition effect as the transition in css3, while bootstrap responds to changes when the browser width changes to a fixed value.

• Interviewer: Okay

The difference between '=' and '='

• Interviewer: Can you tell us the difference between '=' and '= '?
• Me: '=' is forced type conversion, '=' is not converted
• Interviewer: Well, I wrote a question)

a={a:1}b={b:1}

• Interviewer: Can you tell me whether a = B and a = B are true or false?
• I: (I didn't understand what the interviewer meant at the beginning, so I told him to repeat it again. Then I looked at the subject and thought about it a little)
• Interviewer: Can you give me the correct answer?
• Me: (I feel like there is a routine) I just answered, a = B is true, a = B is false
• Interviewer: OK. Can you explain it?
• Me: (vague) What is the returned value of object typeof?

Later, I thought it was actually a very easy question. I didn't expect it. I thought the focus of his test was = and =. I drilled it here,

In fact, this question is about the reference type. The reference type exists in the heap. Although the values of a and B are the same, the pointer stored in the stack is directed to different heap memory, so there is no type conversion, so both should be false

Let me summarize

• Interviewer: Almost now. Can you summarize some of the interviews?
• Me: I think my basic knowledge needs to be consolidated and read more.
• Interviewer: Well, OK.

Closing (because it was very late at the time, and it was about 10 o'clock in the evening, the interview was a little busy)

• Interviewer: the interview is almost done. Do you have any questions for me?
• I :( think about this as a routine, but I am still prepared) What is the main framework used by the company currently?
• Interviewer: We use vue and angular, primarily angular.
• Me: angular1 and angular2 are quite different.
• Interviewer: Yes, but angular2-angular4 is similar
• Me: Now angular has 5
• Interviewer: No
• Me: I seem to have seen it in the public push, but it may be wrong.
• Interviewer: Maybe it's out.
• Me: how is my performance? What are the shortcomings?
• Interviewer: Don't be too nervous. Relax.
• Me: Oh, okay. What are the technical limitations?
• Interviewer: the basics should be viewed, and the framework should be learned more.
• Me: Okay

The interview is over. Waiting for notification...

I feel that the overall interview is okay. I have answered all the answers, which is the foundation question.

In the end, please correct me.

I have a front-end learning exchange QQ group: 328058344 if you encounter any problems during the process of learning the front-end, please come to my QQ Group to ask questions. The group will update some learning resources every day. Chat is prohibited.