preface

  • Mid-Autumn festival πŸŽ‘ happy Reunion festival!!
  • When it comes to a pension, I don’t know whether it is lucky or unlucky. I also join in the trend of changing jobs once again. I have experienced both big and small10The baptism of multiple companies. Even liver three days to sort down some frequently asked and the author encountered uncommon questions (but important) questions, involvingHTML, CSS, JavaScript, TypeScript, Vue, React, Webpack, browser, torn code and other issues. I wish you a satisfactory harvestoffer!!!!!!!!!

HTML

HTML5What are the new features?

  1. Drag and drop the release(Drag and drop) API;
  2. Better semantic content tags(header, nav, footer, value, the article, section);
  3. Audio and videoAPI (audio,video);
  4. The canvas(Canvas) API, the vector diagramSVG;
  5. geographic(Geolocation) API;
  6. Local Offline storagelocalStorageData is stored for a long time. Data is not lost after the browser is closed.sessionStorageData is automatically deleted after the browser is closed;
  7. Form control,Calendar, Date, Time, Email, URL, search...;
  8. The new technologyWeb Worker, WebSocket...;
  9. SVG.

rightHTML5Semantic understanding? Name some discarded and newly added labels?

  • semantic

    1. The content of the page is structured, the structure is clearer, and it is easy for the browser and search engine to parse; Displays in a document format even without styling CSS and is easy to read;

    2. Search engine crawlers also rely on HTML tags to determine the context and the weight of each keyword, which is good for SEO.

    3. Make it easier for people reading source code to divide the site into blocks, easy to read maintenance understanding.

  • The new labels
    1. Header, footer, Section, nav, article, hgroup, aside, video, audio.
  • Remove the label
    1. Pure expressive elements:Basefont, BIG, Center, FONT, S, Strike, TT, U;
    2. Elements that have a negative impact on usability:Frame, frameset, noframes.

metaWhat does a label do? Introduce me?

  • HTML meta tags

What’s the difference between an inline element and a block-level element?

  1. The elements in the row are arranged in a straight line, all in the same row, horizontally. Block-level elements occupy one row each, arranged vertically. Block-level elements start and end on a new line followed by a line break.
  2. Block-level elements can contain inline and block-level elements. Inline elements cannot contain block-level elements.
  3. Inline element SettingswidthNull and void,heightInvalid (can be setline-height),Margin, paddingUp and down invalid.

What are progressive enhancement and graceful degradation?

  • Progressive enhancement (progressive enhancement) : Build the page for the lower version browser to ensure the most basic functions, and then improve the effect, interaction and additional functions for the advanced browser to achieve a better user experience.
  • Graceful downgrade (graceful degradation) : Build full functionality from the start and then make it compatible with older browsers.

iframeHow to communicate with the parent window?

  • The iframe child of js communicates with the parent page

iframeWhat happens when you open a link internally?

areaObject.target=_blank|_parent|_self|_top
Copy the code
  • When settingiframeThe inside of theaThe labeltargetProperties for_black“, no matter how many floorsiframeWill open a new page in the outermost page;
  • When settingiframeThe inside of theaThe labeltargetProperties for_parentWill put the currentiframeParent page replacement;
  • When settingiframeThe inside of theaThe labeltargetProperties for_self, the iframe itself is replaced.
  • When settingiframeThe inside of theaThe labeltargetProperties for_top“, no matter how many floorsiframeWill replace the outermost page.

CSS

CSS3What are the new attributes?

  • box-shadow,text-shadow,animate,transfrom,transition 、border-radiusAnd so on.

animate,transfrom ε’Œ transitionWhat’s the difference?

  • The difference between transform, transition and animate in CSS

CSSHow can animation optimize performance?

  • will-changeProperties: Before the browser executes the animation, tell the browser in advance, as required hereGPUSpeed up and improve the display, but remove this property when the animation is over.
  • translate3dforGPUTo speed up.
  • requestAnimationFrame API.

positionWhat are the values of the property? Introduce?

  • Inherit, static, relative, absolute, fixed, sticky;
  • Position (five attributes, and the characteristics of each attribute)

