preface

Many people say that programmers are hard, and the words associated with this role are usually busy, working overtime, staying up late, etc. As programmers, we see it as a worthy career, and we want to focus on the creative and fulfilling work of designing algorithms, improving designs, and optimizing systems.

But the reality is that many of us get caught up in endless busyness due to accidents, such as:

The product manager tells you the requirements have changed before you’ve even worked on the code. You work overtime because you misjudge the amount of work you do. You work your butt off to make something that doesn’t fit the bill, so you have to start all over again. You make massive changes to your code because it’s poorly designed and can’t adapt to new requirements. … The list goes on and on. It’s not the technical jobs that we struggle with, but the seemingly “unworthy” ones that consume a lot of our time and energy.

Why is that?

In the software industry, there is a famous book called “The Myth of the Man-month”, which mentions two very important concepts: Essential Complexity and Accident Complexity.

To put it simply, intrinsic complexity is what you have to do to solve a problem no matter what you do, while incidental complexity is what you have to do more because you choose the wrong way to do it.

For example, if you’re building a website, the content of the website is something you’re going to write about anyway, that’s “essential complexity.” If you’re writing a web site today, you’re not going to be productive because you’re using the wrong tool. The problem with choosing the wrong method or tool is “accidental complexity.”

This led me to realize that most of the problems programmers are busy solving are not procedural problems, but problems caused by accidental complexity. In other words, even software development can go smoothly if you choose the right way to do things and reduce the amount of work that comes with accidental complexity.

Whether they want to switch to the front end or graduate to join the front end work, in addition to technical mastery, this aspect of the business ability, problem solving ability should also be strengthened. Of course, we only have to first through the interview to consider these questions, so xiaobian to share a detailed and comprehensive interview questions, let you get twice the result with half the effort.

Xiaobian shared this interview question information covers: HTML, CSS, JS, JQuery, data request related questions, ES6, Vue, React, wechat applet, IOS/ Android browser adaptation issues, Pc compatibility issues, project questions, written programming questions, etc. Click here to get the full version of the PDF front end comprehensive interview questions.

HTML

  • What does Doctype do?
  • The difference between standard and weird modes:
  • What are inline elements/block-level elements/empty elements?
  • What is your understanding of the browser kernel?
  • What are the kernels of common browsers?
  • How do browsers manage and load HTML5 offline storage resources?
  • Describe the difference between cookies/sessionStorage and localStorage?
  • What are the new HTML5 features? How to deal with the compatibility of HTML5’s new tags? How to distinguish HTML from HTML5?
  • What is your understanding of HTML semantics?
  • How to use HTML5 offline cache? Can you explain how it works?
  • What is the difference between using link and @import when importing page styles?
  • What are the disadvantages of Iframe?
  • What does Label do? How does it work?
  • How do HTML5 forms turn off autocomplete?
  • How to implement communication between multiple tabs in the browser?
  • What are the purposes of page visibility? (visibility API)
  • How to implement a circular clickable area on a page?

CSS

  • ☆ Browser box model?
  • ☆ Clear floating mode
  • What are the CSS selectors? Which attributes can be inherited?
  • The difference between ::after/:after and ::before/:before?
  • CSS style priority calculation method:
  • ☆ What are the new CSS3 features and pseudo-classes?
  • Some advantages of less.
  • How do I center div?
  • What are the values of Display? Explain their role
  • The value of the Position?
  • Flex layout and common properties
  • Please explain the FLExbox (flexible box layout model) of CSS3 and how it works?
  • CSS triangles?
  • Full screen font layout?
  • What is the cause of the invisible gap between Li and Li?
  • Why do I initialize CSS styles?
  • What is the collapse of CSS visibility property?
  • What does margin merge mean?
  • Have you used media query for mobile layout?
  • Responsive pages?
  • Have you used CSS preprocessors (SASS and LESS)?
  • What are the pros and cons of using CSS preprocessing?
  • What are some ways to optimize/improve performance in CSS?
  • How do browsers parse CSS selectors?
  • What’s the difference between Margin and padding?
  • How does Css implement horizontal and vertical scrolling?
  • How do I set scroll bar styles?
  • How is the visual effect realized?
  • What do you think of line-height?

JS

  • What kind of language is JS?
  • What are the JS data types?
  • What built-in objects does JS have?
  • What’s the difference between stack and heap?
  • Scope and variable declaration enhancement in JS
  • How to convert a type?
  • What are object-oriented programming and procedural programming, their similarities and differences, their strengths and weaknesses
  • Object-oriented programming ideas
  • How to explain the role of this in JS?
  • Js with this (classic) :
  • ☆ Talk about JS prototypes and prototype chains
  • How to determine exactly if a variable is an array type?
  • ☆ What is the difference between call and apply?
  • What are the methods of inheritance?
  • ☆ What is a closure? What do closures do?
  • Event Agent (event delegate) :
  • The stages of the event
  • What stages does the ☆new operator go through when creating an instance
  • The implementation of asynchronous programming
  • Knowledge of native JS
  • What are the methods of lazy loading of JS?
  • Sort the array from smallest to largest?
  • The reverse() method is added to reverse the order of the array

