Personal record, for reference only, some content may have ambiguity or error forgive, some pictures from the Internet, if any infringement sorry

CSS

Classic layout left fixed right adaptive

Float, position, Flex, table layout, Grid layout

Understanding the CSS box model

Padding +margin (border+padding+margin) (border+padding+margin) (border+padding+margin) (border+padding+margin) Content-box, border-box Settings

BFC

  • Concept: Block-level element formatting context.
  • Principle: BFC is a container, the elements inside and outside the container do not affect each other, so that the floating elements in the BFC participate in the calculation of the width and height of the container, usually used to solve the margin conflict and overlap, or clear float.
  • Create BFC: set float, absolute, fixed position, set display: inline-block, overflow not default

js

Asynchronously loading JS

Js generates the script tag set SRC; Defer loads asynchronously and has the script execute after the document has been parsed; Async Load asynchronously and execute after loading

This is a what

The context in which a function is called

What a closure is

In a function, the function declared in the function uses the variable to form a closure, usually the function return inside the function is removed for external use to manipulate the variable, the role is to create a local variable

DOM event correlation

  • Event level DOM0,DOM2,DOM3. DOM0 is via el.onclick, DOM2 is via addEventListener, and DOM3 adds more events such as mouse and keyboard
  • Event model capture, bubbling, means that the event is captured to the target element and then bubbled to the global. Window-document-html-body-xxx – Target element
  • Custom Event new Event, dispatchEvent()

What are the differences in the way common loops are done

Normal for, while, for-in(index array Keys, Object.getOwnProperty(return the Object’s own property), map, forEach(return), reduce, every, some, fiter

Asynchronous related

callback promise async

Deep copy Shallow copy

  • Shallow copy refers to copying the address of an object, using the same piece of memory, and modifying it will affect each other. Deep copy refers to creating a new piece of content to copy an object with the same properties without affecting each other;
  • Shallow: object.assign (), expand operator, concat(),slice()
  • Deep: JSON parse (JSON. Stringify ())

The prototype

  • Did anything new

Create a new object; Assign the constructor’s scope to the new object (this refers to the new object); Execute the code in the constructor (add attributes to the new object); Returns a new object.

  • Common inheritance (class… Extends)

Call (this), which can only inherit attributes from the parent constructor, but not from the prototype object. Prototype = new parent construct (), shortcoming sibling instance change parent attribute influence each other; Call (this), constructor. Prototype = object.create (prototype); Child. The prototype. The constructor = Child3

Event-loop

Js single thread execution, synchronous code execution in turn, asynchronous code suspends, in asynchronous queue, synchronous code execution after polling asynchronous code

Task Macro macro: setTimeout/setInterval Micro: process.nextTick Promise

Throttling (multiple starts within time, executed at fixed intervals) Anti-shake (executed once triggered for multiple times within time)

Vue

Talk about MVVM understanding

View View layer, Model data, ViewModel layer is the bridge connecting the two. Model data is displayed on the View through data binding. View affects Model through event listening, and responsive View is updated. The reactive core API is object.defineProperty or Proxy. There are three important parts in the overall implementation principle: Compile template, data hijacking Observer, data observation Watcher; The overall process is roughly after the Vue instance is created, Compile processes template instructions, interpolation expressions and non-HTML tags (component tags), etc. Observer intercepts responsive data to create the corresponding Watcher, which is managed by dependency management Dep. Dep is used to collect data from Watcher and notify Watcher when hijacking data changes. Watcher then tells Compile to update the view

The life cycle

Before and after creation, mount, update, and destroy. The father before the son, and the son after the father

Component communication

  • Attribute pass event trigger, custom event bus, vuex

slot

  • Anonymous slots, named slots (slot tag defines name, then used in tamplete tag V-slot: name), scoped slots (slot exposes variables via dynamic properties when a parent component wants to use variables of a child component, tamplete tag V-slot = “xx” receives)

What are dynamic components loaded asynchronously

  • Dynamic components<component :is=" component name "></component>
  • {bar ()=>import(‘./bar.vue’)}

Vue2 supports array methods, how to implement

  • push pop shift unshift , splice, sort, reverse
  • Object.defineproperty has a bug in array support; Const arrayPrototype= object.create ({array.prototype})

Talk about Virtual DOM

A virtual DOM is a JS object that describes the structure of the DOM, indicating what tags such as div, props, and nodes are. Due to the high cost of DOM manipulation by browsers, when data changes, the virtual DOM is first compared to find as few real DOM that need to be updated as possible, so as to achieve the purpose of improving performance.

The depth of the diff class is preferred

Vuex use

mapActions/mapMutations/mapState

key

Use ID instead of index as an identifier for loops to facilitate diff comparisons

Routing principle, guard

  • Window. Onpopstate window. OnHashChange

Optimization involved in Vue

  • Rational use of computed attributes (caching mechanism)
  • Reasonable V-if vs V-show
  • keep-alive
  • Ensure that the key is unique
  • Asynchronous loading of routes and components
  • On-demand introduction of UI libraries
  • Avoid using event proxies for V-for binding events

React

Vue vs. React

The life cycle

Class components and function components

Class components have their own state and lifecycle and are suitable for doing some logical processing. Function components are props. Without state and proof-cycle, they are also called puppet components or stateless components, which are more suitable for pure style presentation

SetState When to synchronize

Timer or native JS binding event

React how to bind inputs in both directions

<input value={this.state.value} onChange={this.handleChange.bind(this)}></input>

High order component

A function that takes a component and returns a new component

How to use react-redux

Browser dependent

Enter the URL

The get and post

  • GET generates a TCP packet; POST generates two TCP packets
  • GET is header and data sent together, and POST is sent in two ways: the first header responds with 100, and then we continue
  • The parameters are the url length limit and the request body
  • GET is actively cached by the browser. Back is harmless. POST is not
  • GET accepts only ASCII characters, while POST has no limits