[2020] Front-End Notebook
An engineer and explorer. Let's improve everything.
Have a fun day!
理解数据结构 树和链表 (为什么会有React16+ 版本的大变更)
理解函数式编程 为什么React 和 Redux如此使用
理解数据结构基础上 还要理解 React生命周期变更 / 在Fiber基础上 React Hook等应用
....
- 组件是什么?
- virtual dom?
- 简单手写virtual dom创建?
- 生命周期?
- 哪些不可以用setState?
(我理解要硬都可以，但看你怎么用, 加个判断条件, 但考虑的肯定是性能方面，尽可能减少不必要的render。只执行一次的生命周期函数肯定是能用，但要考虑到会触发重新render。最好不要在shouldUpdateComponent, WillUpdateComponent 阶段主要是 因为会死循环的。包裹在render() 里面去更新也会。
- 为什么会需要自动绑定?
- 有什么方法解决?
- 异步 还是 同步?
- 批量更新意义?
- 更新流程?
- setTimeout / 原生事件里面, 为什么是同步现象?
- 为什么建议传递给 setState 的参数是一个 callback 而不是一个对象?
因为是异步的更新， callback保证state处理成功后, 回调其他的处理。
不用关心具体运行环境, 可到处运行。
因为React本质是个UI层的东西, 用js来封装个函数, 产物是个Vnode。
UI层在小程序 客户端 小程序都是差不多的
- import React from 'react'; ???
- import ReactDOM from 'react-dom'; ???
- React Fiber? 解决什么问题?
- 工作流程?
1. 父组件传给子组件
2. 子组件传给父组件
3. 类似 Node.js EventEmitter (注册事件, 调用事件)
4. Context方式 (Provider, Consumer)
可以用于获取一个 DOM 节点或者 React 组件的引用
// <h3 ref="vm">2. Virtual Dom</h3>
componentDidMount()
this.refs.vm.setAttribute('class', 'vmstyle')
console.log(this.refs.vm)
// 输出 <h3 class="vmstyle">2. Virtual Dom</h3>// super(), 继承父类(React.Component)的this方法, 但无法得到从父组件传的props。
constructor() {
super()
// 如果不加上super
// 继承的子类不能使用React.Component this
}
// super(props), 使用this, 并得到从父组件传来的props
constructor(props) {
super(props)
}编程:
一面是技术leader, 问了很多项目细节 一小时
二面是工作2年的小朋友, 问的问题偏细节
三面是工作5年, 问题更偏还可以吧
// 一面
function Foo() {
console.log(1)
return this
}
function getName() {
console.log(4)
}
Foo.getName = function() {
console.log(2)
return this
}
var getName = function() {
console.log(3)
}
// 声明提升
// Foo.getName() // 2
// getName() // 3
// Foo().getName() // 1, 3
// getName() // 3
// new Foo.getName() // 2 指向Foo内部
// Foo.getName().getName() // 2, 2// 一面
const add = function(a，b) {
return a + 1 + b
}
const adder = memorize(add)
adder(1, 2) // 2
adder(2, 3) // 3
adder(1, 3) // 2概念: c(b(a('......'))) 先执行的是a, b, c
合成: 解决嵌套多层的问题, compose([a, b, c])
// 同步事件串联起来 a => b => c
var a = str => str.toUpperCase() + '+'
var b = str => str.split('').join('&')
var c = str => str + 'bye'
c(b(a('abc')))function compose (funcs) {
// 或 funcs.reduceRight((prev, curr) => (...args) => prev(curr(...args)))
return funcs.reverse().reduce((prev, curr) => (...args) => prev(curr(...args)))
}
compose([a, b, c])('abc')function compose (funcs) { // funcs 所有执行函数队列 [a, b, c]
var pointer = 0 // 指针概念
var _len = funcs.length
var result = null
return function fn (...args) {
if (pointer === _len) return result
result = funcs[pointer].apply(this, args) // 当前执行
pointer += 1 // 指针 + 1
return fn.call(this, result) // 继续往下面执行
}
}
compose([a, b, c])('abc')// 展开后
['1', '2', '3'].map((data, index) => parseInt(data, index))
所以 编程了这样
- parseInt('1', 0)
- parseInt('2', 1)
- parseInt('3', 2)['10','10','10','10','10'].map(parseInt)
// 结果: [10, NaN, 2, 3, 4]['1', '2', '3'].map((value) => parseInt(value)) 这样写就没问题了1. Node 使用场景? 优劣势?
2. 不用Node, 有些问题怎么解决?
3. 如何保证Node服务的稳定性? 降级 熔断 限流 双机房容灾
4. Node高并发思考 ?
1. 进程 process 和 线程 thread
2. Node 为什么总说资源利用率不高
3. 前端 Serverless 概念
- 攻击本质: 脚本注入攻击
- 常见类型
- 怎么解决? 写个转义?
- CSRF 是什么? 流程是什么?
- 怎么攻击的?
- 通过什么方法避免被攻击?
- 基本类型, 引用类型
- 变量对象 和 堆内存
- JS执行环境: 全局, 函数环境, eval
- 执行栈: 全局在最底下, 函数执行才入栈, 遇到return立刻出栈
- 函数的执行上下文 Execution Context, 分为两个阶段 创建 和 执行
- 创建阶段 VO: 变量声明，函数声明提升
- 执行阶段 AO (入栈执行)
- EC创建阶段: VO, 作用域链, this
- EC执行阶段: AO赋值, 其他code .....
1. 函数执行的地方: Function Call Stack 函数调用栈
2. 在Function Call Stack 函数调用栈里面，存放着可执行上下文EC
3. 执行上下文EC, 告诉函数你周遭的环境是什么样的。
生命周期有两个:
- 创建: 又可以简单的理解为 你写代码的环境。主要负责VO, scopechain, this 的声明。
声明包含函数提升声明 和 变量声明
变量给它分配个内存空间, 函数或对象类型的是key分配个内存空间，对象类型放到堆内存中。
- 执行: 负责AO参数赋值, 其他代码执行。
4. 可执行环境分为: 全局环境 和 函数环境。可以简单理解为作用域
而作用域链是在你写代码阶段已确定的作用域环境。
5. 当EC在执行阶段，会push进函数调用栈，此时当前函数里参数的获取 是按照作用域链创建的来的。
6. 闭包: 我个人理解是作用域链的应用。上级函数保存当前函数执行的内容。
# 事件循环 Event Loop
本质是:
1. 作为单线程js对于异步事件的处理机制
2. 或者可以说是 只有一个主线程js的处理逻辑
3. 如何保证主线程, 有序并高效 或非阻塞 的处理呢? => 事件循环机制 Event Loop
4. 异步任务也是有优先级的，分为 宏任务 MacroTask, 微任务 MicroTask
1. 在执行上下文 EC 的创建阶段this已经被创建出来了
2. 独立函数运行，this指向函数内部, 但因为非严格模式下，this 会指向window
对象调用的函数，this指向对象
3. this绑定
- call, apply
- bind
- 利用闭包和apply你自己实现个 bind方法
- 手动绑定 例如const that = this
闭包的产生条件:
函数a 里 写着函数b。
b执行的时候, 用到了a_EC.VO a的执行下上文的变量对象。
(要用到人家a里的才产生, 知道window下的不算)
没有完成 TODO
创建对象
- 工厂模式? 问题是重复分配内存给相同的函数或方法，寻求共享模式。
- 构造函数? 对象私有化
- prototype: 方法共享方式 (其实也是利用引用类型)。
__proto__: 指针, 某个对象要使用共享方法, 用指针指向该引用类型即可。
prototype chain: 继承 想共享方法都连在一起。
- 继承? 原理是什么? prototype chain
- new都干了啥? 创建对象，私有内容赋值(this的绑定)，指针__proto__指向共享的公共内容
1. 值类型 基本类型 or 引用类型?
2. 遍历对象的三个方法及不同? (for - in , Object.keys() , Object.getOwnPropertyNames())
3. 浅拷贝?
4. 浅拷贝 + 迭代? code? 问题? 解决?
5. 深拷贝?
三种 (JSON, 浅拷贝+循环, 浅拷贝+循环+校验)
6. 会遇到什么问题? 怎么解决?
工具
框架
架构
流程
监控
测试
完成一个产品 所需要的工具，方法，架构等。
- 调研阶段: 用什么技术选型。
- 开发阶段: 组件，eslint, ts ....
- 构建提交阶段: webpack, git, ....
- 发布阶段: 发布工具脚本，CDN .....
- 运行后: 数据评估，实时监控 .....
作业帮 promise.race 当得知返回 如何停止掉其他的请求 写代码阿里一面🔥🔥🔥🔥🔥Vue 和 React 本质的不同
数据劫持方式, 数据变更触发渲染流程
【1. 概念】
【进程】 process 资源分配和调度任务。
【单线程】进程(黑盒)是线程thread(工人)容器, 单线程是一个工人干活。
异步任务是走队列的, 同步任务过多占用主进程, 可能会导致线程阻塞, 就是只有一个人干活干太长时间了，其他任务block。
【进程通信】多进程用fork模式, 每个都是隔离独立空间(多造出来几个黑盒)。只能建立IPC通信, 进程间才能共享。
可以利用CPU核数, 创建多个进程。
【2. 模型】
【Node是单线程模型】基于事件驱动/非阻塞模型, 适合高并发场景 高I/O类型。
原因: 利用事件循环机制，不是启动每个线程为每个请求服务，资源占用较少。
避免线程创建和切换产生的资源开销。不适合密集计算类型, 会CPU飙升为服务挂掉情况。
Node处理计算密集型问题: 长时间运行，占用资源，CPU时间片不会释放，后续I/O无法发起。
【Java是个多线程模型】利于密集计算类型。不适合高并发类型。
原因在于多线程是每来一个请求都要创建线程, 执行期间需要切换线程带来的开销。
【3. 多进程 + 单线程模式 / 解决什么问题?】
- Node是单进程 + 单线程模式, 但是可以利用多核CPU, 多开辟几个进程空间, 就是多雇佣几个工人干活。
=> 扩展 多进程 + 单线程模式
- 多进程不是为了解决高并发, 主要解决的是 Node CPU利用率不足问题, 利用机器多核特性。
浏览器有 UI线程(渲染引擎是多线程) + JS单线程
UI线程和JS线程互斥，因为JS 会影响UI的，只能是JS空闲，UI才会更新。
假设JS是多线程，那么DOM操作也是多线程，DOM不知道听谁的了，都是leader很混乱。
不如只有一个worker 去调度，异步放到队列里。等待执行。
浏览器对异步机制 有两个队列 micro queue 和 macro queue
只有同步 > micro queue > macro queue 只有当前队列空了，才能走下一步
Node模块分为: 核心模块 和 文件模块。
核心模块: fs http math ....
文件模块:
const a = require('/src/a.js')
1. 路径分析 '/src/a.js'
2. 文件定位
3. 编译执行
- 核心模块 (例如http, fs) 是直接被写到内存中，这样会二次加载更快。
- 文件模块 (RD写的代码), 运行时动态加载，按照路径分析，定位，再编译执行。
- CDN基本原理
- CDN节点优化, CDN主站
- 资源优化
- 本地缓存 + 补丁模式
- CDN 请求 或 返回资源的异常情况
- 如何解决?
- TTFB
- DOM Ready DOM 解析完成
- 首屏 首次渲染FP, 首次有内容渲染FCP, 首次有意义渲染FMP, 最大内容渲染 LCP
- 可操作时间评估
- L onLoadEventEnd 所有资源均请求结束
前端发展到现在一直绕不开几个方向。
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.