Jassica

react 源码架构 源码目录结构 fixtures：为代码贡献者提供的测试React packages：主要部分，包含Scheduler（调度器：排序优先级，优先级高的任务先进性处理）,reconciler（协调器：找出哪些节点发生了变化，打上不同的tag）等 scripts：react构建相关 packages主要包含模块 react：核心Api（React.createElement、React.Component） render相关的：react-art（canvas、svg的渲染）、react-dom（浏览器环境）、react-native-renderer（原生相关）、react-noop-renderer（调试或fiber用） 试验型的包：react-server（ssr相关）、react-fetch（请求相关）、react-interactions（事件相关）、react-reconciler（构建节点） shared：公共方法和变量 辅助包：react-is（判断类型）、react-client（流相关）、react-fetch（数据请求）、react-ref ...

信息就是位+上下文系统中的所有信息（包括磁盘文件、存储器中的程序、存储器中存放的数据、网络传送数据）都是由一串比特表示区分不同数据对象的唯一方法是读到这些数据对象时的上下文 程序被其他程序翻译成不同的格式hello.c –> 预处理器(cpp) —hello.i—–> 编译器 —hello.s—-> 汇编器 —hello.o—-> 链接器 –> hello可执行 预处理阶段：预处理器根据以#开头的命令，修改原始的C程序（以.i为扩展名） 编译阶段：将文本文件hello.i 翻译成文本文件hello.s（包含一个汇编语言程序） 汇编阶段：汇编器把 hello.s 翻译成机器语言指令，把这些指令打包成一种叫 可重定位目标程序的格式，并将结果保存在目标文件hello.o中。hello.o文件是一个二进制文件，它的字节编码是机器语言指令 链接阶段：每个C编译器都提供printf函数存在于printf.o的单独预编译目标文件中，链接器负责这个文件接入hello.o程序中。可执行文件加载到存储器后，系统负责执行 编译系统如何工作 优化程序性能 理解链接时出现的错误 ...

信息存储 数字编码 无符号编码：基于传统的二进制表示法，表示大于或者等于零的数字 二进制补码编码：表示有符号整数的最常见的方式，有符号整数就是正负数字 浮点数编码：表示实数的科学技术法的以二为基数的版本 十六进制表示法一个字节是8位 二进制：00000000～11111111十进制：0～255十六进制：0～9 A～F 二进制转十六进制，四个一组，不是四的倍数，最左边一组前面补0 0x8F7A93 8 F 7 A 9 3 1000 1111 0111 1010 1001 0011 1011 0111 1001 1100 B 7 9 C 0xC4E5D C 4 E 5 D 1100 0100 1110 0101 1101 11 0101 1011 0111 1110 0110 3 5 B 7 E 6

微前端概念 微前端是一种类似于微服务的架构，将微服务的理念应用于浏览器端，将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，各个前端应用独立运行、独立开发、独立部署。 当前前端应用通常以spa的形态（一个应用所有的相关页面都在一个项目）出现。随着项目迭代，维护成本越来越高。微前端的意义在于 拆分项目：细化为若干个可以单独部署的子项目，子项目互相独立，单独部署 微前端结构下，不同技术栈的子项目可以共存 可以低成本整合已有项目。因为子项目是独立的，不需要太大的工作量就可迁至新项目 qiankun（乾坤） qiankun 是一个基于single-spa 的微前端库（二次开发） single-spa：是一个用于微服务化的js前端解决方案 将子应用看作一个spa的页面，主应用通过路由匹配的方式，加载不同的子应用，子应用会经过下载（loaded）、初始化（initialized）、被挂载（unmounted）、被移除(unloaded)等过程 主应用 安装 1`yarn add qiankun` // `npm i qiankun -S` 注册微应用 1 ...

概念 事件循环： js分为同步任务和异步任务 所有同步任务都在主线程进行，形成一个执行栈 同步任务进入主线程，异步任务进入 event Table 并注册回调函数；等事件完成（如：ajax请求响应返回 setTimeout延迟到指定时间）event table 会将这个回调函数移入 Event Queue 栈中的代码执行完毕，执行栈任务为空时，主线程会先检查微任务队列中是否有任务，如果有：将微任务队列中的所有任务依次执行，直到队列为空，之后再检查宏任务队列是否有任务，如果有，取出第一个宏任务加入到执行栈中，之前再清空执行栈，检查微任务，以此循环，直到全部的任务都执行完成 浏览器进程 插件进程 GPU进程 浏览器渲染进程 主线程 解析、处理script 与渲染线程互斥 执行过程会导致渲染卡顿 Web Worker GUI渲染线程 解析HTML CSS 构建DOM，布局和绘制浏览器界面渲染任务 与主线程互斥 （dom与ui的关系） 事件触发线程 事件循环 由主线程 wait时添加至 event queue 等待执行 http 请求线程 XMLHttpRequest 开启新线 ...

