preface

Front end questions include HTML, CSS, JS, ES6, Vue, life cycle correlation, Vuex, React, and React Native, wechat small program, IOS/ Android browser adaptation problem sorting, Pc compatibility problems, the principle of Webpack, project problems and so on. (The data in this paper are suitable for 0-2 years)

Analysis of Baidu, Ali, Tencent big factory interview was asked questions, but also covers the intermediate front-end technology points. The article listed is the main outline part, the details can be obtained by themselves!

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)

CSS

  • Browser box model?
  • The way to clear the float
  • 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?
  • CSS visibility property collapse[kə’læps] property
  • What does margin merge mean?
  • Have you used media query for mobile layout?
  • Responsive pages?

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
  • How many 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?

##ES6

  • The following lists common ES6 features:
  • What does the arrow function need to notice?
  • Let, const, var
  • Extension: what are the bugs with variables defined in var mode?
  • Set data structure
  • Extension: an array de-weight method
  • The arrow function this points to.
  • Handwriting ES6 class inheritance.
  • Generator functions:
  • What is async/await and how does it work?
  • 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 the following code execution results, and write your understanding of the idea:
  • Object.is () differs from the original comparison operator ===, ==?
  • Introduce the difference between Set, Map, WeakSet and WeakMap?

Vue

  • What is the MVVM?
  • The difference between MVVM and MVC? How does it differ from other frameworks (JQuery)? Which scenarios fit?
  • What are the advantages of Vue?
  • What are the two cores of vue.js?
  • Value transfer between Vue components
  • How to use custom components in VUE-CLI, and what are the problems encountered?
  • How does Vue implement load on demand with Webpack setup
  • Similarities and differences between V-show and V-IF directives
  • How do I make CSS work only in the current component
  • What is the function of?
  • Talk about keep-alive implementation principles and caching strategies
  • Steps to introduce components in Vue
  • Vue common modifiers?

14. What are the calculated attributes of Vue?

  • What are the advantages and disadvantages of single-page applications like Vue?
  • What does the instruction V-EL do?
  • Steps for using plug-ins in Vue
  • Active-class is a property of which component?
  • Name at least 4 vUE directives and their usage.

## Lifecycle

  • What is the VUE lifecycle?
  • What is the role of the VUE lifecycle?
  • How many phases are there in the VUE life cycle?
  • Name three common Vue hook functions that declare cycles
  • In what cycle is DOM rendering completed?

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?

Wechat applets

  • Brief description of wechat small program related file types?
  • How do you encapsulate the data request of wechat applets?
  • What are the methods for passing parameters?
  • What methods have you used to improve the application speed of wechat mini program?
  • Which is better, small program or native App?
  • Brief introduction to the principle of wechat applets?
  • Analyze the advantages and disadvantages of wechat applets
  • Micro channel small program and H5 difference?
  • How to solve the small program asynchronous request problem?
  • How is bidirectional binding of applets different from vUE
  • What are the differences between WXSS and CSS for applets?
  • How to determine the uniqueness of the user associated with the small program wechat public number?

IOS/ Android browser adaptation troubleshooting

  • Progressive enhancement and graceful degradation:
  • Delayed response of IOS mobile click event 300ms
  • In some cases, listening for click events on non-clickable elements (such as label, span) is not triggered by IOS
  • Input, Select, A and other elements under the Samsung phone mask layer can be clicked and focus.
  • Some devices blur when viewing the background image on android
  • When the input box is at the bottom, the input box is blocked after clicking the soft keyboard
  • The reansition screen is deleted
  • CSS3 animation page flash white, animation stuck
  • Prevents automatic font resizing while rotating the screen
  • The Input placeholder will have text that’s a little bit too high
  • Round-trip caching issues:
  • Calc compatibility processing
  • Add a CSS3 attribute to disable the associated element event listener
  • Prevents web pages from zooming in and out on your phone
  • Drag the scroll bar up and down, slow
  • About Image loading
  • About Zepto
  • Html5 calls android or IOS dial-up functions

Written programming questions:

  • JS array order sort, random sort chapter
  • Write a multiplication table
  • Implements a function to determine whether the input is a palindrome string.
  • Your understanding of redrawing and rearranging?
  • To achieve the effect, click the icon inside the container, the border of the icon becomes border 1px solid red, click the blank to reset
  • Simple implementation of bidirectional data binding MVVM
  • Extend a trim method for string to remove all whitespace from the string
  • How do I detect if a variable in JS is of type string? Write the function implementation
  • Explain the output of the following code
  • What is the output of the following code run?
  • 14.{}=={} and []==[]
  • [‘ 1 ‘, ‘2’, ‘3’]. Map (parseInt) and why?

Due to the limitation of space, some screenshots of the content are shownPlease click here to collect it directly

advice

  • Don’t come across as wanting to start a business. On the blackboard.
  • 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.
  • When describing the project experience, don’t be too detailed and pick the key points.