Hello everyone, I am Han Cao 😈, a grass code ape 🐒. Intermittent warm blood 🔥, continuous sand sculpture 🌟 if you like my article, you can follow ➕ to like it, and grow with me ~ add my wechat: Hancao97, invite you to join the group, learn and communicate together, and become a better engineer ~

The introduction 📚

Hello everyone, two months ago I wrote such an article: “30 days to organize | 2W word long” with an article to clear the front learning route and build a knowledge system 🌿, mainly about my front learning road, as well as in the discussion with the big guy to jointly complete a huge front knowledge system map.

The complete front-end knowledge architecture map is available at the end of the article. Because I don’t have the money to register xMind members, so if you want to go to the watermark version, please add me as your friend. I will send it to you privately

Although I think the integrity of the article is very high, because there are too many knowledge points mentioned in it, it is not suitable for personal learning route, but more suitable for consulting as a complete knowledge graph, so this article was born, the content of this article is as follows:

• Analyze my personal ability and future plan
• According to the analysis results and the complete knowledge graph, I can sort out my future learning route

This learning route will also become my output goal and plan for a long time in the future, so in fact, this series is more like a reality show of front-end engineers, and I hope this series can achieve:

• Practice: planning from my personal point of view, so as to transfer experience to everyone
• Company and growth: I hope you can also have a systematic learning journey, in my company to grow together
• Systematic: The whole learning route should be as systematic as possible to make the knowledge system complete

Now, enjoy the opening book of this series:

From scratch to build their own knowledge system 🌿

If there is no general understanding of the front-end system, I still hope to read: “30 days to organize | 2W word long” with an article to clear the front-end learning route and build a knowledge system 🌿, such as the question, this is the front end of the road to learn, or need to have a certain basic understanding.

Self-analysis 🎵

First of all, when we want to establish our own long-term learning goals, we can first review our own abilities and future plans. For example, give yourself a brief position:

I think my knowledge is ok, but none of it is deeply researched and systematic

My own positioning is the above sentence, I think I know a lot of things, but there is no in-depth research, do not understand, the foundation is not solid, many knowledge points have not formed a system. Therefore, my learning plan for the future at this stage is as follows:

Re-study the front-end knowledge system, consolidate the foundation, and deepen the principle.

I want to get many students in the same stage with me, so I can try to follow my steps in the future and re-learn the front end together. Of course, there will also be many students in a higher stage, want to further research in some direction, just as the so-called people are not the same sorrow and joy, I can only worship the big men here.

The long road to learning 🌊

I also followed the order of the whole learning process in the previous article, from general ability to front-end foundation to engineering and then to computer foundation. I will list the learning process below:

Learn from top to bottom ~

General ability

• shell
• git
• Linux Common commands
• regular

html

• canvas
• Audio and video

In other words, although I have written a lot of articles related to canvas before, they are all in the whole work and I have not studied canvas systematically. I plan to complete this historical debt in this learning process.

css

• The selector
• BFC
• The box model
• CSS animations
• Float/position/layout

js

• Es6 + syntax
• ES Standard (in-depth understanding of JS)
• ES5 implements ES6+ syntactic sugar
• Js modular
• Fetch API && Ajax and request library based on Ajax encapsulation
• Variable ascension
• closure
• The event bubbling
• Prototype chain & Inheritance
• Microtasks & macro tasks & event queues
• This pointer
• Superset: typescript

Modern popular framework Vue

Since I’m currently using Vue, I’m going to take a closer look at react

Principles related:

• Response principle
• Virtual dom
• The diff algorithm
• Template compilation
• Principle of slot.

Vue3 related:

• composition API
• Similarities and differences with VUe2
  • use
  • Realize the principle of

Front-end engineering

• Node
• Packaging tools
  • webpack
  • rollup
  • vite
    • Usage & Principle
• pretreatment
  • babel
  • Modern CSS
    • less
    • sass
• Dependency management
  • npm
  • yarn
• CI/CD
• Design patterns
• eslint
• nginx
• Micro front-end
  • single-spa
  • qiankun
  • qp

The browser

• debugging
• How browsers render
• v8
• webworker
• The garbage collection

network

• Iso-osi seven-layer network model
• Status code
• API specification
  • restful
  • graphql
• agreement
  • http & https & http2
  • grpc
  • tcp
  • udp

Js server development

• nestjs
• mysql
• Production Environment Deployment
  • pm2
  • forever

Plug-in development

• Vscode plug-in
• Chrome plug-ins

I’ve developed a lot of vscode plugins before, check out my previous article

The front edge

• low code
• deno

Always curious deno, learn to learn ~

The data structure

• An array of
• The stack
• The queue
• The list
• The tree
• figure

algorithm

• Time complexity & space complexity
• Common algorithms
  • Tree traversal
  • Sorting algorithm
• Algorithm thought
  • Exhaustive method
  • The recursive method
  • The recursive method
  • Divide and conquer method
  • Greedy algorithm
  • Dynamic programming method
  • Iterative method
  • Branch bound method
  • backtracking
• Classic algorithms
  • kmp

Compilation principle

• The state machine
• Programming languages and their implementation
  • Low-level languages
  • A high-level language
• Compiler structure
  • Front end (analysis)
    • Lexical analysis
    • Syntax analysis
    • Semantic analysis
    • Intermediate code generation
  • Back end (Integrated part)
    • Code optimization
    • Code generation

Compilation principle I have written before, more detailed ~

The operating system

• What is an operating system
• Processes and threads

Computer composition principle

• The basic components of a computer
• Computer instruction & operation
  • Computer instruction
  • Computer operation
• Processor design
  • Exceptions & interrupts
  • Assembly line
• Memory design
  • The structural hierarchy of memory

The road to glory ✨

In this way, my complete systematic learning route in the future is like this:

Conclusion 🔥

That’s the end of this article. Please stay tuned for my next posts

To reveal the plot, I will try to guarantee one article per week according to the above process, of course, next week will be shell ~

When you’re in the dark

Don’t give up looking for the light

Because on the way to find the light

You too can become a light

-to be continued-

You can add me to wechat: HancAO97, invite you to join the group, learn and communicate together, become a better front-end engineer ~