Front end two years monthly income 30K, high frequency interview questions sorting (including answers)


CSS related

1. Universal center

1. Margin: 0 Auto; horizontal
2. Text align: Center; horizontal
3. Row height, vertical
4. Form, center, middle
five display:table-cell ; simulation table, all
6. Absolute positioning, 50% width and height reduction
7. Absolute positioning, zero up, down, left and right, margin:auto
8. Absolute positioning plus relative positioning. You don’t need to know the width and height
9. IE6, IE7: set a font size: height / 1.14, vertical for the parent element– align:middle

2. BFC optimization

Block format context, properties:

The floating elements in BFC will not run around;
And floating elements.

3. What are the two modes of box model? What’s the difference? How to set

Standard mode: box sizing: content box; width and height do not include inner margin and border
Weird mode: box sizing: border box

4. Commonly used methods to clear floating. What happens if floating is not cleared?

When the parent element doesn’t give height, the inner element will open when it doesn’t float. When it floats, the parent element becomes a line, causing collapse

Extra label method (add a new label after the last floating label and set clear: both;) (not recommended)
Parent element addition overflow:hidden; (trigger BFC)
Use the after pseudo element to clear floats (recommended)
Use before and after double pseudo elements to clear floating

5. The principle of censoring

For example, row and col of antd divide a line into 24 equal parts, col takes up a few parts, and the bottom layer is implemented by percentage; combined with media query, it can achieve responsive

6. What are the CSS selectors?

(1) ID selector (# myid)
(2) Class selector (. Myclassname)
(3) Label selector (div, H1, P)
(4) Descendant selector (h1p)
(5) Adjacent offspring selector (sub) selector (UL > LI)
(6) Brother selector (Li ~ a)
(7) Adjacent brother selector (Li + a)
(8) Attribute selector (a [rel = “external”])
(9) Pseudo class selector (A: hover, Li: nth child)
(10) Pseudo element selector (:: before,:: after)

7. The difference between pseudo class and pseudo element

CSS introduces the concepts of pseudo class and pseudo element to format information outside the document tree. In other words, pseudo classes and pseudo elements are used to modify parts that are not in the document tree, such as a sentence
The first letter in a word, or the first element in a list.
Pseudo class is used to add corresponding styles to existing elements when they are in a certain state, which changes dynamically according to user behavior. For example, when a user hovers over a specified
Element, we can use: hover to describe the state of the element.
Pseudo elements are used to create and style elements that are not in the document tree. They allow us to style certain parts of an element. For example, we can: be
Before to add some text in front of an element and add style to the text. Although the user can see the text, it is not actually in the document tree.
Sometimes you will find that pseudo elements use two colons (::) instead of one. This is part of CSS3 and tries to distinguish between pseudo classes and pseudo elements. Most browsing
Both values are supported by both. According to the rule, you should use (::) instead of (:) to distinguish between pseudo classes and pseudo elements. However, the W3C specification in the old version didn’t do this
So most browsers support these two ways to represent pseudo elements.

8. Which properties in CSS can be inherited?

Each attribute defines whether the attribute is inheritable. An inheritable attribute will use the value of the same attribute of the parent element as its own value when there is no specified value.
Generally, the inherited attributes include font related attributes, font size and font weight. Text related attributes, such as color and text align.
Some layout attributes and list attributes of the table, such as list style, etc. There are also cursor attribute cursor and element visibility.
When an attribute is not inherited, we can also set its value to inherit to get the attribute value with the same name from the parent element.

9. How to calculate CSS priority algorithm?

When judging the priority, first of all, we will judge whether an attribute declaration has weight, that is, whether! Important is added after the declaration. If a statement is weighted, it will have the highest priority, provided that it does not have the same weight statement after it. If the weights are the same, we need to compare the particularity of the matching rules.
A matching rule is generally composed of multiple selectors. The particularity of a rule is accumulated by the particularity of its selectors. The particularity of selectors can be divided into four levels: the first level is inline style, which is 1000; the second level is ID selector, which is 0100; the third level is class selector, pseudo class selector and attribute selector, which is 0010; the fourth level is element selector and pseudo element selector, which is 0001. Every time a selector appears in the rule, its particularity will be superimposed. This superimposition is only limited to the superimposition of the corresponding level, and will not produce carry. The comparison of selector specificity values is sorted from left to right, that is, the specificity values starting with 1 are larger than all the specificity values starting with 0.
For example, a rule with a specificity value of 1000 has a higher priority than a rule with a specificity value of 0999. If the specificity values of two rules are equal, the latter rule will have the highest priority according to the order of their introduction.

What are the values of 10. Display? Explain their role.

Block block type. The default width is the width of the parent element. The width and height can be set and displayed in a new line.
The none element is not displayed and is removed from the document stream.
In line element type. The default width is the content width. The width and height cannot be set. It is displayed in the same row.
The default width of inline block is the content width. The width and height can be set and displayed in the same row.
List item is displayed like a block type element, with a style list tag added.
Table this element is displayed as a block level table.
Inherit specifies that the value of the display attribute should be inherited from the parent element.

JavaScript related

1. Introduce the basic data types of JS.

JS has six basic data types, namely undefined, null, Boolean, number and string, as well as the new symbol type in ES6, which represents the unique and immutable data type after creation. I think its emergence is mainly to solve the problem of possible global variable conflicts.

2. How many types of values does JavaScript have? Can you draw their memory map?

JS can be divided into two types of values, one is the basic data type, the other is the complex data type.

Complex data type refers to object type. All other data types such as array and date can be understood as subclasses of object type.

The main difference between the two types is that their storage locations are different. The values of basic data types are directly saved in the stack, while the values of complex data types are saved in the heap. The values in the heap are obtained by using the corresponding pointers saved in the stack.

3. What is the internal attribute [[class]]?

All objects (such as arrays) whose return value of typeof is “object” contain an internal property [[class]] (we can regard it as an internal classification rather than a class in the traditional object-oriented sense). This property cannot be accessed directly. It is usually accessed through the Object.prototype.toString (..) to see. For example: [1,2,3] );
// "[object Array]" /regex-literal/i );
// "[object RegExp]"

