Learning the front line
- Basis (CSS, HTML, JavaScript)
- JS library
- Front-end frame (the MVVM)
- Browser & Computer Basics
- Front-end engineering
- Performance Optimization
- Nodejs
- Data Structures and Algorithms
Learning Objectives
First, the Big Three
CSS
- Box (Standard & IE)
- flex,float
- Common CSS selectors
- CSS selectors priority pole & weights
- BFC understanding with IFC
- transform,transition,animation等
- Responsive only to understand
H5
- Semantic tags
- Canvas
- Local storage (difference localStorage, sessionStorage, cookie's)
- video and audio usage
- Application cache (cache manifest)
JavaScript
- JS data types: base type & reference types
- this
- Scope (scope chain)
- Prototype & prototype inheritance chain &
- Closure
- Lexical scope and dynamic scope
- JavaScript implementation mechanisms
- promise & async
Second, the library tools
- jQuery: a collection of a variety of operating DOM API, useful for static HTML development
- Zepto: moving end jQuery (simplified)
- Moment: The date and time manipulation library
- lodash: js library operations
Third, the front end of the frame
Front-end frame: React, Vue way binding, data-driven view, Vue, single data stream, etc.
- Responsive to the basic principles: responsive principle of Vue , Vue responsive contrast with React
- Published subscription model: understanding JS publish-subscribe model
- Virtual DOM understand: you do not know VirtualDOM
- The principle of the front end of the route: Web front-end routing principles of analytical and implementation , Netease cloud classroom -vue-router source
- The principle of nextTicek: $ nextTick principle
- The principle of setState
- diff algorithms: React understanding of Diff algorithm
- Single Page Application (SPA) principles and advantages and disadvantages: Reference
Fourth, the browser & Computer Basics
- Browser cache mechanism: Strong caching, caching negotiation, browser cache mechanism
- JS enforcement mechanisms in the browser: Reference
- Page rendering principle: load from the input page URL to what happened ,
- Browser security issues: 8 large front-end security issues , 8 large front-end security (under)
- Why browser cross-domain: Why browsers should restrict cross-domain access
- Page optimization ideas
- The difference between HTTP and HTTPS
- TCP / IP protocol
- Three-way handshake and four wave
- CDN role and principles
- Forward Proxy and Reverse Proxy features
Fifth, the front-end engineering
Modular
- JS Modular
- Modular CSS
- Modular resources
Componentization
- Components of: containing from each template (HTML) + style (CSS) + logic (the JS) featured structural units UI split down, we call components.
Standardization
- Coding Standards
- Interface Specification
- Use git
- code Review
- UI element specification
Knowledge Point
- Understanding the role of Babel, ESLint, webpack and other tools in the project
- The core principle of Babel
- Webpack compiler theory, the build process, the principle of hot update
- Basic understanding of nginx
- Understanding Git workflow
- Significance and benefits of Mock
Performance Optimization
- Front-end performance metrics, performance monitoring (performance, LightHouse)
- Common performance optimization program which
- SSR program performance optimization
- Performance Optimization of Webpack
- React, Vue other performance optimization framework
- Network-level optimization
- Page rendering optimization level
- Black and white optimization scheme
Nodejs
- Nodejs role in the application of
- The difference between the Express and Koa
- Similarities and differences of the underlying operating principle Nodejs, and browser
- The principle Nodejs non-blocking mechanism
Data Structures and Algorithms
- Stack: Tutorial Blog
- Queue (list): Tutorial Blog
- List: Tutorial Blog
- Collection: Tutorial Blog
- Dictionaries and hash tables: Tutorial Blog
- Tree: Tutorial Blog
- Algorithm: leetCode online Brush title
