This article is based on the interview questions, so it will sort out the questions of each module.
From the breadth of front-end technology to the depth of technology sorting, technology breadth corresponds to the corresponding depth of technology, expect to achieve a higher level of technology.
directory
I. Breadth of technology
1. Traditional Web front-end
2. Various small programs
3. Mixed development
4. Node.js
5. The desktop
2. Technical depth based on technical breadth
1. Traditional Web front-end
(1). html
(2). JavaScript
(3). css
(4). Relevant framework
2. Various small programs
(1) basic of wechat small program
(2). Framework related to small programs
3. Mixed development
(1). Technical basis of mixed development
(2). Hybrid development framework
4. Node.js
(1). The Node. Js
(2). The Node. Js framework
3. Optimization
(1) performance optimization
(2) safety optimization
4. Architecture
(1). Web front-end architecture
I. Technical depth
1. Traditional Web front-end
The core technologies are still the three foundations of the front end, HTML,JavaScript and CSS.
The traditional technology area was PC side projects, now it’s more mobile H5
2. Various small programs
Small programs represented by wechat small programs are similar to PWA applications. Relying on some super apps, they provide lightweight applications similar to native applications. They still use Web front-end technology and become a technical direction of web front-end.
3. Mixed development
Represented by the development of hybrid apps, many technical frameworks have been developed.
The bottom layer is based on traditional front-end technology, such as Cordova,RN, Weex,Dcould, etc. There is also a new framework, Flutter, that Google has developed for apps, the Web, and even server-side projects.
4. Node.js
The front end has extended deep into the back end realm, and Node.js is a good example of that.
Js language single thread, event loop mechanism and other innate advantages, make JS processing high concurrency, low IO performance is outstanding, so Node.js adopts JS language advantages, js does not add server-side language functions, can successfully qualified for back-end projects, has been used by major manufacturers for a long time.
Node.js has developed many frameworks, such as Express, KOa, Egg, etc., that are excellent and worth learning
5. Desktop applications
Using Web front-end technology, front-end has entered the desktop application field.
Js has done a great job developing desktop applications with Electron, and vscode is a perfect example.
2. Technical depth based on technical breadth
The big front end already covers a lot of areas, PC side, mobile side, applets, hybrid development technology, back-end Nodejs and so on have a lot of applications.
1. Traditional Web front-end
(1) html
- What is HTML?
- Difference between SRC and href
- Understanding the semantics of HTML
- The difference between defer and async in the script tag
- What are the inline elements? What are block-level elements? What are the void elements?
- What are the updates to HTML5
- The role of DOCTYPE
- What are the common meta tags
- Talk about Web workers
- What is the use of the head tag
- What’s the difference between Canvas and SVG
- Title vs. H1, B vs. strong, I vs. EM
- What does img srcset do?
- How to use HTML5 offline storage, how to work, how to update?
- The difference between progressive enhancement and graceful degradation
- What are the advantages and disadvantages of iframe
- Viewport All properties?
- H5 meta tags are available
(2) JavaScript
- What data types do JavaScript have, and how do they differ?
- What are the methods of data type detection
- What are the ways to determine an array
- Null and undefined
- What is the result of typeof NULL, and why?
- Intanceof operator implementation principle and implementation
- Why 0.1+0.2! == 0.3, how do I make it equal
- How do I get a safe undefined value?
- What are the results of typeof NaN?
- The difference between isNaN and number. isNaN functions?
- The cast rules for the == operator?
- Other rules for converting values to strings?
- Conversion rules for other values to numeric values?
- How to convert other values to Boolean values?
- | | and && operator returns a value?
- Object.is() differs from the comparison operators’ === ‘and’ == ‘?
- What is a wrapper type in JavaScript?
- How do implicit type conversions work in JavaScript?
- When is the “+” operator used to concatenate strings?
- Why BigInt’s proposal?
- The object.assign and extension operations are different between deep copy and shallow copy