Self-inspection list of a [qualified] front-end engineer

Opening remarks

Front-end development is a very special industry, its history is actually not very long, but the complexity of knowledge and the speed of technology iteration are incomparable to other technologies.

winterIn his “heavy learning front end” course mentioned:

Up to now, front-end engineers have become one of the important positions in the research and development system. However, in contrast to this, I found that few or almost no university computer majors are willing to offer front-end courses, and there is no systematic teaching plan. Most of the knowledge of front-end engineers actually comes from scattered learning in practice and work.

This is a very real situation, in fact, many front-end developers are self-taught or even changed careers, front-end entry is simple, learned a fewAPIIt is also very simple to start the project later, but this often becomes the bottleneck to restrict one’s own development.

It is not enough just to stay in the stage of being able to use it. We still need to continue to explore and deepen it. At present, there is no shortage of learning tutorials and technical articles on the market. If you study blindly, you will find that the retention rate of knowledge after reading is very low, and you will find that more and more knowledge is not known, which will cause anxiety.

In fact, in addition to the strong self-drive to persist in learning, you also need a very simple learning method. That is: establish your own knowledge system. It can help you to study more systematically, and at the same time you can always know what is not enough about yourself.

I will sum up all the knowledge I come across in my work and study into my knowledge system, including not only what I have learned, but also many things I haven’t had time to learn.

This is not only my knowledge system, but also my self-checking list that I remind myself all the time.

Next, I will share my self-checking list with you. You can check your own shortcomings and promotions according to the knowledge on the list. I also suggest you build your own knowledge system so that you can quickly locate the points in the knowledge list when working, studying or even interviewing. If you have any points that I have not summarized, please tell me in the comment area.

I. JavaScript Foundation

The front-end engineers have the same depth and breadth.

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.JavaScriptThe specific storage form of variables in memory
  • 5. The built-in objects corresponding to the basic types and the boxing and unpacking operations between them
  • 6. Understand value types and reference types
  • 7.nullAndundefinedThe difference between
  • 8. At least three judgments can be madeJavaScriptThe data types, their advantages and disadvantages, and how to accurately judge the array types
  • 9. Scenarios where implicit type conversion may occur and conversion principles, how should they be avoided or skillfully applied
  • 10. Reasons for decimal precision loss,JavaScriptThe maximum number that can be stored, the maximum safe number,JavaScriptMethods of dealing with large numbers and methods of avoiding precision loss

