Reprinted-front-end engineer interview questions

@ Version 1.0

Note:This repo contains some front-end interview questions for candidates. It is not recommended to ask each question (it may take several hours) for a single candidate ). By selecting a candidate from the list, you can check whether the candidate has the required skills.

Remember, many questions are open and can lead to interesting discussions. This is more capable than a direct answer.

Initial contributor

Note:Most of the questions are collected by a post and provided by the following individuals:

• @ Bentruyman (http://bentruyman.com)
• @ Cowboy (http://benalman.com)
• @ Roger_raymond (http://twitter.com/iansym)
• @ Ajpiano (http://ajpiano.com)
• @ Paul_irish (http://paulirish.com)
• @ SlexAxton (http://alexsexton.com)
• @ Boazsender (http://boazsender.com)
• @ Miketaylr (http://miketaylr.com)
• @ Override koff (http://vladfilippov.com)
• @ Gf3 (http://gf3.ca)
• @ Jon_neal (http://twitter.com/jon_neal)
• @ Wookiehangover (http://wookiehangover.com)
• @ Darcy_clarke (http://darcyclarke.me)
• @ Tairraos (http://xiaole.happylive.org)

General problems

• Are you using Twitter? (Is it best to ask you to use Weibo in tianchao ?)

  • If they are used, who do you care about?

• Are you using GitHub?

  • If so, what projects do you pay attention?

• What blogs do you follow?

• Which version management systems do you use, such as git and SVN?

• What is your common development environment? Such as operating systems, text editors, browsers, and other tools.

• Can you describe the workflow for creating a webpage?

• Can you describe the difference between progressive enhancement and graceful degradation?

  • If you mention feature detection, you can add extra points.

• Please explain what is semantic HTML.

• Which Browser Do you prefer for development? What tools do you use?

• How do you optimize website files and resources?

  • The expected solutions include:
    • File Merging
    • File Minimization/File compression
    • Use CDN for hosting
    • Cache Usage
    • Others

• Why is the use of multiple domain names to store website resources more effective?

  • How many resources can a browser make from a domain name at a time?

• Three methods are provided to reduce the page loading time. (Loading time refers to the perceived time or the actual loading time)

• If you receive a project that uses tab to indent code, but you like spaces, what do you do?

  • It is recommended that this project use specifications like EditorConfig (http://editorconfig.org)
  • To maintain consistency, convert to the original style of the project
  • Use the retab command of VIM directly

• Please write a simple magic light effect page

  • If you do not use JS, you can add points.

• What work do you use to test the code performance?

  • Example: JSPerf (http://jsperf.com /)
  • Example Dromaeo (http://dromaeo.com /)
  • Others.

• What if you plan to master a new technology this year?

• Let's talk about your understanding of the importance of webpage standards and standards-making institutions.

• What is fouc? How do you avoid fouc?

HTML Problems

• What is the role of the document type? How many types of documents do you know?

• What is the difference between the standard and weird browser modes?

• What are the limitations of using XHTML?

  • If 'application/xhtml + xml' is used on the page, what is the problem?

• What if the webpage content needs to support multiple languages?

  • What problems do you have to consider when designing and developing multilingual websites?

• Can I use the XHTML syntax on HTML5 pages?

• How to use XML in HTML5?

• What is the role of the 'data-'attribute?

• If HTML5 is regarded as an open platform, what are its construction modules?

• What is the difference between cookie, sessionStorage and localStorage?

JS Problems

• What Javascript libraries have you used?

• Have you studied the source code of your JS library or framework?

• What is a hash table?

• What are the values of the 'undefined' and 'undefined' variables?

• What is a closure, how to use it, and why?

  • What is the closure mode you like?

• Can I cite a typical example of an anonymous function?

• Please explain what is the Javascript module mode and give a practical example.

  • If you mention a non-polluting namespace, you can consider adding extra points.
  • What if your module does not have its own namespace?

• How do you organize your own code? Is the module mode used or the classic Inheritance Method used?

• What is the difference between a Javascript Host object and a built-in object?

• Identify the differences between the following code:

  function Person(){} var person = Person() var person = new Person()

• What is the difference between '. call' and'. application?

• What is the role of 'funciton. prototype. bind?

• How do you optimize your code?

• Can you explain how inheritance in JavaScript works?

• When will you use 'document. write ()'?

  • Most of the generated ad code still uses 'document. write () ', although this usage will be unpleasant.

• What is the difference between browser feature detection, feature inference, and browser UA string sniffing?

• Please explain the working principles of AJAX as much as possible.

• Please explain how JSONP works and why it is not real AJAX.

• Have you used a JavaScript template system?

  • If you have used these files, please talk about the files that you have used. For example, Mustache. js and Handlebars.

• Please explain how the variable declaration is upgraded.

• Describe the event bubbling mechanism.

• What is the difference between "attribute" and "property?

• Why is it a bad practice to extend JavaScript built-in objects?

• Why is it a good practice to expand JavaScript built-in objects?

• Note the differences between document load and document ready. (This is a problem)

• '=' And '=' are different?

• How do you get the parameters in the query string in the browser URL.

• Please explain the same source policy of JavaScript.

• Please explain the event proxy.

• Describe the inheritance mode of JavaScript.

• How to implement the following code:

  [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

• Describes a JavaScript memoization policy to avoid repeated operations.

• What is a ternary conditional statement?

• What is the parameter element of a function?

• What is "use strict "? What are the advantages and disadvantages of using it?

JS Code example:

~~3.14

Q: What is the return value of the preceding statement?Answer: 3

"i'm a lasagna hog".split("").reverse().join("");

Q: What is the return value of the preceding statement?Answer: "Goh angasal A m' I"

( window.foo || ( window.foo = "bar" ) );

Q: What is the value of window. foo?Answer: "bar"Only when window. foo is false is the above answer, otherwise it is its own value.

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

Question: What are the results of the above two alert statements?Answer: "Hello World" & referenceerror: bar is not defined

var foo = [];foo.push(1);foo.push(2);

Question: What is the value of foo. length?Answer: '2'

var foo = {};foo.bar = 'hello';

Question: What is the value of foo. length? ** Answer:undefined

foo = foo||bar

Q: What does this line of code mean? ** Answer: if (! Foo) foo = bar

foo>>1

Q: What does this line of code mean? ** Answer: Math. floor (foo/2)

foo|0foo+.5|0

Q: What does this line of code mean? ** Answer: parseInt (foo) & Math. round (foo)

function foo(bar1, bar2, bar3){}

Q: How do I obtain the number of parameters? ** Answer: foo. length // this example is 3

JQuery-Specific Questions: jQuery Problems

• Explain "chaining ".

• Description: "deferreds ".

• You know the Optimization Methods for jQuery.

• Please explain the usage of '. end.

• How do you give an event processing function namespace? Why?

• Specify four different values that you can pass to the jQuery method.

  • Selector (string), HTML (string), callback function, HTML element, object, array, element array, jQuery object, etc.

• What is performance queue?

• Note the differences between '. get ()', '[]', and 'eq.

• Note the differences between '. bing ()', '. live ()' and '. delegate.

• What is the difference between '$' and '$. fn? Or use '$. fn.

• Optimize the following selector:

  $(".foo div#bar:eq(0)")

• What is the difference between 'delegate () 'and 'Live?

CSS Problems

• Describes the function and purpose of css reset.

• Describe the movements and how they work.

• The methods used to clear the float are applicable to different situations.

• Explains how to use css sprites.

• What is your favorite image replacement method and how do you choose to use it.

• Discuss CSS hacks, condition references, or others.

• How to provide web pages for browsers with functional limitations.

  • You will use those technologies and solutions.

• How to visually hide webpage content and make them available only in screen readers.

• Have you used a grid system? If you have used it, which one do you like best?

• Have you ever used meidia queries or CSS la s related to mobile websites.

• Are you familiar with writing SVG styles?

• How to optimize the Print Style of a webpage.

• When writing highly efficient CSS files, what issues need to be considered.

• Do you use a CSS Preprocessor? (SASS, Compass, Stylus, LESS)

  • If used, describe your preferences.

• Have you ever touched on the design of non-standard fonts?

  • Font Service, Google Webfonts, Typekit, and so on.

• Please explain how the browser selects the corresponding element based on the CSS selector.

Optional interesting questions

• What is the coolest code you have written? What are you most proud?

• Do you know the HTML5 gang logo?

• Whether you are or have been on a ship. (Do not understand this humor)

• What is your favorite part of the development tools you use?

• Do you have any amateur projects? Which type?

• Why is cornify important? (This question cannot be reached)

• Write ABCDE vertically on a piece of paper and sort them in order without any code.

  • Quietly check whether they reverse the paper.

• Pirate or ninja?

  • If you have a combination of the two and have a proper reason, you can add points. If it's a zombie, monkey, pirate, and ninja, add two points. (Note: This question is too cultural)

• What would you do if you didn't develop on the Web?

• Where is the hiding position of Karman San Diego?

  • Tip: The answer to this question is always wrong.

• What are your favorite IE features?

• Brendan Eich and Doug Crockford are JavaScript ________.

• Discussion: jQuery is the best library or the best library.

Bytes -----------------------------------------------------------------------------------

Original article address: front-end engineer interview questions