Front-end learning path

level1 :

No experience with the front end, no concept of the front end

level2 :

Simple pages can be restored using JS, CSS and HTML, but libraries are not used yet

level3 :

Use library, such as Vue,jquery to complete the development of common business, such as some activity landing page and background management page

level4:

Can be skilled in the usual business development, but for JS high order, source code, browser principle, data structure and algorithm, design pattern, network, front-end engineering and other things very confused, only know some general nouns. At this point, we need to conduct in-depth research based on personal preference

level5:

I haven’t reached this level yet. It’s probably about architecture, overall control, large project construction, project management, resource allocation and so on. This is a process of transformation, not focusing on one end, but on the control of the whole. (No recognition of this stage, whisper)

Level1 phase

This stage, need to supplement some basic front-end knowledge, can read introductory books

• Head First HTML and CSS (Version 2)

The best primer. Look twice and you’ll get an idea of HTML & CSS

• The Art of JavaScript DOM Programming

The best JS primer that tells you at a glance how to manipulate the DOM with JS (which is the basic skill of browser-side programming) and also instills the most standards-compliant programming philosophy

• JavaScript Advanced Programming (Version 3)

• Online version address
• At least once to understand the basic usage of ES6, you can skip the proxy part

Advanced usage

• Hu Yu’s blog
  • Some explanations about JS are easy to understand
  • In-depth series for JS some difficult to explain, see suddenly enlightened
  • Special series on some hand-written code
  • The underscore series
  • ES6 series
• Functional programming is north
• Wood and poplar front end advanced
  • A blog similar to Hu Yu’s blog is also a collation of some JS difficulties
• (1.6W word) Browser and front-end performance soul of the question, how many can you catch? (on)
• Question of native JS soul, how many can you catch? (on)
• Native JS soul ask (middle), check if you are really familiar with JavaScript?
• (2.4W words, recommended collection)😇 native JS soul (2), sprint 🚀 advanced the last kilometer (with personal growth experience to share)
• Middle and senior front-end factory interview secrets, escort for you gold, silver and four, direct to dacheng (1)
• (Part) Middle and senior front factory interview secrets, winter for your escort, direct factory
• (Part 2) in the advanced front factory interview secrets, winter for your escort, direct factory

Grasp of principle

• JavaScript Advanced Programming (Version 3)
  • Yes, that’s it, you still need to see it again (for the NTH time)
• ES6 Introduction
  • Online version address
  • Do it again
• The JavaScript you Don’t Know series
  • JavaScript You Don’t Know (Volume 1)
    • Content: Scopes and closures and this and object prototypes
    • Why it’s important: Focus on this book
  • JavaScript You Don’t Know (Middle Volume)
    • Content: Type, syntax, asynchrony, and performance
    • The syntax section on types is ok
    • If it’s asynchronous, check out the INTRODUCTION to ES6 Standards.
    • Not recommended for performance
  • JavaScript You Don’t Know (Volume 2)
    • Content: a primer on JavaScript and a look at ES6 and future trends
    • The JavaScript Primer section is a summary of the first two and some syntax
    • Not recommended for ES6
• Deep Understanding of ES6
  • This book can be read after the ES6 Primer
• JavaScript Ninja Secrets
  • Be sure to buy the second edition

Vue advanced

• Analyze the internal operation mechanism of vue.js
  • Understanding of the fundamentals of vUE internals, at a basic level
• Vue. Js,
  • When the author introduces a single part, he will change it from the simplest and abstract demo to the actual framework step by step. Finally, he will compare the demo you wrote with the actual framework to analyze the advantages and disadvantages of both sides.
• Vue. Js technology revealed
  • Source code parsing, medium level
• Vue comprehensive parsing
  • Super detailed – line by line level analysis
  • Download the code, then use the Elegant branch

Principles of browsers

• Working principle and practice of browser
  • Lively and interesting about the principle of the browser, recommended to see
• Inside WebKit Technology
  • Basically about the browser kernel each class function and call the relationship, if you want to go into depth to see, need readers some C++ foundation
