Home > Article > Web Front-end > Front-end interview FAQs

Front-end interview FAQs

阿神Original: 2017-01-23 14:04:351815browse

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) 1a309583e26acea4f04ca31122d8c535 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 fef50554eca1a427827adaa329da8122?

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,

6fc79538f41ba7309e847292db36ab30

60453962d656d01b50acc4a3185457fa

10. Briefly describe your understanding of HTML semantics?

Use the right tags to do the right thing.

html semantics structure the content of the page and make the structure clearer, making it easier for browsers and search engines to parse;

It is displayed in a document format even without style CSS. And is easy to read;

Search engine crawlers also rely on HTML tags to determine the context and weight of each keyword, which is beneficial to seo;

Make the website easier for people who read the source code Divide the website into sections to make it easier to read, maintain and understand.

JavaScript

1. Introducing the basic data types of js

Undefined, Null, Boolean , Number, String

2. What are the built-in objects in js?

Data encapsulation class objects: Object, Array, Boolean, Number and String

Other objects: Function, Arguments, Math, Date, RegExp, Error

3. Understanding of this object

this always points to the direct caller of the function (not the indirect caller);

If there is a new keyword, this points to new. The object;

In the event, this points to the object that triggered the event. Specially, this in the attachEvent in IE always points to the global object Window.

4. What does eval do?

Its function is to parse the corresponding string into JS code and run it;

You should avoid using eval, which is unsafe and very performance-consuming (twice, once parsed into js statement, executed once).

When converting a JSON string into a JSON object, you can use eval, var obj =eval('('+ str +')').

5. How to add, remove, move, copy, create and find nodes in DOM

// 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

6. What is the difference between null and undefined?

null is an object that represents "none" and is 0 when converted to a numerical value; undefined is a primitive value that represents "none" and is NaN when converted to a numerical value.

undefined:

(1) When the variable is declared but not assigned a value, it is equal to undefined.

(2) When calling the function, the parameter that should be provided is not provided, and the parameter is equal to undefined.

(3) The object has no assigned attribute, and the value of this attribute is undefined.

(4) When the function does not return a value, it returns undefined by default.

null:

(1) As a parameter of the function, it means that the parameter of the function is not an object.

(2) As the end point of the object prototype chain.

7. What exactly does the new operator do?

(1) Create an empty object, and the this variable refers to the object, and also inherits the function Prototype.

(2) Properties and methods are added to the object referenced by this.

(3) The newly created object is referenced by this, and this is returned implicitly at the end.

8. Do you know JSON?

JSON (JavaScript Object Notation) is a lightweight data exchange format. It is based on a subset of JavaScript. The data format is simple, easy to read and write, and takes up little bandwidth.

Format: Use key-value pairs, for example: {'age':'12', 'name':'back'}

9. call() and apply() What are the differences and functions?

The apply() function has two parameters: the first parameter is the context, and the second parameter is an array of parameters. If the context is null, the global object is used instead.

For example: function.apply(this,[1,2,3]);

The first parameter of call() is the context, and the subsequent parameter sequence is the parameter sequence passed in by the instance.

For example: function.call(this,1,2,3);

10. How to obtain UA?

function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}

Others

1. What do you know about HTTP status codes?

100 Continue. Generally, when sending a post request, the server will return this information after sending the http header to indicate confirmation, and then send specific parameter information

200 OK Normal Return information

201 Created The request was successful and the server created a new resource

202 Accepted The server has accepted the request but has not yet processed it

301 Moved Permanently The requested web page has been permanently moved to a new location.

302 Found Temporary redirection.

303 See Other Temporary redirect, and always use GET to request a new URI.

304 Not Modified The requested web page has not been modified since the last request.

400 Bad Request The server cannot understand the format of the request and the client should not attempt to initiate a request using the same content again.

401 Unauthorized The request is not authorized.

403 Forbidden Access is prohibited.

404 Not Found The resource matching the URI could not be found.

500 Internal Server Error The most common server-side error.

503 Service Unavailable The server is temporarily unable to process the request (may be due to overload or maintenance).

2. What performance optimization methods do you have?

