Although the school recruitment of many large companies has come to an end and I just got a satisfactory offer, I would like to share some of the content of the front-end school recruitment.

Basically, the requirements of large companies for the front-end school recruitment are not limited to the front-end field, because for the general candidates are focused on the examination of potential. Smaller companies do not have too many requirements on candidates’ technical ability and project experience, but more hope to sign a student who is willing to do the work of cutting diagram at a relatively low price. Personally, IT is not very good for students’ development in the next few years.

process

Whether it is a phone interview or an in-person interview, the basic process is: self-introduction, basic part, project experience, expansion part (usually based on the content of the interviewer’s own answers for the point), the interviewer asks.

To introduce myself

Many students think that there is no need to prepare for this part, but in fact, if the interviewer answers the first question incoherently, the interviewer will not only have a bad impression on the interviewer, but also have a great impact on their own state in the future. So the interviewer had better write a good draft of self introduction, design to the content including but not limited to why learn front-end? What kind of awards have you won? “Although it is stated on my resume.

The interviewer may then ask:

  • How to start school?
  • What do you think the front-end does?
  • What do you understand as a front-end engineer?
  • What do you think front-end engineers can do for users and companies?
  • What technical challenges have you faced recently? How did you solve it?
  • How were the problems encountered in the project solved?
  • How do you study at ordinary times?
  • How long, where, and what did you do?
  • Can you finish the work assigned by the company during the internship? What about the workload?
  • .

Okay, that’s the foreplay, so let’s get down to basics.

Knowledge summary

HTML

  • HTML5 new features, semantic
  • Standard mode and weird mode for browsers
  • Differences between XHTML and HTML
  • Benefits of using data-
  • Meta tags
  • canvas
  • HTML obsolete tags
  • IE6 bugs, and some location writing methods
  • CSS JS position and reason
  • What is progressive rendering
  • HTML Template language
  • Principle of meta viewport

