Front-end interview FAQs

Introduces common questions when interviewing front-end engineers. Some of them have no answers. You can think about these questions in your spare time

1. Which browsers are commonly used for testing? What kernels (Layout Engine) are there?

(Q1) Browsers: IE, Chrome, FireFox, Safari, Opera.

(Q2) Kernel: Trident, Gecko, Presto, Webkit.

2. Tell me the difference between inline elements and block-level elements? Compatibility usage of inline block elements? (Below IE8)

(Q1) Inline elements: will be arranged in the horizontal direction and cannot contain block-level elements. Setting width is invalid, height is invalid (line-height can be set), margin up and down is invalid, padding Up and down are invalid.

Block-level elements: Each occupies one line and is arranged vertically. Begins on a new line and ends with a line break.

(Q2) Compatibility: display:inline-block;*display:inline;*zoom:1;

3. What are the ways to clear floats? Which is the better way?

(Q1)

(1) The parent div defines height.

(2) Add an empty div tag clear:both at the end.

(3) The parent div defines pseudo-classes: after and zoom.

(4) The parent div defines overflow:hidden.

(5) The parent div defines overflow:auto.

(6) The parent div is also floating and needs to define the width.

(7) The parent div defines display:table.

(8) Add the br tag clear:both at the end.

(Q2) The better method is the third method, which is used by many websites.

4. What are the commonly used attributes of box-sizing? What are the functions of each?

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box: The width and height are applied to the content box of the element respectively. Draws the element's padding and borders outside the width and height (the element's default effect).

border-box: Any padding and borders specified by the element will be drawn within the set width and height. The width and height of the content are obtained by subtracting the border and padding from the set width and height respectively.

5. What is the role of Doctype? What is the difference between standards mode and compatibility mode?

(Q1) tells the browser's parser what document standard to use to parse this document. A non-existent or incorrectly formatted DOCTYPE will cause the document to be rendered in compatibility mode.

(Q2) The typesetting and JS operation mode of the standard mode run according to the highest standard supported by the browser. In compatibility mode, pages are displayed in a loosely backwards-compatible manner, simulating the behavior of older browsers to prevent the site from not working.

6. HTML5 Why do you only need to write ?

HTML5 is not based on SGML, so there is no need to reference the DTD, but a doctype is needed to regulate browser behavior (let browsers run as they should).

HTML4.01 is based on SGML, so you need to reference the DTD to tell the browser the document type used by the document.

7. When importing styles into a page, what is the difference between using link and @import?

(1) Link is an XHTML tag. In addition to loading CSS, it can also be used to define RSS, define rel connection attributes, etc.; while @import is provided by CSS and can only be used to load CSS. ;

(2) When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading;

(3) The import is CSS2. 1 proposed, it can only be recognized in IE5 or above, and link is an XHTML tag, so there is no compatibility issue.

8. Please introduce your understanding of the browser core?

It is mainly divided into two parts: rendering engine (layout engineer or Rendering Engine) and js engine.

Rendering engine: Responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing the information (such as adding CSS, etc.), and calculating the display method of the web page, and then outputting it to the monitor or printer.

Different browser kernels will have different grammatical interpretations of web pages, so the rendering effects will also be different. All web browsers, email clients, and other applications that edit and display web content require the kernel.

JS engine: parses and executes javascript to achieve dynamic effects on web pages.

At first, the rendering engine and the JS engine were not clearly distinguished. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

9. What are the new features of html5? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

(Q1)

HTML5 is no longer a subset of SGML. It is mainly about the addition of images, location, storage, multitasking and other functions.

(1)Painting canvas;

(2)Video and audio elements for media playback;

(3)Local offline storage localStorage long-term storage data, browser Data will not be lost after closing;

(4) SessionStorage data will be automatically deleted after the browser is closed;

(5) Content elements with better semantics, such as article, footer, header, nav, section;

(6)Form controls, calendar, date, time, email, url, search;

(7)New technologies webworker, websocket, Geolocation;

(Q2)

IE8/IE7/IE6 supports tags generated by the document.createElement method,

You can use this feature to make these browsers support HTML5 new tags.

After the browser supports the new tags, you need to add the default style of the tags.

Of course, you can also directly use mature frameworks, such as html5shim,