(1) Reduce the number of http requests: CSS Sprites, JS, CSS source code compression, appropriate image size control; web page Gzip, CDN hosting, data cache, image server.

(2) Front-end template JS+data reduces bandwidth waste caused by HTML tags. The front-end uses variables to save ajax request results. Each time it operates local variables, there is no need to request, reducing the number of requests

( 3) Use innerHTML instead of DOM operations to reduce the number of DOM operations and optimize javascript performance.

(4) When there are many styles to be set, set className instead of directly operating style.

(5) Use less global variables and cache the results of DOM node search. Reduce IO read operations.

(6) Avoid using CSS Expression (css expression), also known as Dynamic properties (dynamic properties).

(7) Image preloading, put the style sheet at the top, put the script at the bottom and add a timestamp.

3. What are graceful degradation and progressive enhancement?

Graceful degradation: The website will work normally in all modern browsers. If the user is using an older browser, the code will check to confirm whether they work properly.

Due to IE's unique box model layout problem, the hack practice for different versions of IE has been gracefully downgraded, and candidate solutions have been added for browsers that cannot support functions, so that they can work in some way on older browsers. The form degrades the experience but does not completely invalidate it.

Progressive enhancement: Starting from the basic functions supported by all browsers, gradually adding those functions that are only supported by new browsers, adding additional styles and functions to the page that are not harmful to the basic browser. They are automatically rendered and functional when supported by the browser.

4. What common operations can cause memory leaks?

A memory leak refers to any object that persists after you no longer own or need it.

The garbage collector periodically scans objects and counts the number of other objects that have references to each object. If the number of references to an object is 0 (no other object references the object), or the only reference to the object is circular, then the object's memory can be reclaimed.

If the first parameter of setTimeout uses a string instead of a function, it will cause a memory leak.

Closures, console logs, loops (a loop occurs when two objects reference each other and retain each other).

5. The difference between threads and processes

A program has at least one process, and a process has at least one thread.

The division scale of threads is smaller than that of processes, making multi-threaded programs highly concurrency.

In addition, the process has an independent memory unit during execution, and multiple threads share memory, thus greatly improving the running efficiency of the program.

Threads are still different from processes during execution. Each independent thread has an entry point for program execution, a sequential execution sequence, and an exit point for the program. However, threads cannot execute independently and must exist in the application program, and the application program provides multiple thread execution control.

From a logical point of view, the meaning of multi-threading is that in an application, multiple execution parts can be executed at the same time. However, the operating system does not regard multiple threads as multiple independent applications to implement process scheduling and management and resource allocation. This is the important difference between processes and threads.

HTML

1. What is the role of Doctype? How to distinguish between strict mode and mixed mode? What do they mean?

HTML5 Why do you only need to write fef50554eca1a427827adaa329da8122?

What are the inline elements? What are block-level elements? What are the void elements?

What is the difference between using link and @import when importing styles on a page?

Introduce your understanding of the browser core?

What are the common browser kernels?

What are the new features of html5 and which elements have been removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

Briefly describe your understanding of HTML semantics?

How to use HTML5 offline storage? Can you explain the working principle?

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

Please describe the difference between cookies, sessionStorage and localStorage?

What are the disadvantages of iframe?

What is the function of Label? How is it used? (Add for or package)

How to turn off the auto-complete function in HTML5 form?

How to realize communication between multiple tabs in the browser? (Alibaba)

How is webSocket compatible with low-end browsers? (Alibaba)

What are the uses of the Page Visibility API?

How to implement a circular clickable area on the page?

Achieve drawing a 1px high line without using border, and maintain the same effect in Quirksmode and CSSCompat mode of different browsers.

What is the web page verification code used for? What security issues is it used to solve?

What is the difference between tite and h1, b and strong, i and em?

CSS

Introduce the standard CSS box model? How is it different from the box model of lower versions of IE?

What are the CSS selectors? What properties can be inherited?

How is the CSS priority algorithm calculated?

What are the new pseudo-classes in css3?

How to center a div? How to center a floated element? How to center an absolutely positioned div?

