foreword
Although it is about to be gold, nine, silver and ten, there should be a lot of people interviewing, although I am also there, the purpose of writing the article is mainly to sort out knowledge, and it can be helpful for review. This article is mainly related to the front-end knowledge system. The content involved includes :
- browser
- computer network
- Front-end basics (html, css, js)
- node
- webpack
- Data Structures and Algorithms
- web security
- Front-end engineering (application of compilation principles)
- Rendering optimization
- performance monitoring
Does not include:
- Cross-end (mini program, hybrid application)
- frame
- typescript
- mobile
However, the front-end is really involution , the content is so much, and some interview questions are lost as a reference, the above basically covers the entire knowledge system of the front-end.
For the rest, I'm not very familiar, so anyone want to complete the second part?
other
After reading the comments, some people feel that their abilities are limited, which is normal. Since the front-end system itself has a lot of content, this article is just sorted out, there is no need to pay attention to all of it, it is just a current trend.
The current front-end field direction:
- visualization
- span
- Applets
- Engineering
- game
- DevOps
- webAssembly (rust, c, cpp) extends the front-end through other languages to achieve solutions that the front-end cannot do
- Audio and video (FFmpeg)
- full stack
Required:
- html、css、js
- typescirpt (2021, now ts is almost a necessary skill)
- frame
- Browser related knowledge
- monitoring, tracking
- team cooperation
Optional:
- computer network
- Compilation principle
- Data Structures and Algorithms
- unit test
Links in this article
At the request of the comments, all the content of this article can be found on this, and it will only increase, not decrease. The link may have little content, such as data structure and algorithm, which should be added later, only for individuals The scope of the body of knowledge, as for other farewells.
Make complaints:
Made with Feishu's thinking notes (advertisement in disguise?), talk about the experience
advantage:
- ui unscrupulous
- Can link to other documents via @
shortcoming:
- The pasted link cannot modify the title, it is automatically recognized by default
- no way to wrap
- Images are not supported
- When using a 2-sided structure, there is no way to drag
- Sharing does not support folders (let me add collaborators????), and sharing is very troublesome if there are too many files.
- Does the preview feel blurry? When editing, it is obviously clearer than previewing
Note
因为一些内容更新的比较频繁,所以图上的内容可能并不准确,具体请通过 前端知识体系 查看。
链接:
前端知识体系
浏览器
- 从输入网址到看到网页发生了什么
- dom 解析规则
- css、js是否会阻塞渲染
- xss、csrf、csp
- 重绘和重排的区别
- 浏览器缓存是怎样的
- 跨域
作为个前端,毕竟每天都和浏览器打交道,不懂浏览器的前端不算好前端。
浏览器渲染详细过程:重绘、重排和 composite 只是冰山一角
图解 Google V8_虚拟机_JavaScript_Node.js_前端_Google-极客时间 (geekbang.org)
前端基础
CSS
- css 盒模型
- bfc
- 居中
- 伪类和伪元素
- css选择器优先级
js
- 事件循环
- 原型链
- this
- 作用域
- 闭包
- 柯里化
- 事件流
- 数据类型
- promise、generator、async await
- 0.1 + 0.2 为什么不等于0.3 (IEEE754)
- 浮点精度
JavaScript 深入之浮点数精度 (juejin.cn)
计算机网络
- https 为什么安全
- http2的特点
- tcp阻塞
- http状态码
- http3
- http和https握手
前端工程化
- amd、cmd、esmodule、commonjs区别
- import from 和require、import()区别
- babel
- vite
- eslint
- postcss
- ast
- 微前端
node
- 模块查找机制
- stream 流
- 非阻塞异步io
- 中间件
webpack
- loader和plugin的区别
- tapable
- webpack hmr原理
- webpack 编译流程
- webpack 优化
- tree shaking
性能优化
- 常见的性能优化方案
- 一些性能指标
performance各阶段:
前端监控
数据结构和算法
书:
- 算法导论
- 剑指offer
- 小灰的漫画算法
结束
整理这个,也算是自己的复习,也算总结,马上9月了,dalao们加油。