What do you need to learn for self-study front end? Five-year-old front end appeared to say

In fact, ten years ago, front-end development in the industry was not worthy of being an engineer, because many people felt that the work of front-end development was very simple. Just write a style, and the designer did the job by the way. Therefore, the front-end development was in the minds of programmers. The status is very low .

However, with the development of the mobile Internet, with the combination of front-end and mobile, the concept of big front-end came into being. At the same time, the front-end is facing more and more complicated tasks, especially today when the front-end and the back-end are separated. To deal with the development of the interface, it also involves the processing of complex business logic, and the requirements for front-end development are getting higher and higher.

By the way, I want to rectify the name of the front-end engineer: The workload of the front-end engineer is larger than that of the back-end. It not only has to deal with the front-end interface and design, as well as the product manager’s pickiness, but also with the back-end engineer to determine the interactive data Format and interface. What's more important is the adaptation of the front-end browser interfaces. The big front-end leads to adapting to the work of the mobile terminal. Compared with the stable, complete and long life cycle of the back-end ecology, the front-end framework and technology life cycle is shorter. , This means that front-end engineers have to continuously learn and update their knowledge, which puts more and more pressure on front-end engineers.

Therefore, being a front-end is very powerful.

So what level of front-end learning can go out to find a job? I share a front-end learning roadmap as follows:

I have three stages here:

The first stage: basic learning stage

In fact, there are a lot of things to learn on the front-end. We need to learn the development language of the front-end, which is used to process business logic: JavaScript, the markup language HTML for drawing the interface, and CSS for beautifying the interface. This is what must be learned in the first basic stage.

I think the most important learning in the first stage is: JavaScript and CSS. I am not saying that HTML is not important, it is very important, but compared to JS and CSS, HTML is actually relatively simple as a markup language. JS can help you deal with complex business logic. CSS can improve the performance of interface beautification. In short, JS and CSS will be of great help in the processing of performance optimization in the later stage. Therefore, the basic stage of learning these two things must be paid attention to. .

The second stage: Intermediate actual combat stage

If you master this stage of learning, you can actually go out to find a job.

The knowledge that needs to be mastered is a basic improvement course, HTML5+CSS3 and ES6+TypeScript, these need to be understood, TS is the trend, here H5, CSS3, ES6, TS is the upgraded version of the basic learning stage, these require you to learn at the same time, If you can reach the level of job hunting, you must also use one of the frameworks: Vue, React, Angular, one of these three mainstream frameworks.

In fact, the traditional JQuery and DOM-related knowledge points also need to be understood, although they are not used much now.

Of course, relatively speaking, these three frameworks, Vue, are developed by the Chinese, and the documents are in Chinese. The Chinese learn faster, and the entry level is relatively low. Therefore, many people will learn Vue, and there are many companies that use Vue front-end framework in China.

If you pass the previous basic learning stage, you can use JS, CSS, H5 proficiently, and at the same time master a development framework, then you will reach the level where you can find a job in the front end.

Of course, this is only to reach the level of job hunting. If you want to have a better development in the front-end, you have to go deeper.

The third stage: advanced advanced stage

To further develop the front-end, you must learn the principles of the internal operation of the browser, master some commonly used design patterns, and achieve front-end engineering, that is: code modularization, functional componentization, packaging, construction, and release automation ,Process-oriented.

It is very important in terms of performance optimization, and the basic knowledge of website performance optimization, SEO and server-side must also be mastered. Including code maintainability, ease of use of components, hierarchical semantic templates, and browser hierarchical support.

These advanced functions must be mastered, so that the knowledge is mastered, so that you can write a high-efficiency, high-performance page, which is the pursuit of our front-end development engineers.

Do you think there is a lot of knowledge involved in these three stages? Is it complicated? These three stages are not only a learning path for front-end engineers, but also an evolutionary and advanced process. Our front-end learning will become higher and higher in the future, and the required skills and requirements will become more and more complex. The most important thing for front-end learning is to systematically learn according to the roadmap.

It’s not as painful as we learned ten years ago. It’s very convenient for people to learn now, because there are a lot of learning materials on the Internet, and there are many good systematic courses that can help you learn and master practical skills more efficiently, and you can avoid a lot of detours. .

In terms of experience as a front-end engineer, the front-end learning has become more and more important due to the rising status of the front-end in the entire software development project, and the situation is becoming more and more complex. Therefore, you need to master the front-end Knowledge is also very complicated. If you do not have the ability to systematically learn front-end knowledge, I suggest that you must find a suitable course to systematically study, because this is very important for learning efficiency. It’s too easy to learn by yourself. The front-end update iterations are fast, and efficient and time-saving learning methods are king.

The golden three and the silver four are coming soon. I don’t know if everyone is already preparing for the spring recruitment interview. How are the preparations? How is the interview question review?

If you feel that the basic knowledge is still relatively weak, it is better to brush this set of "Front-end School Recruitment Interview Questions Compilation and Analysis", I wish you well.

HTML

What are the three layers of the browser page, what are they, and what are their functions?
The advantages and disadvantages of HTML5?
What does Doctype do? How to distinguish between strict mode and promiscuous mode? What do they mean?
What are the new features and elements of HTML5?
In which browsers have the webpages you made tested, and what are the cores of these browsers?
There is a very important thing at the beginning of every HTML file, Doctype. Do you know what this is for?
Tell me about your knowledge of HTML5? (What is it, why)
Understanding and knowledge of WEB standards and W3C?
…

CSS

