PS: This post is a blog document that uses the summary of this blog post, and I’m going to tackle it in terms of systematic learning skills. Attached: original address

First, JavaScript basics

Front-end engineers eat the guy, depth, breadth of the same can not be bad.

Variables and types

  • 1.JavaScriptSeveral language types are specified
  • 2.JavaScriptWhat is the underlying data structure of the object
  • 3.SymbolType in the actual development of the application, can be manually implemented a simpleSymbol
  • 4.JavaScriptHow variables are stored in memory
  • 5. The built-in objects corresponding to the basic types and the boxing and unboxing operations between them
  • Understand value types and reference types
  • 7.nullandundefinedThe difference between
  • 8. You can say at least three thingsJavaScriptData types, and their advantages and disadvantages, how to accurately determine the array type
  • 9. How can implicit type conversions be avoided or skillfully applied
  • 10. Reasons for the loss of decimal precisionJavaScriptMaximum number that can be stored, maximum security number,JavaScriptMethods to deal with large numbers and avoid precision loss

Prototype and prototype chain

  • 1. Understand prototyping patterns andJavaScriptPrototype rules in
  • 2.instanceofThe underlying implementation principle, manual implementation of ainstanceof
  • 3. Several ways to implement inheritance and their advantages and disadvantages
  • 4. Name at least one open source project (e.gNode) application of prototype inheritance
  • 5. Describe itnewA detailed procedure for an object, manually implementing onenewThe operator
  • 6. Understandes6 classUnderlying implementation principles for construction and inheritance

Scope and closure

  • 1. Understand lexical and dynamic scopes
  • 2. UnderstandJavaScriptThe scope and scope chain of
  • 3. UnderstandJavaScriptStack information can be used to quickly locate problems
  • 4.thisThe principle and the value of several different use scenarios
  • 5. The implementation principle and function of closures, several practical applications of closures in development can be listed
  • 6. Understand the principle of stack overflow and memory leak and how to prevent it
  • 7. How to handle the asynchronous operation of the loop
  • 8. To understand the practical problems that modularity solves, list several modularity solutions and understand their principles

Enforcement mechanism

  • 1. WhytryPut insidereturn.finallyThey can execute and understand the internal mechanics
  • 2.JavaScriptHow to implement asynchronous programming, can be described in detailEventLoopmechanism
  • 3. What are macro tasks and micro tasks respectively
  • 4. Can quickly analyze a complex asynchronous nesting logic, and master the analysis method
  • 5. UsePromiseTo realize the serial
  • 6.NodeWith the browserEventLoopThe difference of
  • 7. How to process massive data while ensuring smooth running of the page