What are the values of display? Explain their role.

What is the relative and absolute positioning origin of position?

What are the new features of CSS3?

Please explain the Flexbox (flexible box layout model) of CSS3 and its applicable scenarios?

What is the principle of creating a triangle with pure CSS?

How to design a full screen word layout?

Common compatibility issues?

What is the reason for the invisible white space between li and li? What is the solution?

What are the compatibility of commonly encountered browsers? The reason, what are the solutions, and commonly used hack techniques?

Why initialize CSS styles.

What is the difference between absolute containing block calculation method and normal flow?

The visibility attribute in CSS has a collapse attribute value. What is it used for? What will be the difference in different browsers?

What will happen when the features of position, display, margin collapse, overflow, and float are superimposed on each other?

Understanding of the BFC specification (block formatting context: block formatting context)?

How is CSS weight priority calculated?

Please explain why floats appear and when do they need to be cleared? How to clear floats

Have you ever used media queries for mobile layout?

Use CSS preprocessor? Like that one?

What are the methods to optimize and improve performance of CSS?

How does the browser parse CSS selectors?

Should I use odd or even numbered fonts in web pages? why?

What scenarios are margin and padding suitable for?

How to write the abstract style module, tell me your ideas, do you have any practical experience? [Alibaba Air Travel Interview Question] Is the vertical percentage setting of an element relative to the height of the container?

What is the principle of full-screen scrolling? What CSS properties are used?

What is responsive design? What are the basic principles of responsive design? How to be compatible with lower versions of IE?

Parallax scrolling effect, how to create different animations for each page? (Go back to the top, slide down to make it appear again, or how to make it appear only once?) What is the difference between double colon and single colon in

::before and :after? Explain the role of these two pseudo-elements.

How to modify the yellow background of the automatically filled form after Chrome remembers the password?

What do you understand by line-height?

After setting the element to float, what is the display value of the element? (It automatically becomes display:block)

How to make Chrome support text smaller than 12px?

How to make the fonts on the page clearer and thinner using CSS? (-webkit-font-smoothing: antialiased;)

The font-style attribute can be assigned the value "oblique" What does oblique mean?

What to do if position:fixed; is invalid on Android?

If you need to write animation manually, what do you think is the minimum time interval and why? (Alibaba)

display:inline-block When will the gap be displayed? (Ctrip)

overflow: How to solve the problem of not being able to scroll smoothly when scrolling?

There is a height-adaptive div with two divs inside, one with a height of 100px, and I hope the other one fills the remaining height.

Explain these image formats such as png, jpg, and gif and when to use them. Have you ever learned about webp?

What is Cookie Isolation? (Or: How to do not let it carry cookies when requesting resources) What is the difference between writing the

style tag after the body and before the body?

JavaScript

Introduces the basic data types of JavaScript.

Talk about the basic specifications for writing JavaScript?

JavaScript prototype, prototype chain? What are its characteristics?

How many types of values does JavaScript have? (Heap: primitive data type and stack: reference data type), can you draw their memory diagram?

How does Javascript implement inheritance?

Several ways to create objects in Javascript?

Javascript scope chain domain?

Talk about the understanding of This object.

What does eval do?

What is a window object? What is a document object?

What is the difference between null and undefined?

Write a general event listener function (machine test question).

[“1”, “2”, “3”].map(parseInt) What is the answer?

Regarding events, what is the difference between the event mechanisms of IE and Firefox? How to stop bubbling?

What is closure (closure) and why should we use it?

What does "use strict" in JavaScript code mean? What is the difference between using it?

How to determine whether an object belongs to a certain class?

What exactly does the new operator do?

Have you ever implemented any functions using native JavaScript?

In Javascript, there is a function that will never search for the prototype when searching for objects during execution. What is this function?

Do you know JSON?

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1< ;<24))).toString(16) }) Can you explain what this code means?

What are the ways to delay loading in js?

What is Ajax? How to create an Ajax?

What is the difference between synchronous and asynchronous?

How to solve cross-domain problems?

What to do if the page encoding and the requested resource encoding are inconsistent?

How to do modular development?

