自我总结 前端面试知识点

Intro

1. 学习前端大概三年时间
2. 本科做了一些前端相关项目，使用过React，Vue，Webpack
3. 本科毕业后实习，官网修bug，开发小插件
4. 出国，学习计算机3D，可视化开发
5. 目前在实习，做可视化

Project

毕业设计
对高维数据降维，mds，pca，kpca，t-sne，可视化分析，帮助导师解释聚类算法的输出结果。

日志易

1. 基于Django的中间件，开发新老API的适配器。
   先写框架，再实际去对应到API

2. 做大屏的数据可视化, 发现问题，耦合性太高，view直接绑定widget, 以及数据搜索也绑定的widget

   1. 先帮他们修改了线和柱状图， copy的代码，逻辑不正确，数据量大的时候，页面卡死。
   2. 栅格百分比的图，类似于进度条。
   3. mock 动画特效。涉及到性能问题。js -> TweenMax -> css -> Transform + Animation， 谈一谈css的性能优化，可以更好地使用Web Animate API(实验室方法)。

React

1. 生命周期：废除 componentWillMount, componentWillReceiveProps, componentWillUpdate, 新增 static getDerivedStateFromProps(nextProps, prevState), getSnapshotBeforeUpdate
2. 新特性：钩子函数 useState, useEffect
3. 性能优化: shouldComponentUpdate, 懒加载，使用不可变数据immutable，SSR，保持稳定的树结构
4. diff 算法
   1. 传统diff O(n^3)
   2. React Diff
      1. Tree Diff, 同层比较，删除未出现的节点
      2. Component Diff, 按照Tree Diff策略比较Component，结合shouldComponentUpdate
      3. Element Diff, 同一层级，插入，删除，移动，从前向后移动节点
5. React与Vue的区别：数据绑定，模板不同

HTTP

1. 网络结构模型七层，应用层（HTTP，HTTPS），表示层，会话层（SSL），传输层（TCP/IP, UDP），网络层，链路层，物理层
2. 三次握手，四次挥手
3. 缓存机制，协商缓存，强缓存
4. HTTP1.1、HTTP2.0
5. TCP、UDP
   1. TCP：基于链接，保证数据的完整与顺序
   2. UDP：无连接，不保证数据的完整与顺序

JS

1. 数据类型：Undifined, Number, String, Function, Null, Object
2. 事件循环: 宏任务，微任务，任务队列
3. 事件绑定(针对类似于ul->li)：绑定ul， e.target
4. 作用域, 块级作用域{}
5. 原型链，原生方式继承, call, bind, apply
6. XSS，CSRF (预防)
7. 箭头函数的this，基于代码上下文确定
8. 防抖与节流
9. 深度拷贝（递归，转字符串），浅拷贝
10. ES6：Generate(*, yield)，Async/Await(一次执行，返回Promise)，Decorator(target), Proxy(target, handler)(元编程，定义对象行为,13种拦截: get, set, has, definedProperty…), Reflect(解决异常，返回True/False, 同Proxy 13种行为)，Promise(all[短路], race, any, allSettled[不短路])
11. 事件委托
12. AMD、CMD，CommonJS， UMD，Import
    1. AMD：异步模块加载，依赖前置，定义模块的时候就声明依赖，RequireJS，
    2. CMD：同步模块加载，懒加载，用时加载， SeaJS
    3. CommonJS： 模块化，同步加载
    4. UMD：通过判断的方式，兼容以上三种的写法
    5. Import：ES6语法糖，静态加载资源，编译时加载。

HTML

1. 页面渲染过程：加载资源，DOM Tree, CSS Tree, Render Tree, Composite Layer, GPU
2. 性能优化
   1. 加载页面的时候，css，js的位置
   2. 关于动画
      1. 使用transform
      2. 适当增加合成层
      3. box-shadow会消耗性能
      4. 使用RequestAnimationFrame，了解其原理
3. <script>标签中，defer(全部下载, 顺序加载js)和async(先下载完成先加载)，但都不阻塞页面解析， 普通script，阻塞页面解析进行下载

CSS

1. 包含块定义，块级格式化上下文
2. 盒子模型
3. 清除浮动
4. Flex
5. Grid
6. 垂直水平居中
7. | |      | | 样式

OS

1. 进程：系统资源分配调度的单位，通过TCP/IP端口进行通讯。
2. 线程：栈私有（保存自身运行状态与局部变量），堆共享。

Webpack

Angular, React, Vue 对比