The knowledge system

Nonsense not to say, spent 2 hours, finally finished, the following is the wide knowledge system, interested partners can refer to, 👏 welcome to check the lack of information, each other orli ~

Total feeling to learn far from enough, I hope you old iron everyone to give a suggestion, complement, or I which place to write wrong, please point out 🤝

This is the knowledge point that I can relate to at present, some did not write in, feel enough to eat a pot, I throw, welcome everyone to add 👏 knowledge point to continue pressure come over, debt more not pressure body ~

Need source file Xmind to my Github download, I did not have their own server, Baidu web disk is too lazy to do, so, download address portal: 👉 wide knowledge system PNG, wide knowledge system Xmind

I feel that there will be a public number to download Xmind, and then change a name into their own, and then make a public number, into the group to get a detailed front-end knowledge system, I want to say, you want to change, comment area to say some: “brother, I borrowed your xmind ha”, after all, I am very hard to sort out ok, say hello ha ~

Programming based

HTML

  • SEO
  • Inline elements/block-level elements
  • Semantic understanding

CSS

  • Range of new features
  • Several ways to clear a float
  • The box model
  • Flex layout
  • Landing the principle
  • The position location
  • Horizontal vertical in several ways
  • Priority weight of the CSS
  • The transition/animation
  • Border: None /border: 0 Difference
  • Display: None /visibility: hidden/opacity: 0 Difference

Javascript

  • Built-in objects

  • typeof

  • instanceof

  • Type conversion

  • new

  • this

  • closure

  • Prototypes and prototype chains

  • Execution context

  • Execution environment and scope

  • Depth copy

    • Deep copy
    • Shallow copy

  • Shake and throttling

    • The principle of master
    • Hands-on practice

  • modular

    • CommonJS
    • AMD

  • inheritance

    • Prototype chain inheritance
    • Inherit from the constructor
    • Combination of inheritance
    • Original type inheritance
    • Parasitic inheritance
    • Parasitic combinatorial inheritance
    • ES6 Class inheritance

  • The call, the bind

    • The principle of master
    • How to implement a bind, call function

  • Let, const, var

  • Promise principle and implementation

  • Principle and implementation of Generator

  • Async/Await

  • Map, Set, FlatMap, and Reduce

  • Proxy

  • 0.1 + 0.2! = = 0.3

Browser Basics

Event mechanism

  • Events are triggered in three phases
  • Register event
  • Event delegate/event agent

Cross domain

  • JSONP

    • Hands-on implementation of a JSONP

  • CORS

    • Is there a difference between GET and POST

  • Nginx

    • Extension load balancing knowledge

  • PostMessage

  • document.domain + iframe

storage

  • Cookie, localStorage, seesionStorage, indexDB
  • service worker

Event Loop

  • Event Loop in Node
  • Event Loop in the browser

Principles of Browser Rendering

  • The difference between Load and DOMContentLoaded

  • HTML Tree / CSS Tree

  • Reflux, redraw

  • How to reduce reflux redraw

    • Which CSS properties will cause reflux redraw

SetTimeout and setInterval

Network based

Five layer protocol

  • The application layer
  • Transport layer
  • The network layer
  • Data link layer
  • The physical layer

The PPP protocol

CSMA/CD protocol

ARP address resolution protocol

ICMP Internet Control packet protocol

UDP User datagram protocol

  • unreliable
  • For a message
  • efficient
  • transport

TCP Transmission control protocol

  • The first format

    • The serial number
    • Confirmation no.
    • Data migration
    • Confirm ACK
    • Synchronous SYN
    • Termination of the FIN
    • window

  • The state machine

    • Establish a link with three handshakes
    • Disconnect the link with four waves

  • ARQ protocol

    • Stop waiting for ARQ
    • Continuous ARQ
    • The cumulative confirmation

  • The sliding window

    • Zero window

  • Congestion control

    • Slow start algorithm
    • Congestion avoidance algorithm
    • The fast retransmission
    • Fast recovery

The difference between UDP and TCP

HTTP

  • Common status code

    • 2xx
    • 3xx
    • 4xx
    • 5xx

  • HTTP header field

  • The difference between POST and GET

HTTPS

  • TLS
  • With hTTP difference

HTTP2.0

  • Binary transmission
  • multiplexing
  • The Header compression
  • The server Push
  • QUIC
  • Differences with HTTP1.0 and HTTP1.1

DNS

  • Can DNS be sent using TCP?

    • The returned response exceeds 512 bytes
    • Meet the condition: zone transfer

  • Regional transport

    • Complete zone transfer
    • Incremental region transfer

  • DNS Resolution Process

    • Mapping exists to the local host. The resolution ends

    • No mapping exists to the local host

      • Local DNS server

        • If the local DNS server has a cache, the resolution is complete

        • The local DNS server has no cache

          • Iterative query
          • Recursive query

  • Principle of DNS resolver

    • Socket library parser

  • DDNS, NAT technology, Intranet penetration

  • CDN

  • DNS load balancing

  • How to prevent DNS hijacking