JQuery:

  • What do you think is good about jQuery or Zepto source code
  • How does jQuery work?
  • What object is returned by the init method of jquery.fn? Why return this?
  • What is the difference between jquery.extend and jquery.fn.extend?
  • What is the principle of jQuery property copy (extend), how to achieve deep copy?
  • How are JQuery queues implemented? Where can queues be used?
  • Bind (), live (), delegate (), and on () in jQuery
  • How is it possible to bind multiple events to a jQuery object at the same time?
  • Optimization method for jQuery

Data request related issues

  • What are the HTTP request methods?
  • What are the HTTP status codes? Let me tell you what they mean
  • Describe the difference between GET and POST
  • Error in the length of get request parameters
  • What is the difference between HTTP and HTTPS? How to use it flexibly?
  • AJax is what? Why Ajax?
  • Briefly describe the ajax process.
  • Pros and cons of Ajax?
  • XMLHttpRequest Generic properties and methods
  • How many times do Ajax requests cross domain interfaces get sent?
  • Several ways to cross domains
  • How can a Web application actively push the Data client from the server?
  • How to implement communication between multiple tabs in the browser? (ali)
  • How does webSocket work with low browsers? (ali)
  • Detailed differences and pros and cons between FETCH, Ajax, axiOS:
  • Why axios?
  • What is Axios? How to use it? Describe the process of using it to implement the login function?
  • The difference between XML and JSON?

ES6

  • The following lists common ES6 features:
  • What does the arrow function need to notice?
  • The difference between arrow functions and normal functions
  • Let, const, var
  • Extension: what are the bugs with variables defined in var mode?
  • The arrow function this points to.
  • Handwriting ES6 class inheritance.
  • What is the difference between ES5 inheritance and ES6 inheritance?
  • What is the difference between an ES6 class new instance and an ES5 new instance?
  • Generator functions:
  • What is async/await and how does it work?
  • Promise and Async await and the difference between them:
  • Basic usage of async functions:
  • What is the difference between Async and Generator?
  • Simple implementation of async/await async function
  • Do you ever make promises? Please write down the following code execution results, and write down your understanding of the idea

React

  • React advantages and features
  • React props and state
  • How do react components communicate with each other?
  • Why does the virtual DOM improve performance?
  • React lifecycle function:
  • React performance optimization is what periodic function?
  • At what point in the lifecycle should you make an AJAX request?
  • Give an overview of the event handling logic in REact
  • How do I tell React that it should build the production version?
  • What happens after setState is called?
  • React setState
  • Why is setState asynchronous?
  • What does the second argument passed to the setState function do?
  • What is shouldComponentUpdate for and why is it important?
  • What is the difference between createElement and cloneElement?
  • Why do we need to use the Children API provided by React instead of JS map?
  • What’s the difference between Element and Component in React?
  • When would you prefer to use Class Component over Functional Compone
  • What does refs do in React?
  • What do keys do in React?
  • The diff algorithm?
  • React Performance Optimization?
  • React how to extract the real DOM from the virtual DOM

Other knowledge interview questions

  • Application scenarios of Node
  • Tell me what you think of Webpack
  • What is GULP?
  • Common Web security and defense principles
  • XSS principle and prevention method
  • CSRF principle and defense
  • XSS and CSRF two XSS attacks
  • Common.js AMD CMD difference
  • ES6 modules have CommonJS module differences
  • Web page verification code is what, is to solve what security problems
  • The principle of webpack
  • What is the difference between webpack loader and plugin?
  • How to optimize a project using WebPack?
  • Anti-shake and throttling
  • Browser caching
  • Describe a binary tree and explain how it can be traversed.

The reason for the limited space is that Vue, wechat applet, IOS/ Android browser adaptation, project questions, written programming questions and other interview questions are not listed.

conclusion

For the interview, say something personal.

An interview, after all, is a test. Just as we have always criticized that exam-oriented education is divorced from the essence of education, learning technology for interviews is also divorced from the original intention of technology. But the effectiveness of examinations for talent selection is indisputable, and has been for thousands of years. Unless you have the strength to prove to the company that you are good enough, prepare for the interview. This doesn’t prevent you from learning on your own terms once you’ve passed the interview.

In fact, in the interview preparation stage, personal harvest is great, I also think this is a good way to learn. First of all, most of the interview questions are basic and in-depth, which are the basis of daily work. It is as if we have never understood the meaning of learning a language before, but its meaning is in everyday conversation.

The so-called interview builds the rocket, the work twists the screw. It is a good thing that interviews are more demanding and force us to concentrate and learn more deeply.