Explain the CSS box model?
Could you please talk about the types of CSS selectors, and give some examples to illustrate their usage?
Could you please tell me what is special about CSS? (Priority, calculation of special values)
Common browser compatibility problems and solutions?
List the values of the display and explain what they do?
How to center a div, how to center a floating element?
Please list several methods (at least two) to clear floats?
Comparison of block, inline and inlinke-block details?
What is graceful degradation and progressive enhancement?
Talk about the problems caused by floating elements and your solutions
What are your performance optimization methods?
…

JavaScript

The various positions of js, such as clientHeight, scrollHeight, offsetHeight, and the difference between scrollTop, offsetTop, clientTop?
Implementation of js drag and drop function
Asynchronously load js method
js anti-shake and throttling
Talk about closures
Talk about your understanding of scope chain
JavaScript prototype, prototype chain? What are the characteristics?
Please explain what is event delegation/event delegation
How does Javascript implement inheritance?
Function execution changes this
Babel compilation principle
Function Currying
Talk about the creation and inheritance of classes
Talk about the event flow in the front end
How to make the event bubble first and then capture
Talk about lazy loading and preloading of pictures
What does the new operator of js do
Change the pointer to the function of this pointer inside the function (the difference between bind, apply, call)
Ajax solves the browser cache problem
…

Due to the limited space of the article, only part of the interview questions can be displayed. If necessary, click here to receive the questions for free + resolve the PDF .

View

The role of the key value in Vue
Why must data in a Vue component be a function?
What is the State characteristic of vuex?
Introduce Vue's responsive system
The difference between computed and watch
Introduce the life cycle of Vue
Why component data must be a function
How do the components communicate
How to use custom components in Vue.cli? Have you encountered any problems?
How does Vue implement on-demand loading and webpack settings
Briefly describe which scenarios each cycle is suitable for
What is scss? What are the installation and use steps in Vue.cli? What are the major features?
Talk about your understanding of Vue.js template compilation?
Several ways of Vue routing jump
How does Vue implement on-demand loading and webpack settings?
Vue's routing implementation: hash mode and history mode
What is the difference between Vue, Angular and React?
Hook function for Vue routing
What are the calculated properties of Vue?
…

React

Introduce react
React single data flow
React life cycle functions and the life cycle of react components
Principles, differences, highlights, and functions of react and Vue
ReactJs component communication
Have you learned about React's virtual DOM? How does it compare?
React is used in the project, why should we choose react, and what are the benefits of react?
How to get the real dom
Reasons for choosing react
React's life cycle function
Process after setState
Do you know the react high-end components?
React jsx, functional programming
What do react components use to determine whether to refresh?
How to configure React-Router
Dynamically loaded modules for routing
What is Redux middleware? It accepts several parameters
How redux request middleware handles concurrency

Browser

Cross-tab communication
Browser architecture
Event Loop under the browser
The process from input url to display
Redraw and reflow
storage
Web Worker
V8 garbage collection mechanism
Memory leak
Reflow and repaint optimization
How to reduce redraw and reflow?
A page is entered from the URL to the page is loaded and displayed, what happened in the process?
Summary of the difference between localStorage and sessionStorage and cookie
…

Algorithm and data structure

Binary tree sequence traversal
The characteristics of B tree, the difference between B tree and B+ tree
Tail recursion
How to write a factorial of a large number? What's wrong with the recursive method?
How to turn a multi-dimensional array into a one-dimensional array
Talk about the principle of bubbling quick discharge
The principle of Heap sorting method? the complexity?
Several common sorting algorithms, handwritten
Array de-duplication, write as many methods as possible
If there is a large array, all of them are integers, how to find the largest top 10 numbers

Due to the limited space of the article, only part of the interview questions can be displayed. If necessary, click here to receive the questions for free + resolve the PDF .

Mastering the above can basically be rampant, how to be overbearing, that is the knowledge of the use and principles of the framework and packaging tools~~~Follow-up detailed explanation

Reveal a few interview tips

(1) The thief who writes resumes**, I can use various frameworks on resumes, and what webpack/vue family bucket, react family bucket, rollup/node have, and the basics will be cold when asked. ~~~~ The bottom layer of the framework is still the js foundation, the foundation is not solid, and the interview is two lines of tears.

(2) The technical points of the resume should be written about what you are good at, interviewing a girl, 2 years of work experience, writing a deep understanding of the principle of vue, a question how can nextTick get the updated DOM, very simple, I don’t know~ of ~~course Points will be deducted. I don’t know a lot about the basics, cool~~ ~

(3) Be honest in the interview, don't be impetuous, don't know some knowledge and no problem. A spiritual guy, I asked about the principle of rem responsive layout, how js judged it, I don’t know~~~_~ ~~, I asked me if I can skip this question, but I haven’t seen it much recently. Me: What are you looking at recently? jsxh: Front-end engineering stuff? Me: I think it's very impetuous~~ ~, what is the difference between common.js/es6 modularization scheme? How do multiple project files share a nodeModules working range? How to monitor git commits? What problems does ts solve? Cool~~~~ Engineering is a big problem, there are many points from development, compilation, deployment, and online

(4) The project said it is in place, handwriting a throttle ~~emmm, handwriting a deep copy~~ emmm, handwriting a promise.all, ~~emmmm

(5) I met a few good candidates. Although some knowledge points and handwriting ability are poor, the people are very reliable and nice. I have seen me who was a junior development engineer before, and I will give the opportunity to pass, not the technology will bring people through. It's stuck.

To sum up, the basics and the ability to write code are very important, _{very important,} very important~, no matter how good the framework is, the bottom layer is also based on the basics, including various knowledge points and design patterns. As for what questions the framework asks and how to prepare, we will break it down next time.