What is the difference between AMD (Modules/Asynchronous-Definition) and CMD (Common Module Definition) specifications?

What is the core principle of requireJS? (How to load dynamically? How to avoid multiple loading? How to cache?)

Let you design and implement a requireJS yourself, what would you do?

Talk about your understanding of ECMAScript6?

How to write class in ECMAScript6? Why does class appear?

What are the methods of asynchronous loading?

What is the difference between document.write and innerHTML?

DOM operations - how to add, remove, move, copy, create and find nodes?

.call() and What is the meaning and difference of .apply()?

What are the native methods of arrays and objects? List them?

How to implement a class in JS. How to instantiate this class

Scope and variable declaration promotion in JavaScript?

How to write high-performance Javascript?

What operations will cause memory leaks?

Have you seen the source code of JQuery? Can you give a brief overview of its implementation principle?

What object does this return from the init method of jQuery.fn refer to? Why return this?

How to convert an array into a json string in jquery and then back again?

What is the implementation principle of jQuery's attribute copy (extend), and how to implement deep copy?

What is the difference between jquery.extend and jquery.fn.extend?

How is jQuery’s queue implemented? Where can queues be used?

Talk about the differences between bind(), live(), delegate(), and on() in Jquery?

JQuery can bind multiple events to an object at the same time. How is this implemented?

Do you know about custom events? What does the fire function in jQuery mean and when to use it?

Which method does jQuery combine with the Sizzle selector? (jQuery.fn.find() enters Sizzle)

Optimization method for jQuery performance?

What is the difference between Jquery and jQuery UI?

Have you seen the source code of JQuery? Can you briefly talk about its implementation principle?

How to convert an array into a json string in jquery and then back again?

What is the difference between jQuery and Zepto? What are their respective usage scenarios?

Optimization method for jQuery?

How to solve the problem of point penetration in Zepto?

How to customize jQueryUI components?

Requirements: Implement a website that does not refresh the entire page during page operations, and can respond correctly when the browser moves forward or backward. Give your technical implementation plan?

How to determine whether the current script is running in the browser or node environment? (Alibaba)

What is the minimum touch area on the mobile terminal?

jQuery's slideUp animation, if the target element is driven by external events, when the mouse triggers external element events quickly and continuously, the animation will be executed repeatedly with lag, how to deal with it?

Replace Script What is the difference between placing the tag at the bottom of the page before the body is closed and after it is closed? How will the browser parse them?

There is a delay in the click event on the mobile terminal. How long is it and why? How to solve this delay? (Click has a 300ms delay. In order to implement Safari's double-click event design, the browser needs to know whether you want to double-click.)

Know various JS frameworks (Angular, Backbone, Ember, React, Meteor, Knockout ...)? Can you tell me their respective advantages and disadvantages?

Which JS native objects does Underscore extend and what useful function methods does it provide?

Explain scope and variable declaration hoisting in JavaScript?

What operations will cause memory leaks?

JQuery can bind multiple events to an object at the same time. How is this implemented?

Applicable scenarios for Node.js?

(If you know how to use node) Do you know route, middleware, cluster, nodemon, pm2, server-side rendering?

Explain the MVC implementation of Backbone?

What is "front-end routing"? When is it appropriate to use "front-end routing"? What are the advantages and disadvantages of "front-end routing"?

Do you know what webkit is? Know how to use a browser Are there various tools to debug and debug code?

How to test front-end code? Do you know BDD, TDD, Unit Test? Do you know how to test your front-end project (mocha, sinon, jasmin, qUnit...) ?

What is front-end templating (Mustache, underscore, handlebars) used for, and how to use it?

Briefly describe the basic usage of Handlebars?

Briefly describe the basic processing flow of Handlerbars templates. How is it compiled? How is it cached?

Use js to implement thousand separators? (Source: front-end migrant workers, prompt: regular + replace)

What are the ways to detect browser versions?

We bind two click events to a dom at the same time, one using capture and one using bubbling. Can you tell me how many times the event will be executed, and whether bubbling or capturing will be executed first

Front-end interview FAQs

Related articles