4. What are the built-in objects in JS?

The built-in objects in JS mainly refer to some global value attributes, functions and constructor objects defined by JS in the global scope before the program execution. Generally, we often use global variable values such as Nan and undefined, global functions such as parseint() and parsefloat() to instantiate object constructors such as date and object, and monomer built-in objects such as math objects to provide mathematical calculation.

5. What is the difference between undefined and undeclared?

Variables declared in the scope but not yet assigned are undefined. Instead, variables that have not been declared in the scope are undeclared.

For the reference of undeclared variables, the browser will report a reference error, such as referenceerror: B is not defined. However, we can use the security mechanism of typeof to avoid errors, because typeof will return “undefined” for undeclared (or not defined) variables.

6. What’s the difference between null and undefined?

First of all, undefined and null are basic data types. Each of these two basic data types has only one value, namely undefined and null.

Undefined means undefined and null means empty object. General variables declared but not defined will return undefined. Null is mainly used to assign values to variables that may return objects as initialization.

Undefined is not a reserved word in JS, which means that we can use undefined as a variable name, which is very dangerous and will affect our judgment of undefined value. But we can get the secure undefined value through some methods, such as void 0.

When we use typeof to judge the two types, null typing will return “object”, which is a problem left over by history. When we use double equal signs to compare two types of values, we return true, and when we use three equal signs, we return false.

7. How to get the secure undefined value?

Because undefined is an identifier, it can be used and assigned as a variable, but this will affect the normal judgment of undefined.

Expression void_There is no return value, so the return result is undefined. Void It doesn’t change the result of the expression, it just doesn’t return a value.

Traditionally, we use void 0 to get undefined.

8. How many basic rules to write JavaScript?

In normal project development, we abide by some of these basic norms, such as:

(1) All variable declarations in the scope of a function should refer to the first part of the function as far as possible, and should be declared with one var. two consecutive var declarations are not allowed

If the variable has no value, the initial value of the corresponding type should be assigned to the variable, so that when others read the code, they can know the corresponding type value of the variable at a glance.

(2) When the address, time and other strings appear in the code, they need to be replaced by constants.

(3) When comparing, try to use ‘= = =’, ‘! =’, instead of ‘= =’, ‘! =’.

(4) Do not add methods such as array and date to the prototype of built-in objects.

(5) The switch statement must have a default branch.

(6) The for loop must use braces.

(7) If statements must use braces.

9. JavaScript prototype, prototype chain? What are the characteristics?

In JS, we use constructors to create a new object. There is a prototype attribute value inside each constructor. This attribute value is an object. This object contains the attributes and methods that can be shared by all instances of the constructor. When we use the constructor to create a new object, there will be a pointer inside the object, which points to the value corresponding to the prototype property of the constructor. In Es5, this pointer is called the prototype of the object. Generally speaking, we should not be able to get this value, but now it is implemented in browsersprotoProperty to let us access this property, but we’d better not use it because it’s not specified in the specification. A new one has been added to Es5 Object.getPrototypeOf () method, through which we can get the prototype of the object.
When we access an object’s attribute, if the attribute does not exist inside the object, it will go to its prototype object to find the attribute, and the prototype object will have its own prototype, so we will continue to find it, that is, the concept of prototype chain. The end of the prototype chain is generally the end Object.prototype So that’s why our new object can use methods like tostring().
JavaScript objects are passed by reference, and each new object entity we create does not have a copy of its own prototype. When we modify the prototype, the objects associated with it will inherit the change.

