657 pages of front-end interview questions + answers, classified learning and sorting, conscientious production, continuous updating~

Note: It took more than a month to re-learn the basics, finish studying, finishing, summarizing and summarizing, painful and happy.

(Questions and suggestions are welcome, and a link to the proposer’s name will be attached after adoption)

HTML version

1. What is the difference between title and alt in the picture?

• Usually displayed when the mouse is over the element
• altIt is the equivalent description of the content of the picture, used for displaying when the picture cannot be loaded, and for reading the picture with a screen reader. It can improve the high accessibility of pictures. In addition to purely decorative pictures, meaningful values ​​must be set, and search engines will focus on analysis.

2. What are the new features of HTML5 and what elements have been removed

• New elements:
  • paintingcanvas
  • video 和 audioElements for media playback
  • Local offline storage localStorageafter long-term storage of data, the browser closes data is not lost
  • sessionStorage The data is automatically deleted after the browser is closed
  • Content elements with better semantics, such as article 、footer、header、nav、section
  • Form controls,calendar 、 date 、 time 、 email 、 url 、 search
  • New technology webworker 、 websocket 、 Geolocation
• Elements removed:
  • Pure performance elements: basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
  • Elements that have a negative impact on usability: frame 、 frameset 、 noframes
• Support HTML5 new tags:
  • IE8/IE7/IE6Supported by document.createElementtagging method produced
  • We can use this feature to get those browsers to support HTML5new label
  • After the browser supports the new tag, you also need to add the default style of the tag

3. How does the browser manage and load the offline storage resources of Html5?

how to use:

• Head of the page like the following is added as a manifestproperty;
• In the cache.manifestresources to prepare an offline storage files
• In the offline state, the operation window.applicationCachefor demand realization

In the case of online, browser found htmlthe head has manifestproperty, it requests manifestthe file, if it is the first visit app, the browser will be based on manifestthe contents of the file to download the appropriate resources and off-line storage. If you have already visited appand offline resources have been stored, then the browser will use the resource loading pages offline, then the browser will compare the new manifestfile with the old manifestfile, if the file has not changed, do not do anything, if the file If it is changed, the resources in the file will be downloaded again and stored offline.

4. What are the elements in the line? What are the block-level elements? What are the void elements?

First of all: The CSS specification stipulates that each element has a display attribute to determine the type of the element, and each element has a default display value. For example, if the default display value of a div is "block", it is a "block-level" element; span The default display attribute value is "inline", which is an "inline" element.
Commonly used block elements are:

、

、

…

、

1. 、
   • 、

     、、

     、

     ,
     Commonly used inline elements
     are:,, , , , , , , , ,
常用的内联块状元素有： 、
知名的空元素：


5. What is the difference between setting the width and height of the canvas on the label and setting the width and height in the style

The width and height of the canvas tag are the actual width and height of the canvas, and the graphics drawn are on this. The width and height of style are the height and width of the canvas being rendered in the browser. If the width and height of the canvas are not specified or the values ​​are incorrect, they are set to the default values.

6. How does the browser manage and load the offline storage resources of HTML5?

When online, the browser finds that the HTML header has a manifest attribute, and it will request the manifest file. If it is the first time to access the app, the browser will download the corresponding resources according to the content of the manifest file and store them offline. If you have already visited the app and the resources have been stored offline, the browser will use the offline resources to load the page, and then the browser will compare the new manifest file with the old manifest file. If the file has not changed, nothing will be done , If the file is changed, the resources in the file will be downloaded again and stored offline.
In the case of offline, the browser directly uses the resources stored offline.

7. What does Doctype do? How to distinguish between strict mode and promiscuous mode? What do they mean?

• The declaration is at the top of the document, before the html tag. Tell the browser's parser what document type and specification to use to parse this document
• Strict typesetting and JS operation mode are running at the highest standard supported by the browser
• In promiscuous mode, the page is displayed in a loosely backward compatible manner. Simulate the behavior of old browsers to prevent the site from not working. The absence of DOCTYPE or incorrect format will cause the document to be rendered in promiscuous mode

8. What are the HTML global attributes?

class: Set the class identifier
data-*for the element: Add custom attributes for the element
draggable: Set whether the element can be dragged
id: Element id, unique in the document
lang: Language of the element content
style: Inline css style
title: Suggested information related to the element

9. What are the advantages of div+css layout over table layout

It is more convenient to change the version, as long as you change the css file.
The page loads faster, the structure is clear, and the page display is concise.
Performance is separated from structure.
Easy to optimize (seo) The search engine is more friendly, and the ranking is easier to get higher.

Due to the large content, in order to avoid the reading experience, only part of the interview questions are displayed. The full version of the interview questions + analysis, [click me] is free to get.

CSS articles

1. The difference between link and @import in CSS:

@import is the grammatical rules provided by CSS, which only has the effect of importing style sheets; link is a tag provided by HTML, which can not only load CSS files, but also define RSS and rel connection attributes.
When the page is loaded, the CSS imported by link is loaded at the same time, and the CSS imported by @import will be loaded after the page is loaded.
As an HTML element, the link tag does not have compatibility issues, and @import is a syntax only available in CSS2.1, so older browsers (before IE5) cannot recognize it.
You can manipulate the DOM through JS to insert link tags to change the style; because the DOM method is document-based, you cannot use the @import method to insert styles.

2. The common and different points of absolute and fixed position:

Common points:
1. Change the presentation method of the elements in the row, and set the display to block;
2. Let the elements break away from the normal flow and do not occupy space;
3. By default, it will cover the non-positioned elements. Different points:
absolute "root element" is It can be set, and the fixed "root element" is fixed as the browser window. When you scroll the webpage, the distance between the fixed element and the browser window is constant.

3. What is the use of BFC

• Creation rule:
  root element,
  floating element (float is not valued as none)
  absolutely positioned element (position value is absolute or fixed)
  display value is one of inline-block, table-cell, table-caption, flex, inline-flex Element
  overflow is not an element whose value is visible
• Function:
  Can contain floating elements,
  not covered by floating elements,
  prevent the margins of parent and child elements from collapsing

4. Several ways to clear floats

The parent div defines the height
with an empty div tag at the end clear: both
parent div defines pseudo-classes: after and zoom
parent div defines overflow: hidden
parent div also floats, you need to define the width
and add a br tag at the end clear: both

5. Css3 new pseudo-class-pseudo-element

p:first-of-type selects the first one that belongs to its parent element

Each of the elements

element.
p:last-of-type selects the last of its parent element

Each of the elements

element.
p:only-of-type selects the only one that belongs to its parent element

Each of the elements

element.
p:only-child selects each of the only child elements belonging to its parent element

element.
p:nth-child(2) selects each of the second child elements belonging to its parent element

element.
:enabled The form element that is enabled.
:disabled Disabled form element.
:checked The radio button or check box is checked.
::before adds content before the element.
::after adds content after the element, and can also be used to clear the float.
::first-line adds a special style to the first letter of the text.
::first-letter adds a line of special style to the first line.

I believe everyone can see their differences,

Pseudo-class syntax one: it is to make up for the shortcomings of the CSS regular class selector.
Pseudo-element syntax two: it is an element generated by a virtual container created out of thin air

6.IE box model, W3C box model

W3C box model: content, padding, margin, border;

box-sizing: content-box
width = content width;

IE box model: The content part of IE calculates border and padding;

box-sizing: border-box
width = border + padding + content width

7. When will display:inline-block not show the gap?

Remove spaces
Use negative margins
Use font-size:0
letter-spacing
word-spacing

8. Does the inline element become a block-level element after float:left?

After the inline elements are set to float, they become more like inline-block (inline block-level elements, elements set
to this attribute will have both inline and block-level characteristics, the most obvious difference is that its default width is not 100%), At this time, setting padding-top and padding-bottom or width and height for inline elements is effective

9.The weight of different CSS selectors (CSS cascading rules)

! The important rule is the most important, larger than other rules
. Inline style rules, add 1000.
For each ID attribute value given in the
selector , add 100. For each class attribute, attribute selector or pseudo-class selector given in the selector, add 10
For each element tag selector given in the selection, add 1
if the weight is the same, it will be applied according to the order of the style rules, and the lower order will cover the earlier rules.

10. The difference between stylus/sass/less

Both have the five basic characteristics of "variable", "mixing", "nesting", "inheritance", and "color mixing".
Sass and LESS have strict grammars. LESS requires braces "{}" to be used. Sass and Stylus can pass Indentation indicates the level and nesting relationship.
Sass has no concept of global variables. LESS and Stylus have a scope concept similar to other languages.
Sass is based on the Ruby language, while LESS and Stylus can be compiled based on NodeJS NPM after downloading the corresponding library; this This is why sometimes errors are reported when installing Sass, and python scripts need to be installed

Advantages: I don't need to say more, whoever knows who uses it, it's really fragrant.

Due to the large content, in order to avoid the reading experience, only part of the interview questions are displayed. The full version of the interview questions + analysis, [click me] is free to get.

JavaScript

1.js various positions, such as clientHeight, scrollHeight, offsetHeight, and the difference between scrollTop, offsetTop, clientTop?

clientHeight: Represents the height of the visible area, excluding border and scroll bar
offsetHeight: Represents the height of the visible area, including border and scroll bar
scrollHeight: Represents the height of all areas, including the part that is hidden due to scrolling.
clientTop: indicates the thickness of the border, generally 0 if it is not specified.
scrollTop: the height that is hidden after scrolling, and obtains the height of the object relative to the parent coordinate specified by the offsetParent attribute (css positioning element or body element) from the top .

2.js drag and drop function realization