From the input URL to the page load

  • DHCP Configures host information
  • ARP resolves MAC addresses
  • Domain name Resolution by DNS
  • HTTP Request, TCP three handshakes and four waves
  • Get the HTML document and enter the browser rendering principles process

Software development

Git

  • remote
  • Push, pull,
  • Stash, rebase
  • The merge, cherry
  • Reflog, reset

xshell

Linux command

Nginx configuration

Host Modify configuration

The class library framework

Vue

  • Routing principle

  • State management

    • Vuex principle and source core ideas

  • The core framework

    • VDOM

      • Why do you need a virtual DOM
      • Brief introduction and practice of virtual DOM algorithm

    • MVVM

      • Dirty data detection
      • The data was hijacked
      • Contrast Proxy with Object.defineProperty

    • The life cycle

      • New Vue() instantiates

      • Initialize the init() function

      • Beforecatecreated Data observation

      • Created and beforeMounted, compile

        • parse

          • The commands in the templae template are parsed regularly to generate an abstract AST syntax tree

        • optimise

          • Mark static nodes, pacTH process, diff skip static nodes, and optimize patch performance

        • generate

          • The AST syntax abstracts the process of converting a tree into a render Function () string

      • BeforeMount adds the $EL member to the vue instance object and replaces the Mounted DOM element

      • BeforeUpdated and updated. When data changes, the view is modified through the setter -> watcher -> Update process, and the difference is calculated through the patch mechanism and diff algorithm

      • BeforeDestory The hook function is called before the instance is destroyed.

    • NextTick principle

      • macrotasks

        • setImmediate
        • MessageChannel
        • setTimeout

      • microtasks

        • Promise

    • Principle of diff algorithm

    • Watch the principle

    • Computed is different from methods

React

  • State management

    • Redux

      • Source code interpretation and programming art
      • Why return a new store

    • Hox (Extended Understanding)

      • Source code interpretation and design ideas
      • With hooks, next generation React state management

    • react-redux

      • Principle of the Provider
      • Connect the principle

  • Related to understand

    • What is middleware
    • redux-thunk
    • redux-saga
    • redux-logger

  • The life cycle

    • First apply colours to a drawing
    • Update the stage
    • Unloading phase

  • setState

  • Synthetic events

  • Hooks API principles

    • useEffect
    • UseState, useMemo
    • UseCallback, useRef

  • Class components are different from stateless components

  • ShouldComponentUpdate internals

security

XSS

  • How to attack
  • How to defense
  • CSP

CSRF

  • How to attack

  • How to defense

    • SameSite
    • Token
    • Verify the Referer

Password security

  • Add salt

The data structure

  • The stack

  • The queue

  • The list

  • The tree

  • The heap

algorithm

  • Time complexity

  • An operation

    • The left < <
    • Count right move >>
    • Bitwise operations

The sorting

  • Bubble sort
  • Quick sort
  • Selection sort
  • Merge sort
  • Heap sort

The list

  • Reverse a unidirectional linked list

The tree

  • Binomial tree first order, order, order

  • In order traversal of the predecessor and successor nodes

  • The depth traversal of the tree

    • DFS
    • BFS

Dynamic programming

  • Fibonacci series
  • 0-1 Backpack problem
  • Longest increasing subsequence

Common front-end design patterns

  • The singleton pattern

  • Publish and subscribe

  • The proxy pattern

  • The strategy pattern

  • Decorator pattern

  • Adapter mode

  • Chain of responsibility model

Performance optimization

Network related

  • The DNS resolution beforehand

  • The cache

    • Strong cache
    • Negotiate the cache
    • Select an appropriate caching policy

  • HTTP2.0

  • preload

  • pre-rendered

Render process optimization

  • Lazy loading
  • Lazy to perform

File optimization

  • Image optimization

    • Calculate image size (compression)
    • Image loading optimization

  • Other file optimizations

  • CDN

other

  • Webpack optimization project
  • monitoring

Webpack

  • Different from grunt and gulp

  • According to the need to load

  • Principle of thermal renewal

  • How to configure the single page, multiple pages

  • Common Loader, what problems to solve

  • Common Plugins solve what problems

  • Build process, how to speed up the build

  • How to use WebPack for performance tuning

  • What is the difference between webpack-dev-server and nginx

Soft skills

  • Look at the basics and expand your knowledge

  • Learn some English and read English documents

  • Before doing things, drawing ideas and design

    • Learn to draw flow charts, prototypes, etc
    • Modular, generic components, etc., before doing, first think about it, do a review and design document

  • Make a list of daily Todos and stick to a daily and monthly paper

  • Reflect and organize

  • Contribution to the community

    • Insist on one high-quality article output every month
    • Visit communities and Github to actively raise Issues and Merge requests

  • A healthy body

    • Work out twice a week
    • Weekly basketball

The future extension

  • Micro front-end

  • TS

  • WebGL

  • WebAssembly

  • Multi-terminal (UMI-app/Taro/weex)