Grammar and API

  • 1. UnderstandECMAScriptandJavaScriptThe relationship between
  • 2. Proficiencyes5,es6Syntax specification provided
  • 3. ProficiencyJavaScriptGlobal objects provided (e.gDate,Math), global functions (e.gdecodeURI,isNaN), global properties (for exampleInfinity,undefined)
  • 4. Proficient in applicationmap,reduce,filterHigher order functions solve problems
  • 5.setIntervalNeed to pay attention to the point of usesettimeoutimplementationsetInterval
  • 6.JavaScriptProvides a regular expressionAPI, regular expressions can be used (mailbox verification,URLResolve common problems
  • 7.JavaScriptUnified exception handling scheme

HTML and CSS

HTML

  • 1. Understand from a normative perspectiveHTML, using tags for classification and semantics
  • 2. Default styles, built-in attributes, differences between different browsers, and ways to deal with browser compatibility problems of common page tags
  • 3. Meta information tags (head,title,meta) and configuration methods
  • 4.HTML5Principles of Offline Cache
  • 5. AvailableCanvas API,SVGSuch as drawing high performance animation

CSS

  • 1.CSSBox models differ in different browsers
  • 2.CSSAll selectors and their priorities, use scenarios, which can be inherited, how to useatThe rules
  • 3.CSSWhat are pseudo classes and pseudo elements, their differences and practical applications
  • 4.HTMLLayout rules for document flows,CSSSeveral positioning rules, positioning reference, impact on document flow, how to choose the best positioning method, Sprite diagram implementation principle
  • 5. The horizontal and vertical middle scheme can be realized6Plant the above and compare their advantages and disadvantages
  • 6.BFCImplementation principle, can solve the problem, how to createBFC
  • 7. Can be usedCSSFunction reuse code to achieve special effects
  • 8.PostCSS,Sass,LessThe similarities and differences, and the use of configuration, at least one
  • 9.CSSModular solution, how to configure load on demand, how to preventCSSBlock rendering
  • 10. Skillful useCSSImplement common animations such as gradients, moves, rotations, zooms, and so on
  • 11.CSSBrowser compatibility writing method, understand the differenceAPICompatibility between different browsers
  • 12. Master a complete responsive layout scheme

handwritten

  • 1. Handwriting waterfall effect
  • 2. UseCSSDraw geometric shapes (circles, triangles, sectors, diamonds, etc.)
  • 3. Use pureCSSRealize curve motion (Bezier curve)
  • 4. Achieve the common layout (three columns, grail, twin wings, suction top), can speak the multi-clock mode and understand its advantages and disadvantages

3. Computer fundamentals

It is not necessary to understand the principles of compilation in depth, but the basic principles and concepts are essential to learning a programming language

Compilation principle

  • 1. Understand what code is, and how does a computer turn it into a executable target program
  • 2. Regular expression matching principle and performance optimization
  • 3. How willJavaScriptCode is understood as an abstract syntax tree (AST)
  • 4.base64Coding principle of
  • 5. Several base conversion calculation methods, inJavaScriptHow to represent and transform

Network protocol

  • 1. Understand what an agreement is, understandTCP/IPThe composition of the network protocol group, the role each layer of protocol plays in the application
  • 2. The principle of three-way handshake and four-way handshake, why use this mechanism
  • 3. Which agreements are reliable?TCPWhat means are available to ensure reliable delivery
  • 4.DNSThe role of,DNSThe detailed process of parsing,DNSoptimization
  • 5.CDNFunction and principle of
  • 6.HTTPCan understand the meaning of common request headers. There are several request modes. What are the differences
  • 7.HTTPAll status codes can be used to quickly locate faults
  • 8.HTTP1.1,HTTP2.0Make a difference
  • 9.HTTPSEncryption principle, how to openHTTPSHow to hijackHTTPSrequest
  • Understand 10.WebSocketThe underlying principles of protocols, andHTTPThe difference between

Design patterns

  • 1. Proficient in using common front-end design patterns to write code, such as singleton pattern, decorator pattern, proxy pattern, etc
  • 2. Similarities and differences between publish and subscribe mode and observer mode and their practical applications
  • 3. Can say several design patterns in the development of practical application, understand the framework of the source code of the application of design patterns

4. Data structure and algorithm

Most of the front ends I know are lacking or even resistant to this part of the knowledge, but this part of the knowledge is essential to breaking through the higher ceiling, and very useful!

JavaScript coding ability

  • 1. Multiple ways to implement array de-weighting, flattening, comparing advantages and disadvantages
  • 2. Multiple ways to achieve deep copy and compare the advantages and disadvantages
  • 3. Handwriting function Currie function, and understand its application scenarios and advantages
  • 4. Hand-write the functions of anti-shake and throttling tools, and understand their internal principles and application scenarios
  • 5. Implement onesleepfunction

Manually implement the front wheels

  • 1. Manual implementationCall, apply, bind
  • 2. Manually implement compliancePromise/A+Specification of thePromiseManual implementationasync await
  • 3. Write one by handEventEmitterImplement event publishing and subscription
  • 4. There are two ways to implement bidirectional binding, which can be implemented manually
  • 5. Write aJSON.stringify,JSON.parse
  • 6. Write a template engine and explain how it works
  • 7. HandwrittenLazy loading,The drop-down refresh,Pull on loading,preloadSuch as the effect

The data structure

  • 1. Understand the characteristics of common data structures and their strengths and weaknesses when used in different scenarios
  • 2. UnderstandAn array of,stringStorage principles and skilled application of them to solve problems
  • 3. UnderstandBinary tree,The stack,The queue,Hash tableThe basic structure and characteristics, and can apply it to solve problems
  • 4. Understandfigure,The heapThe basic construction and usage scenarios of

algorithm

  • 1. Calculate the time and space complexity of an algorithm, and estimate the time and memory consumption of business logic code
  • 2. At least understand the implementation principles, application scenarios, advantages and disadvantages of five sorting algorithms, and can quickly tell the time and space complexity
  • 3. Understand the advantages and disadvantages of recursion and loop, application scenarios, and be able to skillfully apply them in development
  • 4. Can be usedBacktracking algorithm,Greedy algorithm,Divide and conquer algorithm,Dynamic programmingAnd solve complex problems
  • 5. Front-end algorithm scheme for processing massive data

Five, operating environment

We need to clarify the relationship between language and environment:

ECMAScript describes the syntax and basic object specification of the JavaScript language. As a runtime environment for JavaScript, the browser provides: The Document Object Model (DOM) describes the methods and interfaces used to process web content, the Browser Object Model (BOM), and the methods and interfaces used to interact with the browser. Node is also a runtime environment for JavaScript, providing IT with I/O, networking, and other apis

The browser API

  • 1. Match the browserW3CThe standardDOMoperationAPI, browser differences, compatibility
  • 2. Browser object model provided by browsers (BOM) provides all globalAPI, browser differences, compatibility
  • 3. A lot ofDOMOperations, performance optimization of massive data (merge operations,Diff,requestAnimationFrameEtc.)
  • 4. Store massive data for the browser and optimize operation performance
  • 5.DOMSpecific implementation mechanism of event flow, differences between different browsers, event proxy
  • 6. Several ways for the front-end to initiate network requests and their underlying implementation can be handwrittenajax,fetchProficient in using third-party libraries
  • 7. Same-origin policy of browser, how to avoid same-origin policy, similarities and differences of several methods, and how to select the type
  • 8. Several storage mechanisms provided by browsers, advantages and disadvantages, and the right choice in development
  • 9. Browsers communicate across tabs

Principles of browsers

  • 1. Used by each browserJavaScriptEngines and their similarities and differences, how can they be distinguished in code
  • 2. Request data to the end of the request several times with the server interaction
  • 3. Can describe the browser from the input in detailURLDetailed process to page display
  • 4. Browser parsingHTMLHow the code works, and how to build itDOMThe tree’s process
  • 5. How does the browser parseCSSRules and apply them toDOMThe tree
  • 6. How will browsers parse good styled filesDOMTree rendering
  • 7. How to configure asynchronous resource loading based on the operating mechanism of the browser
  • 8. The underlying principle of browser backflow and redraw, the cause and how to effectively avoid it
  • 9. Browser garbage collection mechanism, how to avoid memory leakage
  • 10. How to select and control the cache scheme adopted by the browser

Node

  • 1. UnderstandNodeThe role in the application can be usedNodeBuild front-end operating environment and useNodeManipulate files, manipulate databases, and so on
  • 2. Master oneNodeDevelopment frameworks, such asExpress.ExpressandKoaThe difference between
  • 3. Skillful useNodeTo provide theAPISuch asPath,Http,Child ProcessAnd understand its implementation principle
  • 4.NodeThe underlying operating principle, and browser similarities and differences
  • 5.NodeThe implementation of event-driven, non-blocking mechanisms

Frameworks and class libraries

Wheels keep popping up, but understanding them in principle is king

TypeScript

  • 1. UnderstandThe generic,interfaceAnd other object-oriented concepts,TypeScriptThe realization of object oriented concepts
  • 2. Understand and useTypeScriptThe benefits of masteryTypeScriptBasic grammar
  • 3.TypeScriptThe rule detection principle of
  • 4. Can be inReact,VueAnd so onTypeScriptTo develop

React

  • 1.ReactandVueSelection and advantages and disadvantages, core architecture differences
  • 2.ReactIn thesetStateHow to manage state effectively
  • 3.ReactThe event low-level implementation mechanism
  • 4.ReactThe virtualDOMandDiffInternal implementation of the algorithm
  • 5.ReacttheFiberHow does it work? What problems does it solve
  • 6.React RouterandVue RouterThe underlying implementation principle, dynamic loading implementation principle
  • 7. Proficient in applicationReact API, life cycle, etc., can be appliedHOC,render props,HooksHigh order usage solves the problem
  • Based on 8.ReactThe features and principles can be manually implemented with a simpleReact

Vue

  • 1. Skillful useVuetheAPI, lifecycle, hook function
  • 2.MVVMFramework Design Concept
  • 3.VueImplementation principle of bidirectional binding,DiffInternal implementation of the algorithm
  • 4.VueEvent mechanism of
  • From 5.templateConvert to realityDOMImplementation mechanism of

The development of diverse

  • 1. Single-page apps (SPA) principle and advantages and disadvantages, master a rapid developmentSPAThe scheme
  • 2. UnderstandViewport,em,remPrinciple and usage, resolution,px,ppi,dpi,dpThe difference and practical application
  • 3. Mobile terminal page adaptation solutions and adaptation solutions for different models
  • 4. Master oneJavaScriptMobile client development techniques such asReact Native: can be set upReact NativeDevelopment environment, skilled in development, understandableReact NativeThe operation principle of different end adaptation
  • 5. Master oneJavaScript``PCClient development techniques such asElectron: can be set upElectronDevelopment environment, skilled in development, understandableElectronThe operation principle of
  • 6. Master a small program development framework or native small program development
  • 7. Understand the internal implementation principle of multi-terminal framework, and understand the use of at least one multi-terminal framework

Data Flow management

  • 1. The masterReactandVueThe traditional cross-component communication scheme is compared with the data flow management framework
  • 2. Skillful useReduxManage data flow and understand its implementation principle, middleware implementation principle
  • 3. Skillful useMobxManage data flow and understand how it is implemented compared toReduxWhat are the advantages
  • 4. Skillful useVuexManage data flow and understand how it is implemented
  • 5. Similarities and differences, advantages and disadvantages of the above data flow schemes, and technology selection under different circumstances

Utility library

  • 1. Master at least oneUIComponent frameworks, such asantd designTo understand its design concept and underlying implementation
  • 2. Master a charting framework, such asEchart, understand its design concept, the underlying implementation, can realize their own chart
  • 3. Master oneGISDevelop frameworks such as Baidu MapAPI
  • 4. Master a visual development framework, such asThree.js,D3
  • 5. Tool function library, such aslodash,underscore,momentEtc., to understand the implementation principle of the tool class or tool function

Development and debugging

  • 1. Be proficient in debugging tools provided by various browsers
  • 2. Proficient in using a proxy tool to achieve request proxy and packet capture, such ascharls
  • 3. AvailableAndroid,IOSThe simulator debugging, and master a real machine debugging scheme
  • 4. UnderstandVue,ReactSuch as the use of framework debugging tools

Seven, front-end engineering

Front-end engineering: use engineering methods and tools to improve development and production efficiency and reduce maintenance difficulty

The project build

  • 1. Understandnpm,yarnDependency package management principle, the difference between the two
  • 2. AvailablenpmRun custom scripts
  • 3. UnderstandBabel,ESLint,webpackThe role of tools in the project
  • 4.ESLintRule detection principle, commonly usedESLintconfiguration
  • 5.BabelThe core principle, you can write aBabelThe plug-in
  • 6. A front-end code compatibility scheme can be configured, such asPloyfill
  • 7.WebpackCompilation principle, build process, hot update principle,chunk,bundleandmoduleThe difference and application of
  • 8. Able to skillfully configure existing onesloadersandpluginsTo solve problems, you can write your ownloadersandplugins

nginx

  • 1. Features and examples of forward and reverse proxies
  • 2. Can manually build a simplenginxThe server
  • 3. Familiar with common applicationnginxBuilt-in variables, to master the writing of common matching rules
  • 4. Can be usednginxImplement request filtering and configurationgzip, load balancing, etc., and explain its internal principle

Development speed

  • 1. UnderstandGitThe core principles, workflow, andSVNThe difference between
  • 2. Be proficient in using regularGitThe command,git rebase,git stashWait for the advanced command
  • 3. It can be solved quicklyOnline branch rollback,Error merging of online branchesAnd so on.

Continuous integration

  • 1. UnderstandCI/CDMaster at least one meaning of technologyCI/CDThe use of tools, e.gJenkins
  • 2. Can independently complete a complete set of development processes, such as architecture design, technology selection, environment construction, whole process development, deployment and launching (includingWebApplications, mobile client applications,PCClient applications, applets,H5Etc.)

Viii. Projects and Business

The back-end skills

  • 1. Understand the backend development mode, the role in the application, and use at least one backend language
  • 2. Master how data is eventually stored in the database, understand the structure design of tables, the association between tables, and use at least one database

Performance optimization

  • 1. Understand front-end performance measurement indicators, performance monitoring points, and a front-end performance monitoring scheme
  • 2. Know the common onesWeb,AppPerformance optimization scheme
  • 3.SEORanking rules,SEOOptimized scheme, front and rear end separationSEO
  • 4.SSRImplementation scheme, advantages and disadvantages and performance optimization
  • 5.WebpackPerformance optimization scheme
  • 6.CanvasPerformance optimization scheme
  • 7.React,VueSuch frameworks use performance optimization solutions

The front security

  • 1.XSSAttack principle, classification, specific cases, how to defend the front end
  • 2.CSRFAttack principles, specific cases, and how does the front end defend against attacks
  • 3.HTTPHijacking, page hijacking principle, how to defend the front end

Business related

  • 1. Able to understand the overall business form, business objectives and business architecture of the developed project, and able to quickly locate online business problems
  • 2. Able to understand the overall technical architecture of the developed project, quickly make development planning according to new requirements, quickly locate and solve online technical problems according to business alarms and online logs
  • 3. I can put my own ideas or new technologies into practice in the business and try to be irreplaceable in the team

9. Learn and improve

  • 1. Own your own tech blog, or have your own column on some blogging platform
  • 2. Summarize knowledge regularly and constantly improve my knowledge system
  • 3. Try to translate your knowledge into real output, not just written understanding, but more importantly practical application
  • 4. Keep outputoneselfDon’t blindly dive into the business

X. Beyond technology

This part is probably more important than the above nine combined!

  • 1. Understand the terms of Internet personnel:CEO,CTO,COO,CFO,PM,QA,UI,FE,DEV,DBA,OPSEtc.
  • 2. Understand Internet industry terms:B2B,B2C,C2C,O2OEtc.
  • 3. Master communication, q&A and learning in the Internet industry
  • 4. A certain amountPPTAbility to
  • 5. Have a certain sense of financial management, at least understand the basic knowledge of savings, money funds, insurance, index funds, stocks and other financial management
  • 6. Master the methods to keep healthy under the circumstance of heavy work and long-term computer radiation, and establish a correct regimen knowledge system

conclusion

  • Personal knowledge system learning in this feeling is not deep enough many will not
  • Through this article to find their own learning direction, a knowledge point a knowledge point to eliminate. Oh force to!