The first are three events, namely mousedown, mousemove, and mouseup.
When the mouse is clicked and pressed, a tag is required to indicate that it has been pressed at this time, and the specific methods in mousemove can be executed.
clientX and clientY identify the coordinates of the mouse, respectively identify the abscissa and ordinate, and we use offsetX and offsetY to represent the initial coordinates of the element. The example of movement should be:
coordinates when the mouse is moved-when the mouse is pressed coordinate.
That is to say, the positioning information is:
the coordinates when the mouse is moved-the coordinates when the mouse is pressed + the offetLeft of the element in the initial situation.
There is also a principle thing, which is absolute positioning while dragging. What we have changed is
Values such as left and top under absolute positioning conditions .
Supplement: It can also be achieved through drag and drop of html5 (Drag and drop)

3. Asynchronously load js method

defer: only supports IE. If your script does not change the content of the document, you can add the defer attribute to

4.js anti-shake

Debouncing The
anti-shake technology can combine multiple sequential calls into one, that is, the number of times the event is triggered within a certain period of time.
In layman's terms, take a look at this simplified example:

// 简单的防抖动函数
function debounce(func, wait, immediate) {
    // 定时器变量
    var timeout;
    return function() {
        // 每次触发 scroll handler 时先清除定时器
        clearTimeout(timeout);
        // 指定 xx ms 后触发真正想进行的操作 handler
        timeout = setTimeout(func, wait);
    };
};
 
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
 
// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.addEventListener('scroll',realFunc);

The above simple anti-shake example can be tested in a browser. The approximate function is that if the scroll event is not triggered twice within 500ms, then the function we really want to trigger in the scroll event will be triggered.
The above example can be better encapsulated

// 防抖动函数
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
 
var myEfficientFn = debounce(function() {
    // 滚动中的真正的操作
}, 250);
 
// 绑定监听
window.addEventListener('resize', myEfficientFn);

5. Closures that cannot be bypassed

• Closure is a function that can read the internal variables of other functions
• A closure is a function that has access to variables in the scope of another function. The most common way to create a closure is in a
• Create another function within the function, access the local variables of this function through another function, and use closures to break through the scope of scope
• The feature of closure: the
  function is nested inside the function. The
  inner function can refer to the outer parameters and variables. The
  parameters and variables will not be recycled by the garbage collection mechanism.
• Advantages: can realize encapsulation and caching, etc.
• Disadvantages: memory consumption, improper use will cause memory overflow,
• Solution: Before exiting the function, delete all unused local variables

6. Tell me about your understanding of the scope chain

The role of the scope chain is to ensure that the variables and functions that have been accessed in the execution environment are in order. Variables in the scope chain can only be accessed upwards, and the variable access to the window object will be terminated. The scope chain downward access to the variables is not Allowed.
Simply put, the scope is the accessible scope of variables and functions, that is, the scope controls the visibility and life cycle of variables and functions

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

Every object initializes a property in its interior, which is prototype. When we access the property of an object, if the property does not exist in the object, then he will go to the prototype to find the property, and the prototype will Has its own prototype, so I keep looking for it, which is the concept of the prototype chain we usually call

Relationship: instance.constructor.prototype = instance. proto
features: 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 related to it will also inherit this change. When we need a property, the Javascript engine will first check whether there is this property in the current object, and if it doesn’t, it will look for its prototype object. With this attribute, the recursion continues until the built-in Object object is retrieved

8. Please explain what is event delegation/event delegation

Event delegation (Event Delegation), also known as event delegation. It is a common technique for binding events commonly used in JavaScript. As the name implies, "event agent" is to delegate the event that originally needed to be bound to the parent element, and let the parent element take on the role of event monitoring. The principle of event delegation is the bubbling of events of DOM elements. The advantage of using event proxy is that it can improve performance,
save a lot of memory, and reduce event registration. For example, it is great to proxy all td click events on the table. It is
possible to realize that there is no need to bind to it again when adding new sub-objects.

9. How does Javascript implement inheritance?

• Constructive inheritance
• Prototype inheritance
• Instance inheritance
• Copy and inherit the
  prototype mechanism or apply and call methods to achieve simpler, it is recommended to use a mixed method of constructor and prototype

function Parent(){
this.name = 'wang';
}
function Child(){
 this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性

10. Talk about the understanding of This object

this always refers to the direct caller of the function (not the indirect caller).
If there is the new keyword, this refers to the object that came out of new
in the event, and this refers to the object that triggered the event. In particular, in attachEvent in IE The this always points to the global object Window

11.What exactly does the new operator do?

Create an empty object, and the this variable refers to the object, and at the same time inherits the prototype of the function. The
properties and methods are added to the object referenced
by this . The newly created object is referenced by this, and finally returns this implicitly.

12. Ajax principle

The principle of Ajax is simply to add an intermediate layer (AJAX engine) between the user and the server, through the XmlHttpRequest object to send asynchronous requests to the server, obtain data from the server, and then use javascript to manipulate the DOM to update the page. Make user operations and server responses asynchronous. The most critical step is that the
Ajax process of obtaining request data from the server only involves JavaScript, XMLHttpRequest and DOM. XMLHttpRequest is the core mechanism of Ajax

Due to the large content, in order to avoid the reading experience, only part of the interview questions are displayed. The full version of the interview questions + analysis, [click me] is free to get.