垃圾回收什么是垃圾回收在创建一些变量，函数，对象时，都需要分配内存，当这些值不再被使用的时候，js 就需要在合适的时候将这部分的内存进行回收，这就是垃圾回收机制，对于一些大型应用来说，垃圾回收可以有效提高性能。在js里，执行垃圾回收是自动执行的，不对外提供任何接口。 垃圾回收的条件联系下实际生活：我们会把什么样的东西送去回收呢，当然是 确定以后根本用不到的东西 在js里也是一样，对于再也无法访问到的值，就要进行回收 12345// 第一步：创建一个对象并把内存地址赋值给uservar user = { name: 'Leo'}user = null // 第二步：修改user的内存地址 创建引用类型值的时候，赋值给变量的实质上是内存地址。执行上述代码的第一步之后，可以通过 window.user 访问到 {name: 'Leo'}对象，但是在执行 user = null 之后，这个变量对象已经 无法访问到 了，也就达到了可以被回收的条件 123456789var user = { nam ...

关于requestAnimationFrame 数据 渲染间隔 10ms 16.7ms 20ms 30ms 33.4ms 40ms 50ms 50.1ms 60ms 66.8ms 70ms 80ms 83.5ms 假设场景：国庆高速，最多每16.7s通过一辆车，突然插入一批setTimeout的车，强行10s通过。就超负荷了 显示器 16.7ms 刷新间隔之间发生了其他绘制请求，导致部分帧消失，导致动画断续显示，这是过度绘制带来的问题，所以 setTimeout的定时器值推荐最小使用16.7ms（16.7 = 1000/60 每秒60帧） requestAnimationFrame：跟着浏览器的绘制走（浏览器绘制间隔10ms，就10ms绘制），这样就不会有过度绘制的问题，动画不会掉帧 总结setTimeout 与 requestAnimationFrame 的区别： 引擎层面：setTimeout 属于 JS 引擎，存在事件轮询，存在事件队列。requestAnimationFrame 属于 GUI 引擎，发 ...

优化使用 include 或者 exclude 配置，避免重复打包 引入的一些插件、类库都是被打包过了的，用babel编译的时候，需要配置一下，给已经编译过的语法剔除掉，这样就能减少打包时间 比如在项目中引入jq插件，取用jq时，npm搜索会先从当前目录的node_modules中找，找不到，就往上一级目录node_modules，一直往上找到磁盘。如果都没有，才报错 找到 node_modules 包之后找到 package.json 文件，在文件中找到 入口文件去加载，加载后发现已经是编译过的文件了 123456{ test: /\.js$/; include: path.resolve(__dirname, '../src'); // 指定编译文件夹 exclude: /node_modules/; // 排除指定文件夹 use: [{loader: 'babel-loader'}]} 利用缓存减少打包时间123456{ test: /\.js$/; ...

模块热替换启用 HMR 更新 webpack-dev-server配置，使用webpack内置的HMR插件 12345678910111213141516 module.exports = { devServer: { contentBase: './dist', hot: true // + }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Hot Module Replacement' }), new webpack.NamedModulesPlugin(), // + new webpack.HotModuleReplacementPlugin() // + ]}// NamedModulesPlugin查 ...

webpack静态模块打包器。处理应用程序时，它会递归地构建一个依赖关系图，包含应用程序需要的每个模块，将所有这些模块打包成一个或多个 bundle 入口（entry） webpack 应该使用哪个模块作为构建内部依赖图的开始 webpack 配置的 entey 属性 指定入口起点。默认为 ./src 单个入口123456789const config = { entry: './path/to/my/entry/file.js' // 简写 // entry: { // main: './path/to/my/entry/file.js' // }};module.exports = config; 对象12345678// 用法：entry: {[entryChunkName: string]: string|Array<string>}// 分离应用程序（app）和第三方库（vendor）const config = { ...