CSS

  • Box model, box-sizing
  • CSS3 new features, pseudo class, pseudo element, anchor pseudo class
  • The CSS is used to hide pages
  • How to achieve horizontal centering and vertical centering.
  • So position, display
  • Please explain * {box – sizing: border – box; } and explain the benefits of using it
  • What are the problems and solutions caused by floating elements? Absolute and relative positioning, element float after the display value
  • Link and @import introduce the difference between CSS
  • Explain the CSS3 Flexbox, and how it works
  • Difference between inline and inline-block
  • What are the block-level elements and what are the row-level elements
  • The grid layout
  • The role of the table layout
  • What are the ways to achieve a two-column layout?
  • css dpi
  • You know the difference between an attribute and a property
  • CSS layout problems? How does CSS implement a three-column layout? What if it’s adaptive in the middle?
  • How is streaming layout implemented? How is responsive layout implemented
  • Mobile terminal layout scheme
  • Achieve a three column layout (Grail layout, Twin Wings layout, Flex layout)
  • Clear float principle
  • Overflow: What are the drawbacks of Hidden?
  • Is the padding percentage relative to the parent width or its own width
  • Css3 animation, the difference between Transition and animation, animation properties, acceleration, gravity simulation implementation
  • Transform: Rotate CSS 3
  • sass less
  • What do you know about mobile development? (Responsive design, Zepto; @media, ViewPort, JavaScript regular expression judgment platform.
  • What is a BFC and how do you create one? Solve what problem?
  • CSS unit of length (px, pt, rem, em, ex, vw, vh, vh, vmin, vmax)
  • What is the priority of CSS selectors?
  • Sprite figure
  • svg
  • What is the principle of media query?
  • Does CSS load asynchronously? In what place?
  • What are some common browser compatibility issues? Common hack techniques
  • Margin merge
  • Explain the difference between a double colon and a single colon in “::before” and “:after.

JS

  • What are the basic types of JS? What are the reference types? Null and undefined.
  • How do I determine if a variable is Array type? How do I determine if a variable is of type Number? (More than one)
  • Is Object a reference type? What is the difference between reference types and primitive types? Which one is in the heap and which one is on the stack?
  • JS common DOM manipulation API
  • Explain event bubbling and event capture
  • Event delegate (handwritten example), event bubbling and capturing, how to prevent bubbling? How are default events organized?
  • What about closures? When does a closure form? How to implement closures? What are the pros and cons of closures?
  • What are the usage scenarios for this? How is this different from this in C,Java? How do I change the value of this?
  • Call, apply, bind
  • Display prototype and implicit prototype, hand-drawn prototype chain, what is a prototype chain? Why have a prototype chain
  • Multiple ways to create objects
  • There are many ways to implement inheritance, as well as advantages and disadvantages
  • New what exactly does an object do
  • Handwritten Ajax, XMLHttpRequest
  • Variable ascension
  • Illustrate a typical use case for an anonymous function
  • Point out the difference between JS host objects and native objects, why extending JS built-in objects is not a good practice? What built-in objects and built-in functions are there?
  • Attribute and Property
  • Document Load and Document DOMContentLoaded
  • = = = and = = = = = [] [], undefined = = = undefined, [] = = [], undefined = = is undefined
  • What values typeof can get
  • What is “use strict”, the pros and cons
  • What is the scope of the function? How many scopes does JS have?
  • How does JS implement overloading and polymorphism
  • Common array API, string API
  • Native event binding (cross-browser), difference between DOM0 and Dom2?
  • Given an element gets its coordinates relative to the view window
  • How to realize lazy loading of picture scrolling
  • What are the methods for string types in JS? How to use regular expression functions?
  • Deep copy
  • Write a generic event listener function
  • Setting and obtaining cookies on the Web side
  • Execution order of setTimeout and promise
  • What is the JavaScript event flow model?
  • Navigator objects, Location, and History
  • Js garbage collection mechanism
  • Causes and scenarios of memory leaks
  • Several ways to bind DOM events
  • The difference between target and currentTarget in DOM events
  • Typeof is different from Instanceof, the Instanceof principle
  • Js animation and CSS3 animation comparison
  • JavaScript Countdown (setTimeout)
  • Js handling exceptions
  • The JS design pattern knows that
  • The realization of the rote map, as well as the rote map component development, rote 10000 picture process
  • The working principle and mechanism of WebSocket.
  • What happens when a finger clicks on a touchable screen?
  • What is a function Coriolization? What is the APPLICATION of THE JS API to the implementation of the function Coriolization? (Some understanding of function currization, as well as in the application of functional programming, finally said JS bind function and array reduce method used in the function currization.)
  • JS code debugging

ES6

  • To talk about a promise
  • Do you know all the ES6 features? If you come across something and you don’t know if it’s ES6 or ES5, how do you tell it apart
  • What is the difference between ES6 inheritance and ES5 inheritance
  • Promise to encapsulate the ajax
  • Advantages of let const
  • What is ES6 generator and async/await implementation principle
  • ES6 and Node commonJS modular specification differences
  • Arrow function, and its this

Computer network

  • HTTP protocol header contains what important parts, HTTP status code
  • How do I do web URL input to output?
  • Why should performance tuning reduce THE number of HTTP calls?
  • The process and principle of Http request
  • HTTPS (yes HTTPS) how many handshakes and waves? How HTTPS works.
  • How many waves and handshakes does HTTP have? What is the Chinese name for TLS? Which network layer is TLS?
  • What are the features of TCP connections? How can TCP connections be secure and reliable?
  • Why does a TCP connection require three handshakes, not two? Why
  • Why does TCP have three handshakes and four waves?
  • TCP three-way handshake and four-way wave drawing (write ack and SEq values on the spot)?
  • Differences between TCP and UDP
  • What’s the difference between get and Post? When is it used?
  • What is the difference between HTTP2 and HTTP1?
  • websocket
  • What is a TCP stream and what is an HTTP stream
  • How does Babel compile ES6 code into ES5
  • Persistent connection and pipelining of HTTP2
  • TCP or UDP for domain name resolution
  • Domain name divergence and domain name convergence
  • When you Post a file, where does the file go?
  • What’s in the Header of the HTTP Response?

Browser dependent

  • Cross-domain, why does JS restrict cross-domain
  • Front-end security: XSS, CSRF…
  • How does the browser load the page? What is the solution to script blocking? What is the difference between defer and Async?
  • Browser strong caching and negotiated caching
  • What are the browser’s global variables
  • How many resources a browser can download from a domain name at one time
  • Load on demand, judging criteria for elements of different pages
  • Use and distinction of Web storage, cookies, LocalStroge, etc
  • The browser kernel
  • How to implement the caching mechanism? (from 200 cache, to cache, to etag, to)
  • Explain the difference between 200 and 304
  • What is preloading, lazy loading
  • How many states can an XMLHttpRequest instance have?
  • DNS resolution principle, how to find the server after entering the URL
  • How does the server know about you?
  • Browser rendering process
  • Some compatibility problems with IE
  • session
  • Drag and drop to realize
  • Unpick the parts of the URL

engineering

  • Do you know webpack,gulp, Grunt, etc? Contrast.
  • Webpack entry file how to configure, how to split multiple entry.
  • Webpack loader and Plugins are different
  • Specific use of GULP.
  • Understanding front-end engineering, how to implement a file package yourself, such as a JS file with ES5 and ES6 code, how to compile compatible with them

modular

  • Do you know anything about AMD,CMD,CommonJS?
  • Why modularity? How to write code when not in use and when using RequireJs?
  • Tell me what modularity libraries are out there. Do you know the history of modularity?
  • Respectively talk about synchronous and asynchronous modular application scenarios, say the principle of AMD asynchronous modular implementation?
  • How to replace all the require module syntax in the project with the ES6 syntax of import?
  • When using modular loading, what is the order in which modules are loaded, and if not, what do you think the order should be based on what you already know?

The framework

  • What frameworks have you used?
  • How is zepto related to jquery?
  • How to implement the selector in jquery source code, why the $object is designed as an array, what is the purpose of this design
  • How does jquery bind events, how many types and differences are there
  • What is MVVM, MVC, MVP
  • Two-way data binding between Vue and Angular
  • Vue, Communication between Angular components, and routing
  • React and Vue life cycles
  • React and Vue virtual DOM and diff algorithms
  • Vue observer, Watcher, compile
  • What businesses do React and Angular use? Performance versus MVC level
  • What is the difference between a jQuery object and a JS Element
  • How are jQuery objects implemented
  • Aside from the methods that jQuery encapsulates, what else is there to learn and use?
  • What does jQuery’s $(‘ XXX ‘) do
  • Describe how the Bootstrap grid system is implemented

Nodejs

  • Do you know anything about NodeJS
  • What is the relationship between Express and KOA, and what is the difference?
  • What kind of business is NodeJS suited for?
  • How is NodeJS different from PHP and Java
  • What is the difference between Stream and Buffer in Nodejs?
  • How is node asynchrony resolved?
  • How does Node achieve high concurrency?
  • Describe the principle of Nodejs event loop

The data structure

  • Basic data structures :(arrays, queues, linked lists, heaps, binary trees, hash tables, etc.)
  • Eight sorting algorithms, principles, and applicable scenarios and complexity
  • Can you tell me as many ways as possible to implement the Fiboacci sequence?

Performance optimization

  • What is the use of CDN? When do you need it?
  • Page optimization for the browser?
  • How can I optimize the performance of DOM operations
  • What are the SEO solutions for single page apps?
  • Why is the first screen of a single page app slow? What are the solutions?

other

  • Regular expression
  • Advantages and disadvantages of front-end and back-end rendering
  • Four characteristics of database, what is atomicity, table relationships
  • What do you think the front-end architecture should look like?
  • A static resource to go online, there are all kinds of resource dependency, how do you smoothly online
  • If you were asked to implement a front-end template engine, what would you do
  • Do you know about streaming media queries?
  • SEO
  • What’s the difference between mysql and mongoDB?
  • Restful Method description
  • Knowledge of database and operating system
  • Click has 300ms latency on ios, why and how to solve it
  • Mobile adaptation, REM + media query /meta header Settings
  • Gestures and events on mobile;
  • Unicode, UTF8, GBK code understanding, garbled code solution

Open-ended questions frequently asked on three or four sides

  • What books have you read? What are you reading these days?
  • What framework have you used? Have you seen any framework code?
  • Have you studied design patterns?
  • Talk about the observer model! Can you write that down?
  • What is your greatest strength? What is your greatest weakness?
  • What’s the craziest thing you did in college?
  • What output do you have other than blogging?
  • Now your boss gives you a job that you need to complete in a week, but you look at the requirements and estimate that it will take 3 weeks to complete. What should you do?
  • Focus on front-end technology
  • How to plan your career
  • Did you meet any problems during the project? How did it work out?
  • What are you working on these days?
  • Please introduce a study plan in your favorite and best professional field.
  • Please introduce the most impressive project you participated in, why? Also introduce your role and role in the project.

HR side

  • Why did you learn the front end?
  • How do you normally learn the front end? What is the output?
  • What was your best project?
  • What can you learn from the people you admire? Why aren’t you like them?
  • What are some of your coworkers’ problems that you find annoying
  • What was the most stressful thing?
  • Best project you ever worked on with a classmate?
  • What do your friends usually say about you
  • What kind of work environment do you like
  • How to Deal with Overtime
  • Are you dating anyone
  • Intention to city
  • Other offers
  • Why should YOU be admitted?
  • The three things that take the most time in college
  • What do you do on weekends?
  • Future Career Planning

advice

  1. Don’t come across as wanting to start a business. On the blackboard.

  2. If you have never read the source code, it is recommended to start with jQuery, Zepto and so on. Later you can understand the source code ideas and implementation of Vue, React common functions.

  3. When describing the project experience, don’t be too detailed and pick the key points. (Because I kept talking and talking and talking, and finally the interviewer couldn’t get a word in edging the point.)

The last

During the nearly two months of school enrollment, many knowledge points here are extracted from other people’s blogs and interviews. This is the way paved by predecessors for future generations. In fact, the front-end knowledge point is not much, but too miscellaneous, so I did not arrange the special details. The reason WHY I share in this form rather than in an interview is mainly for students who need to “use it” and to tidy up my original notes.

Ah, people around are strong, continue to study. [fuels]