Do not useposition:sticky;How does the property work?

  • Scroll add event, get scroll height, determine the scroll height change corresponding to the element that needs sticky positioningpositionProperties;
  • Scroll to add events through the elementgetBoundingClientRectBy means oftopValue determines the height from the top (for situations where rolling height is not easy to obtain), changing the value corresponding to the element requiring sticky positioningpositionProperties.

How do I make an element invisible? What are the ways?

  • display: none;
  • visibility: hidden;
  • positionRemove but area
  • position indexnegative
  • transform
  • opacity: 0; The filter: Alpha (opacity = 0)
  • height: 0; overflow: hidden;
  • background-color: transparent;

Redraw and reflow? What redraws, what reflows?

  • Return:Render TreeThe process by which the browser rerenders part or all of the document when the size, structure, or properties of some or all of the elements in the. Each page needs to be refluxed at least once, the first time the page loads.
  • Redraw: When a change in the style of an element in a page does not affect its position in the document flow (e.g.5. Color, background-color, visibilityThese attributes only affect the appearance and style of the element, not the layout. The browser will give the element a new style and redraw it, a process called redraw.
  • Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow.

Nine squares, useCSSHow to implement mouse moving to display different borders (without taking up extra grid width)?

  • CSS to achieve nine grids, covering a single grid display border

How to implement a9/16Adaptive areas?

  • Padding - bottom: 56.25%;.

paddingBased on what?

  • Of the parent objectwidth.

Mobile adaptation 1PX problem?

  • useThe transform: scale (0.5).

What is the priority of the selector?

  • ! Important > Inline style > ID selection > (class selection = pseudo-class selection) > (tag selection = pseudo-element selection)

What’s the difference between a pseudo-class and a pseudo-element? For example.

  • What’s the difference between a pseudo-element and a pseudo-class?

Horizontal and vertical centering of elements? Fixed width height and variable width height.

  • Imgge method for centering elements horizontally and vertically

flex ε’Œ gridIntroduction?

  • Flex Layout Tutorial
  • CSS Grid Layout tutorial

What are the ways to achieve the double flying wing layout?

  • Several ways to implement the Holy Cup layout (twin wing layout)

BFC, IFC, GFC, FFCThe difference between?

  • CSS —- Differences between BFC,IFC,GFC, and FFC

If you need to write animation manually, what is the minimum time interval you think, and why?

  • 16.7

JavaScript

What are prototypes and prototype chains?

  • JavaScript prototype and prototype chain and Canvas captcha practices

JavaScriptHow many ways can inheritance be implemented?

  • JS implementation of several ways of inheritance
  • ES6 classSyntax.

JavaScriptWhat are the basic data types of?

  • String, Number, Boolean, Null, Undefined, Symbol, BigInt.

How do I determine the data type? What are the ways?

  • typeof
  • instanceof
  • Special:Constructor...
  • It is best to:Object.prototype.toString.call()

What does the new operation do?

  • Implement the new operation

What is a closure? What does it do?

  • What is a closure
    • Definition: A closure is a function that has access to variables in the scope of another function. In simple terms, you can think of a closure as a special function that reads functions of variables inside other functions.
    • Free variables: not defined in the current scope, defined in the parent scope and above, it will look up layer by layer. A variable in a closure that is not reclaimed is a free variable. The free variables go up where the function is defined.
  • role
    1. You want variables to stay in memory for a long time (usually variables and parameters will be destroyed after the function is executed).
    2. Avoid contamination of global variables.

What is a memory leak? What conditions can cause?

  • Js memory leak scenarios, monitoring and analysis

What about garbage collection?

  • JS from memory space to garbage collection mechanism

Event delegation?

  • Js event delegate or event delegate details

ES6What are the new features?

  • Ruan Yifeng ES6 introduction tutorial

What are the ways of modularity?

CommonJS ε’Œ ES6What is the difference between modularity?

  • Differences between ES6 and CommonJS modularity

Array which methods change the parent group?

  • Push, POP, Shift, unshift, splice, reverse, sort.

for, for... in,for... of,forEach, mapThe difference between?

  • The return value:for, for... in,for... ofNo return value,forEachreturnundefined.mapReturns the post-operation array.
  • Open:for... in,forEach,mapSkip the space,for,for... ofDon’t skip the empty space.
  • Break, continue:for,for... of,for... inYou can interrupt,forEach,mapSyntax errors; The code cannot execute.

What’s the difference between a deep copy and a shallow copy? How to implement a deep copy?

  • BCopy theAWhen the modifiedAWhen watchingBIs it going to change, ifBIt changes, which means it’s a shallow copy; If ‘B’ doesn’t change, it’s a deep copy.

.,concat ε’Œ sliceDeep copy or shallow copy?

  • .Deep copy for base data types, shallow copy for reference types.
  • concat ε’Œ sliceIt is a shallow copy.

To introducePromise ？

  • Promise object

PromiseYou can always executethenMethods?

  • can
const promise = new Promise(function(resolve, reject) {
    // ... some code
});
promise.then().then()
Copy the code

ProxyThe role of? What are the methods?

  • Proxy

The difference and realization of anti-shake and throttling?

  • Image stabilization
  • The throttle

virtualDomMust be more real than realDomFast? When is it not?

  • Not necessarily; With just one element or fewer elements, the latter is still the fastest.
  • virtualDom VSrealDom
Virtual Dom Real Dom
Update faster Update slowly
You cannot update HTML directly You can update the HTML directly
Dom manipulation is very convenient Dom manipulation is very expensive
No waste of memory Serious memory waste

The official account opens the browser,JavaScriptHow to close the browser and return to the public account window?

  • WeixinJSBridge.call('closeWindow')

TypeScript

TypeScriptWhat are the basic data types?

  • Raw data type:Boolean, number, string, null, undefined, Symbol;
  • Non-primitive data types: array,Tuple, enum, never, void, or any, union type, function type.

What is the difference between interface and type?

  1. interfaceBeing able to declare merging,typeCan’t;
  2. typeYou can declare primitive types, union types, aliases for tuples,interfaceNo;
  3. typeCan be used in the statementtypeofGet type instances;
  4. typeSupports type mapping,interfaceIs not supported.

void ε’Œ neverThe difference between?

  • voidType means there is no type. Usually used when a method returns no value. Method with no return value will getundefinedBut we need to define it asvoidType, notundefinedType).
  • neverTypes represent the types of values that never exist, includingnull ε’Œ undefined. (neverA type is a function expression that has no return value, or the return value type of an arrow function expression, or a variable that can never be true.

How do I declare a function that can take a string and return a string and a number and return a number?

  • Declare two functions of the same name, generics

What does generics do? What generics are commonly used?

  • Action: Parameterized type
  • TS Some utility generics use and implementation

Vue

whyVueProgressive framework?

  • Incremental meaning: not doing more than you’re supposed to.
  • VueThere is no strongAdvocacy (Each framework inevitably has its own characteristics that make certain demands on users)You can implement one or two components on top of a larger systemjQueryUse; Can also use it whole family bucket development, whenAngularUse; You can also use its view with an entire lower layer of your own design. You can use it in the underlying data logicOO (object oriented)And the whole idea of design patterns, it could be functional, it could be anything, it’s just a lightweight view, it’s just doing what it should do, it’s not doing what it shouldn’t do, that’s all.

To introduceVueLife cycle?

  • Talk about the VUE lifecycle – read this

diffHow does the algorithm work?

  • Analyze the diff algorithm of vue2.0

How to render and unload parent components?

  • The sequence in which Vue parent components render, update, and destroy hooks

Bidirectional binding principle?

  • Vue bidirectional binding

Vue3.0What are the changes?

  • Vue 3.0 features Overview

Why replacedefineProperty δΈΊ Proxy? What are the advantages and disadvantages of both?

  • Why Vue3 uses Proxy instead of defineProperty

v-if ε’Œ v-forPriority?

  • 2.0 v - forabovev-if.3.0 v - the ifabovev-for.

watch ε’Œ computedWhat’s the difference?

  • What are the differences between computed and Watch in Vue

nextTickThe principle and application scenarios of?

  • Vue.nextTick principle and use

Vue3 ηš„ compositionWhat problem was solved?

  • data,methodThe problem of the same name;
  • The problem with invisible dependencies: large projects can have dozens of pagesmixinModules are mixed in, and then eachmixinThere are alsodataParameters andmethodCall each other.

React

introduceReactLife cycle (16 years ago, 16.3, 16.4)?

  • The React Lifecycle (including react16)

React ε’Œ VueThe difference between?

  • Vue vs. React

Component ε’Œ PureComponentThe difference between?

  • PureComponentthroughprops ε’Œ stateShallow contrast to achieveshouldComponentUpdate().
  • Note: inPureComponentIn, if the complex data structure is included, the interface will not be updated due to the shallow contrast when the deep data changes.

What is the difference between a controlled component and an uncontrolled component?

The controlled components Uncontrolled component
1. Not maintaining your status 1. Stay in the zone
2. Data is controlled by the parent component 2. Data is controlled by DOM
3. Get the current value through props and notify the change through a callback 3. Refs is used to obtain the current value

What’s the difference between stateless and stateful?

Stateful component Stateless component
1. Store information about component state changes in memory 1. Calculate the internal status of components
2. Right to change status 2. No right to change the status
3. Include past, present and possible future state changes 3. Does not include the past, present and future possible state changes
4. Accept notifications of stateless component state change requirements, and then send props to them. 4. Receive props from the stateful component and treat it as a callback function.

What is the case for component value transfer and how should it be handled?

  • What values are passed by the React component

React ε’Œ Vue ηš„ diffAlgorithm comparison?

  • Vue and React diff algorithm comparison

setStateIs it synchronous or asynchronous?

  • React setState Update state When is it synchronous and when is it asynchronous?

knowFiber? Introduce me?

  • React Fiber works

Is the route implemented differently from conventional routes?

  • The implementation principle of the React – Router
  • Conventional routingVS Reactrouting
The theme Conventional routing The React routing
Participating pages Each view corresponds to a new file Only a single HTML page is involved
The URL to change The HTTP request is sent to the server and the corresponding HTML page is received Change only the history properties
experience The user actually switches between different pages in each view Users think they are switching between different pages

HooksWhat are the advantages and disadvantages?

  • Talk about the pros and cons of React hooks

useMemo ε’Œ useCallbackThe difference between?

  • The same:

    1. useMemo ε’Œ useCallbackThe first parameter is the callback and the second parameter is the data to depend on
    2. Only when the data changes will the result be recalculated and cached.

  • Different:

    1. useMemoThe result is thatreturnThe returned value is used to cache the calculation result value, for example, the status to be calculated
    2. useCallbackThe calculation result is a function, mainly used for caching functions, application scenarios such as: need to cache functions, because functional components any one at a timestateThe entire component is refreshed, and some functions are not necessarily refreshed, and should be cached to improve performance and reduce resource waste.

  • Don’t abuse it to waste performance,reactReduction in therenderThis improves performance, so this only applies to caching to reduce the use of repeated renderings and caching results.

useEffectWhat does it do?

  • UseEffect Usage Guide

HooksWhat are the problems?

  • React Hooks

HooksHow do I determine if a child component needs to be updated?

  • useMemoPut the data in the dependency (the second parameter) that changes and requires updating the child component.

I have my own encapsulationHooks? Introduce me?

  • useWinSize:window sizeChange returns the changed width and height.

Have you done any performance optimizations? What are the ways?

  • React Performance Optimization

Webpack

WebpackWhat are the configuration items?

  • Webpack configuration documentation

WebpackBuild process?

  • How does Webpack packaging work? You will understand after reading this article!

Hot update principle?

  • Webpack hot update principle

dev-serverSolving the cross-domain principle?

  • How does Webpack Proxy work? Why can cross domain be solved?

BabelThe principle of?

  • In-depth understanding of Babel and its use

loader ε’Œ pluginThe role of? Have you ever done it yourself?

  • Webpack loader and the plugin

How to improveWebpackBuild speed?

  1. CommonsChunkPluginTo extract common code
  2. externalsConfigure to extract common libraries
  3. usingDllPlugin ε’Œ DllReferencePluginThe precompiled resource module passesDllPluginTo the ones we reference but never modifynpmPackage to precompile, and then passDllReferencePluginLoad the precompiled module in.
  4. HappypackAchieve multithreaded accelerated compilation.
  5. webpack-uglify-parallel(multi-core parallel compression to improve compression speed) improveuglifyPluginOf compression speed.
  6. Tree-shaking ε’Œ Scope HoistingTo weed out excess code.

The browser

Cookies, session ε’Œ tokenThe difference between?

  • The real difference between cookie, session and Token

Address bar inputURLWhat happened?

  • Understand once and for all: What happens when the browser goes from URL input to page presentation?

Browser caching strategy?

  • Browser caching mechanism

What are the browser caching methods?

  • What are the browser caches? What are the common caches

DNSDomain name resolution process?

  • Explain the whole process of DNS domain name resolution

httpThree handshakes and four waves?

  • Three-way handshake
  • Four times to wave

HTTP1.0, HTTP1.1 ε’Œ HTTP2.0The difference between?

  • The differences between HTTP1.0, HTTP1.1, and HTTP2.0

HTTPS encryption process?

  • HTTPS encryption process

What is an event loop?

  • What is an Event Loop

How do I distinguish between micro tasks and macro tasks?

  • Host environment (the environment in which javascript runs flawlessly, common examples are the browser andNode) are called macro tasks, and those provided by language standards are called microtasks.
  • commonmacrotaskThere are:
    • <script>(Synchronous code execution)
    • setTimeout
    • setInterval
    • setImmediate (NodeEnvironment)
    • requestAnimationFrame
    • I/O
    • UI rendering
  • Common Microtasks are:
    • process.nextTick (NodeEnvironment)
    • Promise.then()
    • Object.observe(Largely abandoned)
    • MutationObserver

What is cross-domain? What are the solutions?

  • byThe same origin policy of the browserIt’s the browserJavaScriptSecurity restrictions imposed.URLIf a protocol, domain name, or port is different, it is regarded as non-same-origin, and cross-domain is generated.
  • Nine Cross-domain Implementation Principles (Full version)

ajax,fetch ε’Œ axiosThe difference between?

  • The difference between Ajax and Axios and FETCH

What are the ways to communicate between pages?

  • Interviewer: What do you know about front-end cross-page communication?

WebSocket ε’Œ httpThe difference between?

  • Connections and differences between Http, Socket, and WebSocket

XSS ε’Œ CSRFDifference and prevention?

  • CSRF and XSS distinguish and prevent

Handwritten code

Promise

  • PromiseA + implementation

Currie,

  • Currie,

Publish and subscribe model

  • Publish and subscribe model

LRUElimination algorithm

  • LRU elimination algorithm

Binary tree summation

  • Finger Offer II 049. Sum of path numbers from root node to leaf node

Multi-dimensional array flat decrement

  • Array Flat method
  • Object array filtering/de-weighting

other

What are the ways of front-end performance optimization?

  • Front-end performance optimization

How to realize burying point? Keep data from being lost?

  • Front-end monitoring and front-end buried point design

base64What are the advantages and disadvantages of?

  • Pros and cons of Base64

gitCommon commands?merge ε’Œ rebaseThe difference between?

  • [git] Merge rebase

git submoduleYou know what?

  • Use of git submodules

How to select a framework or plug-in (e.gThe React, Vue.My Moment. Js, Day. Js)?

What are your future career plans?

What project did you do best? Let me introduce you.

What are you looking for in your next job?

The interview oliver

  • ES6 Tutorial
  • This is enough for you to get the offer from the big factory
  • “Interview questions” 20+Vue interview questions
  • Interview questions about Webpack
  • 50 React Interview questions you must Know
  • React Hooks
  • Git Common Operations Guide

Past wonderful

  • Author’s Homepage
  • Basic specifications for front-end development
  • Build from 0 Vite + Vue3 + element-plus + VUE-Router + ESLint + husky + Lint-staged
  • “Front-end advanced” JavaScript handwriting methods/use tips self-check
  • An introduction to JavaScript design patterns and creative patterns
  • Public account open small program best solution (Vue)
  • Axios you probably don’t know how to use

“Likes, favorites and comments”

❀️ follow + like + comment + share ❀️, lingering fragrance in hand, thank πŸ™ everyone.