Preface
The main content of the front-end school recruitment interview questions include html, css, JavaScript, ES6, computer network, browser, engineering, modularization, Node.js, framework, data structure, performance optimization, projects, etc. (The information in this article is suitable for 0-2 years)
Contains the questions asked in interviews with first-line Internet companies such as Tencent, ByteDance, Xiaomi, Ali, Didi, Meituan, 58, Pinduoduo, 360, Sina, Sohu, and covers junior and intermediate front-end technology points.
The main part listed in the article is the outline part, and the details can be obtained by yourself at the end of the article!
HTML
- HTML5 new features, semantics
- Standard mode and weird mode of the browser
- The difference between xhtml and html
- Benefits of using data-
- meta tag
- canvas
- HTML obsolete tags
- IE6 bug, and some positioning writing
- css js placement location and reason
- What is progressive rendering
- html template language
- The principle of meta viewport
CSS
- Box model, box-sizing
- CSS3 new features, pseudo-classes, pseudo-elements, anchor pseudo-classes
- CSS realizes the way to hide the page
- How to achieve horizontal centering and vertical centering.
- Talk about position, display
- Please explain the function of *{box-sizing:border-box;} and explain the benefits of using it
- Problems and solutions caused by floating elements? Absolute positioning and relative positioning, the display value of the element after floating
- The difference between link and @import introducing css
- Explain the flexbox of css3 and the applicable scenarios
- The difference between inline and inline-block
- Which are block-level elements, those are row-level elements, and what are the characteristics of each
- grid layout
- The role of table layout
- What are the ways to achieve a two-column layout?
- css dpi
- Do you know the difference between attribute and property
- css layout problem? How does css achieve three-column layout? What if it is adaptive in the middle?
- How to realize the flow layout, how to realize the responsive layout
- Mobile layout plan
- Achieve three-column layout (Holy Grail layout, double flying wing layout, flex layout)
- Principle of Clearing Float
- What are the disadvantages of overflow:hidden?
- Is the padding percentage relative to the parent's width or its own width
- css3 animation, the difference between transition and animation, animation properties, acceleration, and gravity simulation
- How to rotate pictures in CSS 3 (transform: rotate)
- sass less
- How much do you know about mobile development? (Responsive design, Zepto; @media, viewport, JavaScript regular expression judgment platform.)
- What is bfc and how to create bfc? What problem does it solve?
- Length units in CSS (px, pt, rem, em, ex, vw, vh, vh, vmin, vmax)
- What is the priority of CSS selectors?
- Sprite
- svg
- What is the principle of media query?
- Is CSS loading asynchronous? Where is the performance?
- What are the browser compatibility issues frequently encountered? Common hack techniques
- Margin merge
- Explain the difference between double colon and single colon in "::before" and ":after"
JS
- What are the basic types of js? What are the reference types? The difference between null and undefined.
- How to determine whether a variable is of type Array? How to determine whether a variable is of type Number? (More than one kind)
- Is Object a reference type? What is the difference between reference types and basic types? Which one is on the heap and which one is on the stack?
- JS common dom operation api
- Explain event bubbling and event capture
- Event delegation (handwritten example), event bubbling and capture, how to stop bubbling? How to organize default events?
- Understanding of closures? When is a closure formed? How to implement closures? Pros and cons of closures?
- What are the usage scenarios for this? What is the difference between this in C and Java? How to change the value of this?
- call，apply，bind
- Display prototype and implicit prototype, hand-drawn prototype chain, what is the prototype chain? Why is there a prototype chain
- Multiple ways to create objects
- Multiple ways to implement inheritance and advantages and disadvantages
- What does new an object specifically do
- Handwritten Ajax, XMLHttpRequest
- Variable promotion
- Illustrate a typical use case of an anonymous function
- Point out the difference between JS host objects and native objects. Why is it not good practice to extend JS built-in objects? What are the built-in objects and built-in functions?
- The difference between attribute and property
- The difference between document load and document DOMContentLoaded
- === 和 == , [] === [], undefined === undefined,[] == [], undefined == undefined
- What values can typeof get
- What is "use strict", the advantages and disadvantages
- What is the scope of the function? How many scopes does js have?
- How JS implements overloading and polymorphism
- Commonly used array api, string api
- Native event binding (cross-browser), the difference between dom0 and dom2?
- Given an element to get its coordinates relative to the view window
- How to implement lazy loading of pictures scrolling
- What are the methods of js string type? How to use regular expression functions?
- Deep copy
- Write a general event listener function
- Web-side cookie setting and acquisition
- The order of execution of setTimeout and promise
- What are the JavaScript event flow models?
- navigator object, location and history
- js garbage collection mechanism
- Causes and scenarios of memory leaks
- Several ways of binding DOM events
- The difference between target and currentTarget in DOM events
- The difference between typeof and instanceof, the principle of instanceof
- Comparison of js animation and css3 animation
- JavaScript countdown (setTimeout)
- js handles exceptions
- js design patterns know those
- The realization of the carousel diagram, as well as the development of the carousel diagram component, the process of carousel 10,000 pictures
- The working principle and mechanism of websocket.
- What is the event when my finger taps on the touchable screen?
- What is function currying? And what are the applications of JS API to the realization of function currying? (Some understanding of function currying, as well as the application of * functional programming, finally talked about the bind function and array reduce method in JS using function currying.)
- JS code debugging
frame
- Which frameworks have you used?
- What is the relationship between zepto and jquery, is there any connection?
- How does the jquery source code implement the selector, why the object obtained by $ is designed to be in the form of an array, and what is the purpose of this design
- How jquery binds events, there are several types and differences
- What is MVVM, MVC, MVP
- The principle of two-way data binding between Vue and Angular
- Vue, Angular communication between components and routing principles
- The life cycle of react and vue
- Virtual dom and diff algorithm of react and vue
- vue的observer，watcher，compile
- What kind of business are react and angular used for? The difference between performance and MVC level
- What is the difference between jQuery object and JS Element
- How the jQuery object is implemented
- In addition to jQuery encapsulates some methods, what else is worth learning and using?
- What does jQuery's $('xxx') do
- Introduce how bootstrap's grid system is implemented
Browser related
- Cross-domain, why JS will 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 negotiation caching
- What are the browser's global variables
- How many resources can the browser download from a domain name at the same time
- On-demand loading, element judgment criteria for different pages
- Use and difference of web storage, cookies, localstroge, etc.
- Browser kernel
- How to implement the caching mechanism? (From 200 cache, to cache to etag and then to)
- Talk about the understanding and difference between 200 and 304
- What is preloading and lazy loading
- How many states does an XMLHttpRequest instance have?
- The principle of dns resolution, how to find the server after entering the URL
- How does the server know about you?
- Browser rendering process
- Some compatibility issues of ie
- session
- Drag and drop
- Disassemble each part of the url
##Interview Questions The complete document is drawn to the end of the article for free.
ES6
- Talk about promise
- Do you know all the ES6 features? If you encounter something and don't know whether it is ES6 or ES5, how do you distinguish it
- What is the difference between es6 inheritance and es5 inheritance
- promise package ajax
- Advantages of let const
- What is an es6 generator, and the principle of async/await implementation
- The difference between ES6 and node's commonjs modular specification
- Arrow function, and its this
computer network
- What are the important parts of the HTTP protocol header, HTTP status code
- How to do network url input to output?
- Why should performance optimization reduce the number of HTTP visits?
- The process and principle of Http request
- How many handshake and wave of https (yes https)? The principle of https.
- How many times does http wave and shake hands? The Chinese name of TLS? At which network layer is TLS?
- The characteristics of TCP connection, how to ensure the safety and reliability of TCP connection?
- Why does the TCP connection need a three-way handshake, can't it twice?
- Why does tcp shake hands three times and wave four times?
- Three-way handshake and four-time wave of tcp to draw a picture (write the values of ack and seq on the spot)?
- The difference between tcp and udp
- 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
- HTTP2 persistent connection and pipeline
- Is the domain name resolution tcp or udp
- Domain divergence and domain convergence
- Where is the file placed when you post a file?
- What's in the HTTP Response Header?
Engineering
- Do you know anything about webpack, gulp, grunt, etc.? Comparison.
- How to configure webpack entry files and how to split multiple entries.
- The difference between webpack's loader and plugins
- The specific use of gulp.
- Understanding of front-end engineering, how to implement a file package yourself, such as a JS file that is written in ES5 and ES6 at the same time, how to compile and be compatible with them
Modular
- Do you know AMD, CMD, CommonJS?
- Why modularize? How to write code when not in use and when using RequireJs?
- Tell me about the modular libraries. Have you ever understood the history of modular development?
- Let’s talk about the application scenarios of synchronous and asynchronous modularization, respectively, and talk about the principle of AMD’s asynchronous modularization.
- How to change all the require module syntax in the project to import ES6 syntax?
- When using modular loading, what is the order of module loading? If you don’t know, what do you think the order should be based on existing knowledge?
Nodejs
- Do you know about nodejs
- What is the relationship between Express and koa, and what is the difference?
- What kind of business is nodejs suitable for?
- What is the difference between nodejs, php and java
- What is the difference between Stream and Buffer in Nodejs?
- How is the asynchronous problem of node solved?
- How does node achieve high concurrency?
- Talk about the principle of Nodejs event loop
data structure
- Basic data structure: (array, queue, linked list, heap, binary tree, hash table, etc.)
- 8 sorting algorithms, principles, applicable scenarios and complexity
- Tell me the more the better the realization of the Fibonacci sequence?
Performance optimization
- What is the usage of cdn? When is it used?
- Browser page optimization?
- How to optimize the performance of DOM operations
- What are the SEO solutions for single-page applications?
- The first screen of a single-page application is slow. What is the reason? What is the solution?
other
- Regular expression
- Advantages and disadvantages of front-end rendering and back-end rendering
- Four characteristics of the database, what is atomicity, the relationship between tables
- What do you think the front-end system should look like?
- A static resource needs to be online, and there are various resource dependencies in it, how do you go online smoothly
- If you were to implement a front-end template engine, what would you do
- Do you know streaming media queries?
- SEO
- What is the difference between mysql and mongoDB?
- restful method explanation
- Database knowledge, operating system knowledge
- Click has a 300ms delay on ios, the reason and how to solve it
- Mobile terminal adaptation, rem+media query/meta header setting
- Gestures and events on the mobile terminal;
- Understanding of unicode, utf8, gbk encoding, the solution of garbled
Open questions that are frequently asked on three and four sides
- What books have you read? What book are you reading recently?
- What framework did you use? Have you seen any framework code?
- Have you learned design patterns?
- Talk about the observer mode! Can you write it down?
- What is your greatest strength? What is your biggest shortcoming?
- What was the craziest thing you did in college?
- What output do you have besides blogging?
- Now your leader has given you a job and asked you to complete it in one week, but after you read the requirements, it is estimated that it will take 3 weeks to complete. What should you do?
- Front-end technology that I usually pay attention to
- How to plan your career
- Did you encounter any problems during the project? How to solve it?
- What are you researching recently?
- Please introduce a study plan that you are most passionate about and good at, and introduced.
- Please introduce the most impressive project you participated in, why? And introduce your role and role in the project.
HR face
- Why do you want to learn the front-end?
- How do you usually learn the front-end? What is the output?
- What do you think is your best project?
- What can you learn from the people you admire? Why are you not like them?
- What kind of problems a colleague has will make you unacceptable
- What is the most stressful thing?
- The best project you have ever done with your classmates?
- What do your friends say about you
- What kind of working atmosphere do you like
- How to treat overtime
- Is there any object
- Intent city
- Other offers
- Why should you be admitted?
- Three things that spend the most time in college
- What do you do this weekend?
- Future career plan
Suggest
-
Don't show that you want to start a business during the interview. Knock on the blackboard.
-
If you have never read the source code, it is recommended to start with the source code such as jQuery and zepto. Later, you can understand the source code ideas and implementation of common functions of Vue and React.
-
When describing the project experience, you don’t need to be too detailed, just pick the key points.