Behind will continue to write things in this, learn things too shallow, slowly record

  1. HTTP stateless

    • HTTP does not maintain this connection for the information needed for the next connection

  2. Flatten the data into a tree

    • Through the data
    • Determines whether the current element is a child
    • Inserted into the parent for childrenchildrenIn the array
    • recursive

  3. Transposition of elements

    • Suppose: A and B are reversed
    • Save the parent node
    • Gets the next node of each node and saves it
    • usinginsertBeforeInsert in front of each next node

  4. Range of new features

    • Property selector
    • border-radius
    • rgba,opacity
    • transform
    • animation(animation)
    • shadow

  5. Mobile adaptation

    • rem+ Media query
    • Media queries modify the font size (stepwise) or throughJavaScriptDynamic controlThe root elementThe font size
    • Rem according toThe root elementFont size responds

  6. The difference between animation, Transition, Transform, and Translate in the CSS

    • animation: animation (similar to an animation with set playback time and times)
    • transitionTransition: (hoverAnd so on), which need to be triggered manually and are one-time (repeat need to be triggered again, e.g. mouse move to element, etc.).
    • transformDeformation of:
    • translateMove:

  7. The difference between animation and Transition:

    • Trigger:animationAutomatic execution without triggering;transitionNeed to be triggered manually
    • Repeat:animationReproducible;transitionRepeat occurrence needs to be triggered again
    • Status:animationThere are multiple states;transitionThere are only start and end states
    • Suspended:animationCan be suspended;transitionDo not pause
    • animationIt’s like a kind of animation, andtransitionIt’s more of a transitional display

  8. Pseudo elements and pseudo classes

    • Formal: pseudo-classes:, pseudo elements: :
    • pseudo-classesSpecial effects for adding elements,Pseudo elementsUse to add elements outside of the document flow
    • pseudo-classesOften used to transition some elements,Pseudo elementsCommon operations include adding ICONS and clearing floats

  9. Load, DOMContentLoaded

    • DOMContentLoadedThe DOM is fully loaded and parsed
    • load: Triggered after all resources and dependencies are loaded, except for DOM parsing

  10. Vue life cycle

    • beforeCreate: Instance creation phase (method, computed, Watch, Method, data not available)
    • created: After the instance is created, methods and data are available and asynchronous requests can be made
    • beforeMounte: Page mount phase, when the page has not been rendered or mounted
    • mounted: After the page is mounted, you can perform operations on elements
    • beforeUpdate: Before the page is updated, you can remind it here
    • updated: The page is updated and can be reminded here
    • beforeDestroy: You can clear the timer here before the instance is destroyed
    • destroyed: The instance is destroyed. No operation can be performed
    • Keep alive: –
      • deactivated: The component is cached
      • activated: Component activation

  11. Routing guard

    • Global guard
      • Global front guard:beforeEachIs triggered before entering the route. It is used to check the login status
      • Global parse guard:beforeResolveIn thebeforeRouteEnterTrigger after completion
      • Global rear-guard:afterEachIs triggered after the route is entered
    • Route guard (configured separately for a routing operation)
      • beforeEnter
    • Component guard
      • Before entering the route:beforeRouteEnter
      • This route multiplexing:beforeRouteUpdate
      • Leave current route:beforeRouteLeave

  12. Some differences between Vue2 and Vue3

    • The life cycle
      • vue3:beforeCreate+created -> setup
      • The other cycles have just changed their name and function
    • Response:
      • vue2:Object.defineProperty+ Observer mode
      • vue3:Proxy
    • DiffAlgorithm to optimize

  13. Vue principle

    • willtemplateConvert to abstract syntax treeAST tree
    • Optimization: TraversalASTTree, marks static nodes, next render skips contrast
    • willAST treeConvert to executable code

  14. Diff algorithm flow

    • Peer comparison, not the same will be directly removed, render, same and then compare child nodes
    • Check whether child nodes exist and remove or add them if they do not
    • If there are children, the children are deeply recursively compared
    • Vue2theDiff: Two-end comparison

  15. Virtual DOM

    • JavaScriptUsing objects will be realDOMabstract
    • DiffAlgorithm to achieve twoVirtual DOMTree difference comparison
    • PatchThe algorithm takes twoVirtual DOMThe differences between trees apply to the real DOM

  16. Vue2 responsive

    • Three important roles:Observer(addgetter,setter),Dep(for dependency collection and update distribution),Watcher(Observer object. After data changes, the observer receives the distributed update and performs the update operation)
    • DepOnly when the current variable is bound to the page, the normal distribution of the update, if the variable is useless, no need to distribute the update, re-render
    • Main steps:
      1. throughObserverAdd to listening datagetterandsetter
      2. usinggetterFor dependency collection, storedDep, the use ofsetterthroughDep.notify()Distribute updates
      3. WatcherAfter receiving the distributed update, perform a response operation

  17. Three types of observer objects

    • Render:render watcher
    • Calculated attributes:computed watcher
    • Listener:user watcher

  18. Ajax set the Header

    • xhr.setRequestHeader("key",value)

  19. Ajax requests carry cookies

    • The server configures the response headerAccess-Control-Allow-Origions(cross domain)
    • The server configures the response headerAccess-Control-Allow-Credentials
    • Configure the request headerWithCredentials:true

  20. Other cross-domain methods

    • jsonp: the use of<script>Tags are not cross-domain, the back end returns function names and parameters, and the front end executes them (disadvantage: onlyGETMethods)
    • cors: such as 19
    • The node middleware,nginxAnti-proxy: a layer of server forwarding is connected and the server does not have the same origin policy
    • iframe,postMessage,websocket

  21. The difference between event.target and event.currentTarget

    • event.targetIs the element that triggers the event (such as the event delegate, where clicking on an element bubbles up to trigger the event)
    • event.currentTargetIs the element that binds the event (if I bind it toulUp, no matter how it’s triggered, it’s pointing, rightul)

  22. How do I add a click event

    • addEventListener
    • In the tagonclick
    • JavaScriptGet the tag,div.onclick = function(){}

  23. V – if and v – show

    • v-showIn fact throughdisplay:noneThe element is created regardless of whether the condition is correct (there is rendering overhead). The tag can also be obtained by hiding
    • v-ifIn fact, it controls explicit and implicit by loading and unloading DOM elements on elements, and does not create elements if conditions are not met, andv-ifThe life cycle (with switching overhead) is triggered and the label cannot be obtained after hiding

  24. CSS hides an element

    • display:noneDoes not take the initial position and trigger backflow
    • visibility:hiddenWill occupy the original position, trigger redraw, and is inherited, child elements can be cancelledhidden
    • rgbaTransparent (inheritance, child elements can be changed),opacity:0Transparency (parent + child as a whole)
    • Move elements out of the page
    • Let the element go to the lowest level (z-index:-1)

  25. The difference between arrays and linked lists

    • Arrays are in the stack, lists are in the heap
    • Arrays are contiguous in memory, linked lists are discontiguous in memory
    • Arrays allocate memory statically, linked lists allocate memory dynamically
    • Same lookup performance
    • High performance of linked list insertion and deletion (data is not stored continuously, so insertion and deletion will not cause a large number of element shifts)
    • High read performance of array (continuous data storage space, fast location)

  26. Disadvantages of various inheritance methods:

    • Prototype chain inheritance:
      1. The instance cannot pass parameters to the constructor
      2. All instances share the instance attributes of the parent class
    • Constructor inheritance:
      1. Only attributes of the parent constructor can be inherited
      2. Unable to reuse
      3. Each new instance has a copy of the superclass constructor
    • Combination of inheritance
      1. The parent constructor is called twice, generating two instances and consuming memory

  27. The garbage collection

    • Mark clear
      1. Basic data types are stored on the stack
      2. Pointers to data types are stored on the stack, and content is stored in the heap
      3. GCAutomatically executed to mark variables that are not referenced asGarbage data, there are referenced variables marked asActive dataAnd thenGarbage dataCleared to release
    • Reference counting

  28. Difference between Promise and async/await

    • Promise: ES6,async/await:ES7
    • Error catch
      1. PromiseError bycatchcapture
      2. async/awaitErrors can pass throughthenandtry-catchcapture

  29. asynchronous

    • ES5:setTimeout,setInterval, callback function, publish subscribe, event listener
    • ES6:Promise
    • ES7:async/await

  30. Event delegation

    • Utilize the event bubbling mechanism
    • Location target element:event.target,event.srcElement
    • Event compatibility:event || window.event

  31. Differences between ES5 classes and ES6 classes

    • classIn must strict mode, there is no variable promotion, and internal properties and methods are not enumerable
    • ES5Can be used as a function, andclassNo (must usenewCall)
    • classthroughsuper,extendsTo inherit,ES5Inheritance through constructors or stereotype chains
    • Inheritance:
      1. classIs to add superclass attributes and methods tothisAnd then subclasses modify the pointer
      2. ES5Create a subclass object instance and then add a superclass method tothison

  32. Use ES5 to implement ES6 class

    • Solve the problem from the following aspects:
      1. Do not call directlynewThe operator
      2. Enumerations of internal methods and properties are not allowed
      3. To create aclass
      4. Implement inheritance on the prototype chain and inheritance of static methods
      5. Using a superclass instance objectthis
      6. A subclass inherits

  33. Promise output problem

    • Look at the following code
        new Promise((resolve,reject) = >{{// This is the synchronization code
            resolve(); // Execute the code immediately
            // This is also synchronous code, execute immediately
        }
    }).then(() = >{{// This is asynchronous code}})Copy the code

  34. What is the fastest way to sort a fundamentally ordered array

    • Heap sort

  35. Flex

    • Properties:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
    • Important:flex:0 1 auto
      1. flex-grow: Scale (enlarge)
        1. A value of0(Default): Neither zoom in nor zoom out
        2. A value of1: Enlarge filling space (divide the remaining space equally, if there is 2, then allocate the remaining space in the ratio of 2:1)
      2. flex-shrink: Shrinking (shrinking) ratio
        1. A value of0: don’t reduce
        2. A value of1(Default): Shrinks if space is insufficient
      3. flex-basis: Default size
        1. A value ofauto(Default): Display as original size

  36. Why is TCP reliable

    • Stop waiting protocol
      1. After sending a piece of data, set a timer. If the timer does not receive a confirmation message from the other end before the timer is triggered, send the data again
    • Continuous ARQ
      1. Data is sent in the form of cumulative confirmation. Multiple data are sent in groups, and the other end pairsThe last group to arrive in orderPerform validation (e.g[1, 2, 3, 4, 5], only sent,2,3,5 [1], will confirm receipt of 3, resend 4 and 5)

  37. ref

    • On a child component: is a reference to a child component instance that can be passedrefTo call the child component’s methods
    • inDOMThat’s rightDOMElement reference