Prototype and prototype chain

  • 1. Understand the prototype design pattern andJavaScriptPrototype Rule in
  • 2.instanceofThe underlying implementation principle of, manually implement a.instanceof
  • 4. Several ways to realize inheritance and their advantages and disadvantages
  • 5. Name at least one open source project (e.g.NodeIn this paper, a case study of prototype inheritance is presented
  • 6. It can be described thatnewThe detailed process of an object, manually implement a.newOperator
  • 7. Understandinges6 classConstruction and inheritance of the underlying implementation principle

Scope and Closure

  • 1. Understand lexical scope and dynamic scope
  • 2. UnderstandingJavaScriptThe Scope of Action and scope chain
  • 3. UnderstandingJavaScriptThe execution context stack of the can apply stack information to quickly locate the problem
  • 4.thisThe principle of and the values of several different usage scenarios
  • 5. The realization principle and function of closure can be listed in several practical applications of closure in development.
  • 6. Understand the principle of stack overflow and memory leakage and how to prevent them
  • 7. How to handle the asynchronous operation of the loop
  • 8. To understand the practical problems solved by modularization, several modularization schemes can be listed and their principles can be understood.

Implementation mechanism

  • 1. WhytryPut it insidereturn,finallyIt will also carry out and understand its internal mechanism.
  • 2.JavaScriptHow to realize asynchronous programming can be described in detail.EventLoopMechanism
  • 3. What are macro tasks and micro tasks respectively
  • 4. Can quickly analyze a complex asynchronous nested logic and master the analysis method
  • 5. UsePromiseRealize serial
  • 6.NodeWith browserEventLoopDifference
  • 7. How to deal with massive data while ensuring smooth page operation

Grammar and apis

  • 1. UnderstandingECMAScriptAndJavaScriptThe relationship between
  • 2. Skilled usees5es6The syntax specifications provided,
  • 3. MasteryJavaScriptProvided global objects (e.g.DateMath), global functions (e.g.decodeURIisNaN), global attributes (e.g.Infinityundefined)
  • 4. Proficient applicationmapreducefilterEqual-order function to solve the problem
  • 5.setIntervalPoints to note, usesettimeoutRealizationsetInterval
  • 6.JavaScriptRegular Expression ProvidedAPI, you can use regular expressions (mailbox check,URLAnalysis, de-duplication, etc.) to solve common problems
  • 7.JavaScriptException handling methods, unified exception handling scheme

Ii. HTML and CSS

HTML

  • 1. Understand from the perspective of normsHTMLTo use labels from the perspective of classification and semantics
  • 2. Default style of commonly used page labels, self-contained attributes, differences between different browsers, and ways to handle browser compatibility issues
  • 3. Meta Information Class Labels (headtitlemetaThe use purpose and configuration method of
  • 4.HTML5Offline caching principle
  • 5. Can be usedCanvas APISVGSuch as drawing high-performance animation

CSS

  • 1.CSSBox Model, Different Browsers
  • 2.CSSAll selectors and their priorities, usage scenarios, which can be inherited and how to use thematRules
  • 3.CSSWhat are pseudo classes and pseudo elements, their differences and practical applications
  • 4.HTMLThe layout rules for document streams,CSSSeveral positioning rules, positioning reference objects, influence on document flow, how to choose the best positioning method, sprite diagram implementation principle
  • 5. The horizontal and vertical centering scheme can be realized6More than species and compare their advantages and disadvantages
  • 6.BFCThe principle of implementation, the problems that can be solved and how to create themBFC
  • 7. AvailableCSSFunction Reuses Code to Achieve Special Effects
  • 8.PostCSSSassLessThe similarities and differences, as well as the use of configuration, master at least one
  • 9.CSSModular solution, how to configure on-demand loading, how to preventCSSBlocking rendering
  • 10. Skilled useCSSRealize common animation, such as gradient, movement, rotation, scaling, etc.
  • 11.CSSBrowser compatibility writing, understand differentAPICompatibility in Different Browsers
  • 12. Master a complete set of responsive layout scheme

Handwriting

  • 1. Hand-written picture waterfall effect
  • 2. UseCSSDraw geometry (circle, triangle, sector, diamond, etc.)
  • 3. Use pureCSSRealize curvilinear motion (Bezier curve)
  • 4. Realize the common layout (three columns, holy grail, double wings, ceiling), but say a variety of ways and understand their advantages and disadvantages

III. Computer Foundation

Regarding compilation principles, it is not necessary to understand them very deeply, but the most basic principles and concepts must be understood, which is very important for learning a programming language.

Compilation principle

  • 1. Understand what the code is and how the computer converts the code into an object program that can be run.
  • 2. Matching Principle and Performance Optimization of Regular Expressions
  • 3. How toJavaScriptThe code is parsed into an abstract syntax tree (AST)
  • 4.base64The coding principle of
  • 5. Several binary conversion calculation methods, inJavaScriptHow to Represent and Transform in

networking protocol

  • 1. Understand what is an agreement, understandTCP/IPThe composition of the network protocol family and the role of each layer of protocol in the application program
  • 2. The detailed principle of three-way handshake and four waves, why do you want to use this mechanism
  • 3. which agreement are reliable?TCPWhat are the means to ensure reliable delivery
  • 4.DNSThe role of the,DNSThe detailed process of analysis,DNSOptimization principle
  • 5.CDNThe role and principle of
  • 6.HTTPThe specific composition of request message and response message can understand the meaning of common request header, there are several request modes, and what is the difference
  • 7.HTTPThe specific meaning of all the state codes can quickly locate the problem when seeing abnormal state codes.
  • 8.HTTP1.1HTTP2.0The changes brought about
  • 9.HTTPSThe encryption principle of, how to openHTTPS, how to hijackHTTPSRequest
  • 10. UnderstandingWebSocketThe underlying principles of the protocol, andHTTPThe difference between

Design pattern

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

IV. Data Structure and Algorithm

As far as I know, most of the front-ends lack or even contradict this part of knowledge, but if they break through the higher ceiling, this part of knowledge is essential, and I personally experienced it-very useful!

JavaScript coding capability

  • 1. Multiple ways to realize array de-duplication, flattening and comparison of advantages and disadvantages
  • 2. Many ways to realize deep copy and compare advantages and disadvantages
  • 3. Handwritten function Corellization tool function, and understand its application scenarios and advantages
  • 4. Handwriting anti-shake and throttling tool functions, and understanding their internal principles and application scenarios
  • 5. Achieve asleepFunction

The front wheel is manually realized

  • 1. Manual implementationcall、apply、bind
  • 2. Manual compliancePromise/A+normativePromiseManual implementationasync await
  • 3. Hand-write oneEventEmitterImplementation of event publishing and subscription
  • 4. Two schemes for realizing bidirectional binding can be mentioned and can be realized manually.
  • 5. HandwritingJSON.stringifyJSON.parse
  • 6. Handwrite a template engine and explain its principle
  • 7. Handwritingload on demandpull down to refreshPull-up loadingPreloadEqual effect

Data structure

  • 1. Understand the characteristics of common data structures and their advantages and disadvantages in different scenarios
  • 2. UnderstandingarrayStringThe storage principle of, and skilled application of them to solve problems
  • 3. UnderstandingBinary treeStackQueueHash TableThe basic structure and characteristics of the, and can be applied to solve the problem
  • 4. UnderstandingFigureHeapThe basic structure and usage scenario of

algorithm

  • 1. The time complexity and space complexity of an algorithm can be calculated, and the time consumption and memory consumption of business logic codes can be estimated
  • 2. Understand the implementation principles, application scenarios, advantages and disadvantages of at least 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 can be used skillfully in development.
  • 4. Applicableback-track algorithmGreedy algorithmDivide and conquer algorithmDynamic programmingSuch as solving complex problems
  • 5. Algorithms for Front-end Processing of Massive Data

V. Operating Environment

We need to clarify the relationship between language and environment:

ECMAScriptDescribedJavaScriptGrammar and Basic Object Specification of Language

Browser asJavaScriptA kind of running environment of provides: document object model (DOM, describing methods and interfaces for processing web page content, browser object models (BOM), describing methods and interfaces for interacting with browsers

Node, too.JavaScriptA kind of running environment of provides operation for itI/ONetwork, etcAPI

Browser apis

  • 1. Compliance provided by browserW3CStandardDOMOperationAPI, browser differences, compatibility
  • 2. Browser object model provided by browser (BOMAll global provided byAPI, browser differences, compatibility
  • 3. Large quantityDOMOperation, mass data performance optimization (merge operation,DiffrequestAnimationFrame(etc.)
  • 4. Browser mass data storage and operation performance optimization
  • 5.DOMThe specific 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 implementations, and the possibility of handwritten originajaxfetchCan skillfully use the third-party library
  • 7. The browser’s homologous strategy, how to avoid homologous strategy, the similarities and differences of several ways and how to select the type.
  • 8. Several storage mechanisms provided by the browser, their advantages and disadvantages, and the right choice in development.
  • 9. Browser Cross-Tag Communication

Browser principle

  • 1. Used by each browserJavaScriptEngines, their similarities and differences, and how to distinguish them in code
  • 2. Several interactions were made with the server between the request data and the end of the request
  • 3. The browser can be described in detail from the inputURLThe detailed process of showing to the page
  • 4. Browser AnalysisHTMLThe principle of code and its constructionDOMTree flow
  • 5. How does the browser parseCSSRules and apply them toDOMOn the tree
  • 6. How does the browser translate the parsed with styleDOMTree drawing
  • 7. The operation mechanism of the browser, how to configure asynchronous synchronous loading of resources
  • 8. The underlying principles of browser reflow and redrawing, the causes, and how to effectively avoid them
  • 9. Browser garbage collection mechanism, how to avoid memory leaks
  • 10. The caching scheme adopted by the browser, how to select and control the appropriate caching scheme

Node

  • 1. UnderstandingNodeIn the application program, can useNodeSet up front-end operating environment, useNodeOperating files, operating databases, etc
  • 2. Master aNodeDevelopment framework, such asExpress,ExpressAndKoaThe difference between
  • 3. Skilled useNodeProvidedAPISuch asPathHttpChild ProcessAnd understand its implementation principle
  • 4.NodeThe underlying operating principle of the, and the similarities and differences between the browser
  • 5.NodeImplementation Principle of Event-driven and Non-blocking Mechanism

VI. Framework and Class Library

Wheels emerge in endlessly, and understanding in principle is the right way.

TypeScript

  • 1. UnderstandingGenericsInterfaceSuch as object-oriented concepts,TypeScriptRealization of Object-Oriented Concept
  • 2. Understanding and usingTypeScriptThe benefits of masteringTypeScriptBasic grammar
  • 3.TypeScriptPrinciple of rule detection based on
  • 4. Can be inReactVueSuch as frameTypeScriptCarry out development

React

  • 1.ReactAndvueType selection, advantages and disadvantages, and differences in core architecture
  • 2.ReactInsetStateThe implementation mechanism of the, how to effectively manage the state
  • 3.ReactThe underlying implementation mechanism of events based on
  • 4.ReactVirtual ofDOMAndDiffInternal Implementation of Algorithm
  • 5.ReactTheFiberWorking principle, what problem has been solved
  • 6.React RouterAndVue RouterThe implementation principle of the underlying and dynamic loading
  • 7. Skilled applicationReact API, life cycle, etc., can be appliedHOCrender propsHooksEqual-order usage to solve problems
  • 8. Based onReactThe characteristics and principles of the can be manually implemented in a simpleReact

Vue

  • 1. Skilled useVueTheAPILife cycle, hook function
  • 2.MVVMFramework design concept
  • 3.VueTwo-way binding implementation principle,DiffInternal Implementation of Algorithm
  • 4.VueThe event mechanism of
  • 5. FromtemplateConvert to realityDOMThe implementation mechanism of

Multi-terminal development

  • 1. Single page application (SPA) principle and advantages and disadvantages, master a rapid developmentSPAThe plan of
  • 2. UnderstandingViewportemremThe principle and usage of, resolution,pxppidpidpThe difference and practical application of
  • 3. Mobile Page Adaptation Solution and Different Model Adaptation Solution
  • 4. Master oneJavaScriptMobile client development technologies, such asReact NativeCan be builtReact NativeDevelopment environment, skilled development, understandableReact NativeThe operation principle of the, different end adaptation
  • 5. master oneJavaScript PCClient development technologies, such asElectron: buildableElectronDevelopment environment, skilled development, understandableElectronThe principle of operation of
  • 6. Master a small program development framework or native small program development
  • 7. Understand the internal implementation principle of multi-terminal frame, and at least understand the use of one multi-terminal frame.

Data flow management

  • 1. MasteryReactAndVueTraditional cross-component communication schemes compare the similarities and differences of data flow management frameworks
  • 2. Skilled useReduxManage data flow and understand its implementation principle and middleware implementation principle.
  • 3. Skilled useMobxManage data flow and understand its implementation principle. Compared withReduxWhat are the advantages
  • 4. Skilled useVuexManage data flow and understand its implementation principles
  • 5. Similarities and differences, advantages and disadvantages of the above data flow schemes, and technical selection under no circumstances

Practical library

  • 1. Master at least oneUIComponent frame, such asantd design, understand its design concept, the underlying implementation
  • 2. master a chart drawing framework, such asEchart, understand its design concept, the underlying implementation, can realize the chart
  • 3. Master oneGISDevelopment framework, such as Baidu mapAPI
  • 4. master a visual development framework, such asThree.jsD3
  • 5. Tool function library, such aslodashunderscoremoment, etc., to understand the specific implementation principle of the tool class or tool function used

Development and debugging

  • 1. Skillfully use debugging tools provided by various browsers
  • 2. Skillfully use an agent tool to realize request agent and package grabbing, such ascharls
  • 3. Can be usedAndroidIOSSimulator debugging, and master a real machine debugging scheme
  • 4. UnderstandingVueReactThe Use of Framework Debugging Tools

Seven, front-end engineering

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

Project construction

  • 1. UnderstandingnpmyarnDepending on the principle of package management, the difference between the two
  • 2. Can be usednpmRun custom scripts
  • 3. UnderstandingBabelESLintwebpackThe role of such tools in the project
  • 4.ESLintPrinciple of rule detectionESLintConfiguration
  • 5.BabelThe core principle of, you can write a.Babelplug-in
  • 6. You can configure a front-end code compatibility scheme, such asPolyfill
  • 7.WebpackThe compilation principle, construction process, thermal update principle of the,chunkbundleAndmoduleThe difference and application of
  • 8. Can skillfully configure the existingloadersAndpluginsTo solve the problem, you can write it yourself.loadersAndplugins

nginx

  • 1. The characteristics and examples of forward agent and reverse agent
  • 2. Can manually build a simplenginxServers,
  • 3. Proficient application of commonly usednginxBuilt-in variables, master the commonly used writing of matching rules
  • 4. Can be usednginxImplementation of request filtering, configurationgzip, load balancing, etc., and can explain its internal principle

Speed up development

  • 1. master a kind of interface management, interfacemockUse of tools such asyapi
  • 2. Master an efficient log embedding scheme, which can quickly use log query tools to locate online problems
  • 3. UnderstandingTDDAndBDDMode, at least one front-end unit test framework will be used.

version control

  • 1. UnderstandingGitThe core principles, workflow, andSVNThe difference between
  • 2. Skillful use of conventionalGitOrders,git rebasegit stashSuch as advanced command
  • 3. It can be solved quicklyOnline branch rollbackError merging of online branchesAnd other complex issues

Continuous integration

  • 1. UnderstandingCI/CDThe meaning of technology, at least master oneCI/CDUse of tools such asJenkins
  • 2. You can complete a complete set of development processes such as architecture design, technology selection, environment construction, whole process development, deployment and online (includingWebApplications, mobile client applications,PCClient applications, applets,H5Etc.)

VIII. Projects and Operations

Backend skills

  • 1. Understand the back-end development method and its role in the application. At least one back-end language will be used.
  • 2. Master how the data is finally stored on the ground in the database, can understand the table structure design and the association between tables, and will use at least one database.

performance optimization

  • 1. Understand the front-end performance measurement indicators and performance monitoring points, and master a front-end performance monitoring scheme
  • 2. Understand the commonWebAppPerformance optimization scheme
  • 3.SEORanking rules,SEOOptimization scheme, separation of front and rear endsSEO
  • 4.SSRImplementation Scheme, Advantages and Disadvantages, and Performance Optimization
  • 5.WebpackPerformance optimization scheme based on
  • 6.CanvasPerformance optimization scheme
  • 7.ReactVuePerformance Optimization Scheme for Equal Frame Usage

Front end security

  • 1.XSSThe principle, classification, specific cases and how to defend the front end of the attack.
  • 2.CSRFThe principle of attack, specific cases and how to defend the front end
  • 3.HTTPThe Principle and Defense Measures of Hijacking and Page Hijacking

Business related

  • 1. Able to understand the overall business form, business objectives and business framework of the developed project, and can quickly locate online business problems
  • 2. Can understand the overall technical framework of the developed project, can quickly read the development plan according to new requirements, can quickly locate and solve online technical problems according to business alarms, online logs, etc.
  • 3. You can put your ideas or new technologies into practice in your business and try to be irreplaceable in your team.

Nine, learning to improve

vczhThe Great Spirit in the Question of Zhihu [How Can We Reach the Level of Three Great Spirits of Wen Zhao Lun Later? Answer under 】:

In the past ten years or so, I have done three things:

  • 1, not to make money for the purpose of choosing learning content;
  • 2. Measure the effect of learning by whether you can build wheels or not;
  • 3. Stick to writing your own code every day for at least 6 hours a day for the first 10 years, excluding time for study and work.

The above points may be a little difficult, I can’t do the first point, but it is relatively easy to achieve the following grade points.

With regard to blogging, the knowledge that can be explained to others is much more profound than what one has learned and mastered.

  • 1. Own your own technology blog, or have your own column on some blog platforms.
  • 2. Summarize knowledge on a regular basis and continuously improve their knowledge system
  • 3. Try your best to convert your knowledge into real output, not just at the level of written understanding, but more importantly, practical application
  • 4. Insist on exportingOwnThe code, don’t blindly into the company industry

X. Beyond Technology

This part may be more important than the above nine together!

  • 1. Understand Internet personnel terminology:CEOCTOCOOCFOPMQAUIFEDEVDBAOPSWait
  • 2. Understand Internet terminology:B2BB2CC2CO2OWait
  • 3 master the Internet industry communication, question and answer, learning
  • 4. There are certain"PPT"competence
  • 5. Have a certain financial awareness, at least understand the basic financial knowledge of savings, monetary funds, insurance, index funds, stocks, etc.
  • 6. Master the method of keeping healthy under the condition of heavy work and long-term computer radiation, and establish the correct knowledge system of health preservation.

XI. Resource Recommendation

With the knowledge system, it is easy to classify a technical article when reading it, which I have always done.

Facts have proved that when reading articles or books, purposeful and classified reading has a much higher retention rate than “casual reading”.

Every time I read a good article or book, I will collect and classify it into my knowledge system.

The following are some articles, blogs or books and tutorials that I think are not bad. I share them with you. There are not many resources, but they are all excellent ones.

To learn a knowledge, it is best to read the official documents first and put allAPII’ll go through it, and then continue to look at the advanced knowledge summarized by the leaders. It is clear at a glance what is transported and what is dry goods.

Language foundation

Computer basis

Data structure and algorithm

Operating environment

Framework and Class Library

Front-end engineering

Projects and operations

Learning promotion

In addition, I recommend the personal blogs of several bosses that I have been paying attention to:

Beyond technology

In fact, in this era of developed information, what is most needed is resources. It is very important to get the real essence from many resources. The essence of resources is not much. It is strongly recommended to ensure the breadth while ensuring the depth.

Summary

I hope you can reach the following points after reading this article:

  • Find one’s blind spots and lack of knowledge from the list of knowledge.
  • Having the idea of systematizing knowledge, he began to establish his own knowledge system.
  • When reading articles, classify knowledge into knowledge systems and continuously improve their own knowledge systems
  • I got useful resources from the article.

If there are any mistakes in the article, please correct them in the comment area. If this article helps you, please comment and pay attention.

If you have any good knowledge and resource recommendation, please leave a message in the comment area.

Want to read more high-quality articles, download the source files of mind maps in articles, and pay attention to mineGithub blogI will also write the following articles according to the knowledge list. Your star✨, praise and attention are the driving force of my continuous creation!

It is recommended to pay close attention to my WeChat public number “code Secret Garden” and push high-quality articles every day so that we can communicate and grow together.