• How browsers work: Behind the scenes of the new Web browser
  • For the browser architecture, there is a more detailed description of the browser’s entire parsing and rendering process
• Learn more about modern Web browsers
  • This article is in English, and explains the working principle of the browser in detail
  • Inside look at modern web browser (part 1)
  • Inside look at modern web browser (part 2)
  • Inside look at modern web browser (part 3)
  • Inside look at modern web browser (part 4)
  • Rendering on the Web
  • Page Lifecycle API
• Life of a Pixel
  • This lecture is a learning material for new members of Chrome group at the beginning. It gives new members a high-level look at how Chromium displays to the screen from HTML/CSS/JS

Data structures and algorithms

Steal a picture

I’ve been studyingThe beauty of data structures and algorithmsAbove is the list of books recommended by Teacher Wang Zheng. You can read the corresponding books according to your needs

Design patterns

• JavaScript Design Patterns and Development Practices

• Recommend to see

• Uncle Tom’s blog

  • The In-depth Understanding oF JavaScript series contains a variety of in-depth and design patterns

network

• Illustrated HTTP
  • Meet the basic daily use
  • Entry level
• Diagram of TCP protocol
  • Entry level
• Geek time-perspective HTTP protocol 
  • This course covers HTTP in terms of history, definition, security, and performance
  • You can have a comprehensive understanding of network knowledge
• TCP/IP Details (Volume 1)
  • An in-depth explanation of TCP/IP

Performance optimization

Recommended three books, more comprehensive performance optimization browser optimization can see Google and MDN part, more in-depth, but also more close to the front end

• High Performance Website Construction Guide
• Advanced Guide to Building High Performance Web Sites
• The Definitive Guide to Web Performance
• Google development team performance optimizations
  • For the browser part of the performance optimization, which from the key RAIL indicators for performance optimization analysis, can be made for reference
• MDN performance optimization
  • Similar to Google, performance is optimized from a browser perspective

Front-end engineering

This part is still being studied. Please refer to the front-end engineering section of LienJack here

• Usage and basic concepts
  • Understand loader, Plugin, and some basic common
  • Understand the Babel

Resources: Play with Webpack

• Learn to optimize
  • Volume optimization: Tree shaking, on demand, code cutting
  • Packaging speed optimization: caching, multithreading packaging, optimizing the packaging path

References:

• Those flowers, building Vue from scratch
• Webpack 4 configuration best practices
• The react development environment is optimized in 30 webPack4 steps

3. The principle of

• Webpack build steps
• Detail the process section of Webpack
• Webpack HMR principle analysis
• Implement WebPack hot update HMR from zero
• Dry! 内 容 提 示 webPack plugin (tapable + Webpack process)
• Hand by hand teach you a Webpack Loader

other

• JavaScript regular Expressions mini-book
  • The first three chapters meet the basic daily use
  • To get to the bottom of it you need to look at what’s left
• Regular visualization
• TS Introduction
  • It’s really a primer
• TypeScript Handbook (Chinese Version)
  • After the introductory course, you can move on to this

conclusion

Through the above introduction, you should have a clear route to the different stages, I hope you can continue to gallop in the future career. (To be clear, this is not a front end dissuasion article)

Output planning for subsequent articles

In the recent learning process, I found that there are a lot of overlapping knowledge in network, browser, performance optimization,JS and other parts. Next, I want to finish this classic problem through URL to render, to sort out these knowledge and build the front-end knowledge system. The main body of this sequence will follow the process from entering the URL to loading the page, right? How to improve their front-end knowledge system by a problem! The difference is that it will be more detailed than this article, and will also look at the process from a fundamental, security, performance, and so on. If you like it, you can like it and bookmark it to see the output of this series of articles. Welcome to supervise (urge more). Thank you again for

The resources

• LienJack meow 2 years of front end of the interview of art journey (bytes to beat, YY, tiger tooth, BIGO) | the nuggets technical essay