One, foreword
“Success is a result, not a destination” —- Hello everyone, I’m Lee Kaixin 😉~
What I share today is a summary list of my current front-end learning journey.
It can be said that this article is a self-review after reading so many nuggets excellent articles, as well as JS Elevation three, and share it with you for review. If there is wrong knowledge summary in the article, please point out the big guys, little sister will modestly correct 🙏]
To begin 🏃 ♀ ️
Second, the CSS
1. Document declaration! DOCTYPE
👉 Click here for knowledge
2. Semantic HTML tags
👉 Click here for knowledge
3. Introduction of the CSS
👉 Click here for knowledge
4. Classify HTML tags
👉 Click here for knowledge
5. CSS selector
👉 Click here for knowledge
6. CSS box model
👉 Click here for knowledge
7. Floating
👉 Click here for knowledge
8. The ellipsis problem
👉 Click here for knowledge
9. Locate the problem
👉 Click here for knowledge
10. Elastic box model
👉 on this issue I think ruan Yifeng teacher’s article is the most appropriate
11. Elements are vertically centered from top to bottom
👉 Click here for knowledge
12. Unit of length in the CSS
👉 Click here for knowledge
What are the new HTML5 attributes/HTML5 attributes you have used?
👉 Click here for knowledge
Use CSS to make a div disappear from view. Use your imagination?
👉 Click here for knowledge
15. The problem of landing
👉 Click here for knowledge
16. The difference between background picture and insert picture
👉 Click here for knowledge
17. Two-column layout, fixed on the left and adaptive on the right
👉 Click here for knowledge
18. Clear the floatoverflow:hiddenWhy can be cleared
👉 Click here for knowledge
19. postcss
👉 Click here for knowledge
20. Differences between LESS and CSS
👉 Click here for knowledge
21. The following code
<style>
.classA { color:blue; }
.classB { color:red; }</style>
<p class="classB classA">hello</p>
What is the final color of the text inside element PCopy the code👉 Click here for knowledge
22. Draw a triangle, sector, and divide a circle into four parts. The diagonal parts are the same color and the adjacent parts are different colors
👉 Click here for knowledge
Three, handwritten code
1. Array deduplication
👉 Click here for knowledge
2. Built-in implementation of new
👉 Click here for knowledge
3. Built-in call implementation
👉 Click here for knowledge
4. Apply inside
👉 Click here for knowledge
5. The built-in bind
👉 Click here for knowledge
6. If you
👉 Click here for knowledge
7. The throttle
👉 Click here for knowledge
8. A deep clone
👉 Click here for knowledge
9. Deep comparison
👉 Click here for knowledge
10. Processing the URL
👉 Click here for knowledge
11. Prototype inheritance
👉 Click here for knowledge
12. The call to inherit
👉 Click here for knowledge
13. Combinatorial inheritance
👉 Click here for knowledge
14. Array flattening
👉 Click here for knowledge
15. Bubble sort
👉 Click here for knowledge
16. Quicksort
👉 Click here for knowledge
17. Insert sort
👉 Click here for knowledge
18. Countdown achieved
👉 Click here for knowledge
19. Random verification code
👉 Click here for knowledge
20. TAB
👉 Click here for knowledge
Fourth, the use of re
1. Verify your phone number
👉 Click here for knowledge
2. Check whether the number is a valid number
👉 Click here for knowledge
3. Verify the password
👉 Click here for knowledge
4. Verify your real name
👉 Click here for knowledge
5. Verify the email address
👉 Click here for knowledge
6. Verify id number
👉 Click here for knowledge
7. Time format conversion
👉 Click here for knowledge
8. The character that occurs the most times in a string and the number of times
👉 Click here for knowledge
9. Micrometer
👉 Click here for knowledge
Five, JS
1. Common browser and its kernel
👉 Click here for knowledge
2. Data types in JS
👉 Click here for knowledge
3. What are the underlying data structures of JavaScript objects
👉 Click here for knowledge
4. Five stages of front-end learning
👉 Click here for knowledge
5. Use of developer tools
👉 Click here for knowledge
6. Composition of JavaScript
👉 Click here for knowledge
JavaScript variables
👉 Click here for knowledge
Var, let, const
👉 Click here for knowledge
9. JavaScript output
👉 Click here for knowledge
10. Number Indicates the data type
👉 Click here for knowledge
11.String data type
👉 Click here for knowledge
12. Common methods in strings
👉 Click here for knowledge
13. Boolean Data type
👉 Click here for knowledge
14. Look at the code output, it will involve Event Queue, Event Loop, object oriented underlying mechanism, closure, etc
👉 Click here for knowledge
15. What is the difference between shallow copy and deep copy
👉 Click here for knowledge
16. Implement array de-duplication, new Set array de-duplication and their implementation of which performance will be better
👉 Click here for knowledge
17. Name the array methods and the difference between map and forEach
👉 Click here for knowledge
18. What is the principle of JSONP across domains? What is the principle of Node middleware to solve cross-domain problems?
👉 Click here for knowledge
19. What does Object.create implement? What is the difference between passing null and a normal object?
👉 Click here for knowledge
Understanding prototype and __proto__
👉 Click here for knowledge
21. What is the difference between call, apply and bind
👉 Click here for knowledge
22. Replace the way of extending operator parameters in ES6
👉 Click here for knowledge
23. How is inheritance implemented? What does super stand for in class
👉 Click here for knowledge
24. The difference between ‘import’ and ‘require
👉 Click here for knowledge
25. Investigation of Promise, application of THEN chain
👉 Click here for knowledge
26. Implement a publish subscription, including subscribe (on), publish (emit), subscribe (once)
👉 Click here for knowledge
27. What is the difference between anti-shake throttling and throttling?
👉 Click here for knowledge
28. To achieve the request concurrency limit, specifically: encapsulate a function, pass the number of concurrent requests as a parameter, to achieve the limit of concurrent requests
👉 Click here for knowledge
29. Talk about closures and garbage collection
👉 Click here for knowledge
30. How to handle exception events with async and await
👉 Click here for knowledge
31. What is the difference between arrow functions and normal functions? What if you want to change the binding of this to arrow functions?
👉 Click here for knowledge
32. Native JS determines that the mouse is in a diagonal rectangle position
👉 Click here for knowledge
Six, network
1. The difference between HTTP and HTTPS
👉 Click here for knowledge
2. HTTP request mode
👉 Click here for knowledge
3. What do you know about HTTP network status codes and their meanings?
👉 Click here for knowledge
4. Explain what happened between entering the url in the browser’s address bar and seeing the entire page.
👉 Click here for knowledge
5. Describe a “performance optimization” solution you dealt with on a previous project?
👉 Click here for knowledge
6. Three handshakes and four waves
👉 Click here for knowledge
Seven, framework,
1. Understanding of MVVM
👉 Click here for knowledge
2. Common instructions in VUE/or common instructions in development
👉 Click here for knowledge
3. Understanding of the VUE lifecycle
👉 Click here for knowledge
4. Bidirectional data binding principle of Vue
👉 Click here for knowledge
5. Advantages of Proxy over defineProperty
👉 Click here for knowledge
6. What kind of navigation guard does vue-router have
👉 Click here for knowledge
7. Vue routing implementation: Hash mode and history mode
👉 Click here for knowledge
8. Value transmission communication between components
👉 Click here for knowledge
9. The difference between Vue and Angular and React
👉 Click here for knowledge
10. What is Vuex? How to use it? Which functional scenarios use it?
👉 Click here for knowledge
Vue React AngularJS jquery
👉 Click here for knowledge
12. React with a key. Compare nodes at the same level.
👉 Click here for knowledge
13. Your understanding of virtual DOM and diff algorithms, implement the render function
👉 Click here for knowledge
14. The mode of value transfer between parent and child components, and the mode of value transfer between components
👉 Click here for knowledge
15. How to parse JSX
👉 Click here for knowledge
16. What are the types of life cycle and what do you do at what stage? Why scrap some life cycles?
👉 Click here for knowledge
17. React optimization method
👉 Click here for knowledge
18. Several ways to bind this
👉 Click here for knowledge
19. Understanding of Fiber
👉 Click here for knowledge
20. SetState is synchronous or asynchronous
👉 Click here for knowledge
21. Redux and React-Redux
👉 Click here for knowledge
22. Understanding of higher-order components
👉 Click here for knowledge
Eight, webpack
1. Which WebPack configurations have been used
👉 Click here for knowledge
2. What optimizations have you used in your projects
👉 Click here for knowledge
3. Differences between Plugin and Loader
👉 Click here for knowledge
4. Which loader and Plugin have you used
👉 Click here for knowledge
Nine, security
1. XSS attack principle, classification, specific cases, and front-end defense
👉 Click here for knowledge
2. CSRF attack principle, specific cases, and front-end defense
👉 Click here for knowledge
3. Principles and defense measures of HTTP hijacking and page hijacking
👉 Click here for knowledge
Ten, reference
[Face] Less than a year of front-end experience, what will the interviewer ask
A self-inspection list of a [qualified] front end engineer
Xi. Conclusion
The summary of the first to this, if you feel good to write, you can pick up the hand of the code to point a thumbs-up, after will continue to share their learning content 👌
Below is my personal wechat, there are any front-end problems can be discussed together.
This article is formatted using MDNICE