What is the safe range of integers in 10. JS?

Safe integer means that when the integer in this range is converted into binary storage, there will be no loss of precision. The maximum integer that can be “safe” presented is 2 ^ 53 – 1, that is, 9007199254740991, which is defined as “safe” in ES6 Number.MAX_ SAFE_ INTEGER。 The minimum integer is – 9007199254740991, which is defined as Number.MIN_ SAFE_ INTEGER。
If the result of a calculation gets a value beyond the JavaScript value range, the value will be automatically converted to a special infinity value. If a calculation returns a positive or negative infinity value, the value will not participate in the next calculation. To judge whether a number is finite, we can use the isfine function to judge.

Browser network related

1. Reflow and repaint optimization

Front end two years monthly income 30K, high frequency interview questions sorting (including answers)

Browser rendering process: DOM tree, CSS tree > render tree > paint
The root node of DOM tree is HTML
Rendering from the upper left corner of the browser to the lower right corner
When opening a page for the first time, redraw and reflow will be triggered at least once. Reflow will be triggered when the structure such as width and height changes, and repaint will be triggered when the non structure such as background color changes

2. How to reduce redrawing and reflow?

Change the styles one by one through classname or csstext instead of one by one
Offline mode: clone the node to be operated, and then exchange with the original node after operation, similar to virtual dom
To avoid frequent direct access to the calculated style, save the information first
Absolute layout of DOM, will not cause a lot of reflow
P don’t nest too deep, don’t exceed six layers

3. What happens when a page is loaded and displayed from URL input?

The browser gives the DNS domain name resolution according to the requested URL, finds the real IP, and sends the request to the server;
The server returns the data after the background processing, and the browser receives the files (HTML, JS, CSS, image, etc.);
The browser parses the loaded resources (HTML, JS, CSS, etc.) and establishes the corresponding internal data structure (such as DOM tree of HTML);
Load the parsed resource file, render the page, and finish.

4. The difference between localstorage and sessionstorage and cookie

Common point: they are all saved in the browser side, and the same source of localstorage and sessionstorage are collectively referred to as webstorage. They are saved in the browser and do not participate in server communication, with a size of 5m
Different lifecycles: localstorage is permanently saved, and sessionstorage is the current session, which can be manually cleared
Different scopes: different browsers do not share local and session, and different sessions do not share session
Cookie: it is always valid before the expiration time. The size is 4K. There is a limit on the number of cookies. Each browser is different, generally 20. If it is carried in the HTTP header, there will be performance problems. It can be encapsulated or native

5. How does the browser prevent event propagation and default behavior

Prevent event propagation: e.stoppropagation ()
Prevent default behavior: e.preventdefault ()

6. What are the advantages and implementation principles of virtual DOM compared with native DOM?

Virtual DOM can improve performance, without overall re rendering, but local refresh
JS object, diff algorithm

7. Three stages of event trigger in browser event mechanism

Event capture phase: find the target node from the DOM tree node down without triggering the function
Event target handler: reach target node
Event bubbling: finally passed from the target node to the top element, usually the function is executed at this stage
The third parameter of addeventlistener defaults to false (bubble phase execution) and true (capture phase execution)
To prevent bubbling, see the above methods

8. What is cross domain? Why do browsers use the same origin policy? How many ways can you solve cross domain problems? Do you know the pre inspection request?

Cross domain refers to documents or scripts in one domain trying to request resources in another domain
To prevent XSS, CSFR and other attacks, the protocol + domain name + port is different
In this paper, we discuss the key technologies of cross domain resource sharing (CORS), such as jsonp, access control, server forward proxy and so on
Front end two years monthly income 30K, high frequency interview questions sorting (including answers)

Pre check request: the request to be pre checked must first send a pre check request to the server using the options method to know whether the server allows the actual request. The use of “pre check request” can avoid the unexpected impact of cross domain request on the server’s user data

9. Do you know the browser caching mechanism?

Browser caching is to store a copy of a requested resource. When the resource is needed next time, the browser will decide whether to use the cache resource directly or send the request to the server again according to the caching mechanism
from memory cache ; from disk cache
Function: reduce the loss of network transmission and reduce server pressure.
Priority: force cache > negotiate cache; cache control > expires > Etag > last modified

10. Why is DOM slow?

DOM itself is a JS object, which is not slow to operate, but it triggers browser behavior after operation, such as repeat and reflow, which makes it slow

11. What will block rendering?

JS script synchronous execution
Although CSS and images are loaded asynchronously, JS file execution depends on CSS, so CSS will block rendering

Recommended Today

Envoy announced alpha version of native support for windows

Author: sunjay Bhatia Since 2016, porting envoy to the windows platform has been an important part of the projectOne of the goalsToday, we are excited to announce the alpha version of envoy’s windows native support. The contributor community has been working hard to bring the rich features of envoy to windows, which is another step […]