Summary of HTML interview questions

1. Browser kernel

-- Browser kernel: -Ie Trident - Firefox gecko - Google blink - Safari Webkit - Opera PrestoCopy the code

2. Understanding of HTML semantics

According to the content of the language, choose the appropriate label advantages:1.The code structure is clear, easy to read, easy to develop and maintain2.Improved user experience, clear page structure when style loading fails3.Good for search engine optimization SEO, search engines will give different weight according to different tags <header><Head/header > < nav > < /Nav > Navigation bar <section></section> block (semantically div) 
      
Ain > Main area <article><
      Aside > sidebar <footer></footer> bottomCopy the code

3. The web store

HTML5 provides two new ways to store data on the client side:localStorage- Data store with no time limit sessionStorage - Data store for one sessionCopy the code

4. What are the advantages and disadvantages of iframe?

The iframe element creates an inline frame that contains another document. Advantages: - Used to load slow content (such as ads) - enables scripts to be downloaded in parallel - enables cross-subdomain communication disadvantages: - Iframe will block the onload event on the main page - cannot be recognized by some search engines - resulting in many pages that are not easy to manageCopy the code

CSS Interview questions summary

1. CSS selectors and their priorities

-tag selector (div), pseudo-element selector (li:last):1- Class selector (# className), pseudo-class selector (Li :after), attribute selector (a[ref='eee') :10-id selector (#id):100- Inline style:1000Note: -! Important declares that the style has the highest priority - if the priority is the same, the last style to appear takes effectCopy the code

2. Attribute value of display and its function

* display attribute values - display: none/block/inline/inline - block/table/flex * display block, inline and inline - block difference: Will exclusive - block: one line, can set the width, height, margin, padding attributes - the inline: not an exclusive line, set the width and height is invalid, can set the horizontal margin and padding (can't set the vertical direction)Copy the code

3. What are the ways to hide elements

Display :none-- does not occupy the original positionvisibliity: Hidden -- Take the original positionopacity:0-- Set element transparency to0, the hidden element takes the original positionposition:absolute - Hides elements by removing them from view using absolute positioning z-index: negative - hides elements by covering them with other elementstransform:scale(0.0) -- scale the element to0, after hiding to occupy the original positionCopy the code

4. Understanding of box model

Box model is composed of four parts, respectively is margin, border, padding and the content - the difference between standard box model and IE box model is set when the width and height, corresponding to the scope of the different: You can change the box model of an element by modifying the box-sizing attribute: -box-sizeing: content-box indicates the standard box model (default) -box-sizeing: border-box indicates the IE box model (weird box model)Copy the code

What are the new features in CSS3

- Rounded Corner (border-radius:8px) - Multi-column Layout - Shadoweflect - Text-shadow - Text Render (Text-decoration) - Gradient - TransformCopy the code

6. Understanding of css3Sprites

CSSSprites (sprites) include all images involved in a page into a large image, and then use the combination of background-image, background-repeat and background-position properties of CSS to locate the background. Advantages: - CSS Sprites can greatly improve page performance by reducing HTTP requests - CSS Sprites can reduce image bytesCopy the code

7. What is the CSS preprocessor/post-processor? Why use them?

** Preprocessors such as LESS, Sass, stylus, which are used to precompile SASS or LESS, increase the reusability of CSS code. Hierarchies, mixins, variables, loops, functions, and so on are handy for writing and developing UI components. Post-processors, such as postCss, usually process CSS according to the CSS specification in the finished stylesheet to make it more efficient. The most common approach is to add browser private prefixes to CSS properties to achieve cross-browser compatibility. CSS preprocessor adds some programming features to CSS, without considering the compatibility of browsers, you can use variables, simple logic programs, functions and other basic performance in the programming language in CSS, which can make CSS more concise, increase adaptability and readability, maintainability and so on. Other CSS preprocessor languages:Sass (Scss).`Less`.`Stylus`.`Turbine`.`Swithch css`.`CSS Cacheer`.`DT Css`. Why use: - Clear structure, easy to expand - easy to block browser private syntax differences - easy to implement multiple inheritance - perfect CSS code compatibility, can be applied to older projectsCopy the code

8. Text overflow hiding

overflow:hidden // Overflow is hidden
text-overflow:ellipsis  // Overflow is shown with ellipsis
white-space:nowrap   // Specifies that the text in a paragraph does not break a line
Copy the code

9. Why do I need to clear floats? The way to clear the float

* Float definition: in non-Ie browsers, the height of the container is not set and the height of the container cannot be stretched by the content when the child element floats. At this point, content spills out of the container and affects the layout. This phenomenon is called floating (overflow). * How floats work: - Floating elements leave the document flow and do not occupy space (causing "height collapse") - Floating elements touch the border that contains it or other floating elements and stay there * Floats are cleared as follows: - Define height for the parent div - add an empty div tag after the last floating element, and add the clear:both style - add overflow:hidden or overflow:auto for the parent tag that contains the floating element - use :after pseudo-elementsCopy the code

10. Understanding BFC and how to create a BFC

A block formatting context is part of a visual CSS rendering of a Web page. A BFC is a separate layout environment, which can be understood as a container in which objects are placed according to certain rules without affecting objects in other environments. If an element meets the conditions that trigger the BFC, the layout of the elements in the BFC is not subject to external influences: Solve margin overlap, solve height collapse, clean up internal floats, create an adaptive two-column layoutCopy the code

11. The Flex layout

Flex :1 is made up of attributes

Flex is actually a contraction of the flex-grow, flex-shrink, and flex-basis properties, which define how much space is allocated.1.Flex-direction: main axis row,column justify-content:(main axis alignment)flex-start/center/flex-end/space-around/space-between Flex-wrap :nowrap/wrap align-items:(side axis alignment)-- use -center for single line Align-content :(multiple lines (newline))--flex-start/center/flex-end/space-around/space-between2.Attributes added to children (items)flex(Copies)-- numbersCopy the code

11. Rearrange (reflux)/ redraw

** rearrangement (also called reflux):** when`DOM`Affects the geometry information of elements (`DOM`Object position and size), the browser needs to recalculate the element's geometry to place it in the correct position on the interface, a process called rearrangement. Trigger:1.Add or remove visible DOM elements1.Element sizing - margins, padding, borders, widths and heights ** Repainting: ** The process of redrawing an element's appearance when its appearance is changed without changing its layout is called repainting. Trigger: - Changes the element's'color, background, box-shadow'Attributes such asCopy the code

JavaScript interview questions summary

1. Let, const, the difference between the var

 varDeclared variables will be mounted inwindow, andletandconstDeclared variables do not:varDeclare variable there is variable promotion,letandconstThere is no variable promotionletandconstDeclare a block scopeCopy the code

2. What are the data types of JS and their differences

Stack: raw data type (undefined.null, Boolean,number,string) heap: reference data types (objects, arrays, and functions)Copy the code

3. What are the methods of data type detection

*typeofArrays, objects,nullWill be judged as object, other judgments are correcteg:console.log(typeof 2)   //number
*instanceofOnly reference data types (objects) can be correctly judged, not base data types.instanceofThe prototype operator can be used to test whether an object has a constructor's Prototype property in its prototype chaineg:console.log(2 instanceof number) //false
   console.log([] instanceof Array) //true
*constructor
*Object.prototype.toString.call() -- what are the ways to determine an arrayArray.isArray(obj);
 *bject.prototype.toString.call(obj).slice(8, -1) = = ='Array';
 *obj instanceof Array
Copy the code

4. Understanding JSON

JSONIs a text-based lightweight data interchange format. It can be read by any programming language and passed as a data format. In project development, useJSONAs a way to exchange data between the front and back ends. The front pass will be a fitJSONFormat data structure serialized asJSONString, and then passes it to the back end, which passes throughJSONThe corresponding data structure is generated after the format of the string parsing, so as to realize a transfer of the data at the front and back end. becauseJSONThe syntax is JS based, so it's easy to putJSONAnd objects in JS, but it should be notedJSONIt's not the same thing as an object in JS,JSONObject format is more strict in, for example, inJSONAttribute values cannot be functions and cannot appearNaNSuch property values etc., so most JS objects are not compliantJSONObject format. Two functions are provided in JS to implement JS data structures andJSONFormat conversion processing, -JSON.stringify function by passing in a fitJSONFormat the data structure and convert it to oneJSONA string. If the incoming data structure does not matchJSONFormat, then the values will be serialized in the corresponding special processing, to make them conform to the specification. When the front end sends data to the back end, you can call this function to convert the data object toJSONFormat string. -JSONThe.parse() function, which is used to parseJSONThe formatted string is converted to a JS data structure if the string passed is not standardJSONFormat string, will throw an error. When received from the backendJSONFormat string, you can use this method to parse it into a JS data structure for data access.Copy the code

5. Understanding closures

** closures are functions that have access to variables in the scope of another function. The most common way to create closures is to create another function within a function that has access to local variables of the current function. - Closure uses:1.The ability to access the lexical scope in which a function is defined (preventing it from being recycled)1.Privatization variable1.Simulate block-level scopes1.For example, if function A has A function B inside it, and function B can access variables in function A, then function B is A closure.Copy the code

6. Understanding of prototype and prototype chain

Constructors are used to create new objects in JavaScript. Each constructor has a Prototype property inside it whose value is an object containing properties and methods that can be shared by all instances of the constructor. When you create an object using a constructor, the object contains a pointer to the constructor's prototype property. In ES5, this pointer is called the prototype of the object. Normally you should not be able to get this value, but browsers now implement the **proto** attribute to access this property, but it is best not to use this attribute because it is not specified in the specification. There is a new one in ES5Object.getProtoTypeof () method, which can be used to retrieve the prototype of an object. When you access a property of an object, if that property doesn't exist inside the object, then it will look for that property in its prototype object, which in turn will have its own prototype, and so on and so forth, which is the concept of prototype chain. The end of the prototype chain is usuallyObjectPrototype so that's why new objects can use methods like toString(). >//** prototype :** The '__proto__' attribute inherent in the object, which points to the object's 'prototype' attribute.

>//** Prototype chain :** When we access a property of an object, if the property does not exist inside the object, it will look for the property in its prototype object, which in turn will have its own prototype, and so on and so on.
// The end of the prototype chain is usually 'object.prototype', so that's why our new Object can use methods like 'toString()'.

Copy the code

7. Understanding this object

thisIs a property in the execution context that points to the object on which the method was last called. In actual development,thisThe direction of can be determined by four invocation modes. - The first is ** function call mode **, when a function is called directly as a function that is not a property of an object,thisPoints to a global object. - The second is the ** method call mode **, if a function is called as an object method,thisPoint to this object. - The third way is to call the ** constructor mode ** if a function is usednewWhen called, a new object is created before the function executes,thisPoint to this newly created object. - The fourth method is the apply, call, and bind call modes. These three methods can display the specified call functionthisPointing to. The apply method takes two arguments: one isthisOne of the bound objects is an array of parameters. The call method receives arguments, the first of which isthisObject to bind, followed by the remaining arguments passed to the function to execute. That is, when using the call() method, the arguments passed to the function must be enumerated one by one. The bind method returns one by passing in an objectthisA new function that binds the passed object. Of this functionthisPoint to besides usenewWill be changed, otherwise it won't change.Copy the code

8. Scope, scope chain, variable promotion

scopeResponsible for collecting and maintaining a series of queries made up of all declared identifiers (variables) and enforcing a very strict set of rules that determine access to these identifiers by currently executing code. (Global scope, function scope, block level scope). A scope chain is a process of looking up a variable from the current scope until it finds the global scope. If it doesn't, it gives up. This layer by layer relationship, it'sScope chain.Copy the code

9.EventLoop

`JS`Is a single thread, in order to prevent the execution time is too long a function block at the back of the code, so will try to press the synchronization code into execution stack, in turn, push the asynchronous code into the asynchronous queue, asynchronous queue is divided into macro task queue and task queue, because the macro task queue execution time is longer, so the task queue to priority has been the task queue. The microtask queue is represented by,`Promise.then`.`MutationObserver`For macro tasks`setImmediate setTimeout setInterval`
Copy the code

10. The concept of garbage collection

** Garbage collection ** : When JavaScript code runs, it needs to allocate memory space to store variables and values. When variables are no longer participating in the run, the system needs to reclaim occupied memory space, which is called garbage collection. Ways to recycle garbage:1.Mark clear2.Reference counting3.Reduce garbage collection (array optimization, Object optimization)Copy the code

11. What conditions are causing memory leaks

- ** Unexpected global variable: Accidentally created a global variable by using an undeclared variable, leaving the variable in memory unreclaimed. - ** Forgotten timer or callback function: setsetIntervalTimer, and forget to cancel it. If the loop function has a reference to an external variable, that variable is left in memory and cannot be reclaimed. - ** Out-of-DOM reference: Gets a reference to a DOM element that was deleted. It cannot be reclaimed because references to this element are kept forever. - ** closures: Improper use of closures, resulting in some variables being left in memory.Copy the code

12. Anti-shake and throttle

If the event is triggered again within n seconds, the function execution time will be recalculated (multiple events will only respond once)-- input box, Scroll event throttling: continuously trigger events but only execute the function once in N seconds, -- infinite page loadingCopy the code