课程笔记

function lcp() {
    new PerformacnceObserver((entryList) => {
        const entries = entryList.getEntries();
        const lastEntry = entries[entries.length - 1];
        cons lcpTime = lastEntry.startTime;
        }
    ).observer({
        type: "largest-contentful-paint", buffered: true
    })
}

// 资源异常，胡乱一个图片地址
<img src="http://www.xx.wxx.com" onerror="() => {}" />

window.addEventListener('error', (event) => {
   console.log(event);
}, false)

window.onerror = (message, source, lineno, colno, error) => {    
    console.log('js异常：'， message, source, lineno, colno, error)
}

==>

插件化机制实现，预设机制preset

预设是为了给开发者足够的便捷，babel又在插件的基础上封装了一层，预设包含很多的插件组合一起

编译原理？有没有了解编译原理，了解过编译器的底层实现吗？

代码的本质是什么？

字符串，编辑其实就是字符串的操作

字符串语义化些，语句、说话

语法，这些词连起来组成句子，才能把事物说明白

编译原理简单理解就是把一句话转为为其他的说话，加修饰转化过去

分词分析（将句子劈开—分词totenizer分词器）（token）

大 家 好 ， 今 天 是 周 一

语法分析（组合起来成词）（连字成词）（parser 形成ast）

大家 好，今天 是 周一

语义分析（组合成句）

生成器（generate）or 执行器（interpret）

1、将句子劈开—分词器
2、分词链接—词法分析
3、分词处理理解—语义分析
4、生成器generator，执行器interpretor

程序里面没有什么特征不能用json来描述的

- 低代码平台 —> dsl（domain specific language）领域特定语言

- 代码 —>ast，Abstract Syntax Trees

ast优先级如何处理？，平衡二叉树   反转

之前的项目当中比较棘手的难点有哪些？

一面：

小程序 h5 N端工作量 x N

组件同构化

- 自研了跨端框架（类型Taro）

- 跨端实现原理

dsl协议，类似ast

编译时compile与运行时runtime

插件化

单位 px rpx —>babel-plugin-px2rem  babel-plugin-px2rpx

层次感？总分 ->1、N端小程序的适配   2、编译时compile与运行时runtime的处理  3、插件化；再对某个点细化来说

框架本身都有生命周期，自研小程序生命周期和钩子，事件循环机制怎么理解？说下生命周期和钩子如何处理，然后过渡到事件循环机制？

生命周期

钩子实现 钩子注册

为什么需要有个事件循环机制？js单线程 同步任务 ->微任务队列 

fiber react发展历史 req 

- stack reconciler -> fiber reconciler

- scheduler

谈谈你对函数式编程的理解？

开放性题目

1、什么时函数编程

纯函数 不可变性 函数组合 高价函数

OOP 面向对象

2、FP优势

3、在你项目的应用

4、开源社区，前端生态为什么拥抱FP

vue3抛弃option api拥抱comositon api

低代码编辑器undo redo实现思路

快照 snapshot，存一个临时变量下次进入的时候拿到快照恢复

指令集（指令队列）

优化：- 怎么调研方案   - undoRedoManager -> (plugins: xx) 类型 axios.interceptors AOP（面向切面编程）

二面：

前端异常监控用户、行为埋点

基于sentry

性能指标

- 发现sentry性能指标问题

- 尝试自己优化性能指标采集 Performance MuationObserver ResizeObserver

MuationObserver ResizeObserver有什么性能问题？

trigger 优化  借鉴fiber思想

性能优化？

交代背景：是做首屏加载优化还是 应用层优化 动效优化 资源优化

指标支持LCP FP是多少 优化之后多少

资源优化

怎么实现

三面：

团队中间最大的贡献？

低代码物料系统管理，200个物料组件，AtomComponent 原子组件 仓库融合不好管理

物料管理平台

编码规范分享 推进技术分享

CICD 组件发布全流程发布管理 

卡点设计：devops 工作流的设计 pipeline 源拉取 代码检测卡点（eslint stylelint commitlint unittest）

定义发布规范

形成文档组件

现在团队怎么保证代码质量和研发节奏

- 代码规范

- code review

-unittest jest 覆盖主流程

研发节奏和产品 测试有效沟通在前期把估时顺利交付

敏捷

跨部门沟通

结束：有什么想问我的地方？

加入进来的话，负责什么业务，我提前去了解一下

有什么挑战等着我

对接技术的追求

有没有了解Echarts 或 Antv原理吗？简单说下？

- 合理的数据协议（数据结构 setOptions）

- 针对不同场景需要不同渲染引擎：

canvas：位图，优点：性能更好 webgl  -> skia（chore）缺点：事件交互都需要自己实现（点阵计算）因为没有真实dom节点（缓冲区）

svg：矢量图，任意缩放，canvas优点就是svg的缺点，缺点性能较弱，无法渲染大数据量

对应到可视化场景，选择什么技术？

图形学：

坐标系 直角

样式体系

可视化引擎设计与开发细节？

架构层面分析

数据层处理 渲染层处理  工具层 交互 动画体系  布局系统

你之前的项目工程化规范是怎么定的，你怎么看项目规范化这个问题？

提要：工程化，规范化是为来解决什么问题？

代码风格 文件名字 目录结构 提交规范统一化

目的项目可维护性 一致性 可读性，成员协作

细化：

- 文件结构   

- 代码规范，变量命名，函数，风格统一，eslint9+prettier+stylelint

- 提交规范

- 单词拼写规范

这一切都需要以编译原理作为基础，操作代码，解析代码，eslint parser 转化代码后再对代码进行规范格式化操作

eslint，专门来做语言 js ts vue...的质量检查

eslint首先依然需要构建ast，前端工具链打包构建相关的工具他们没有一个标准，ast标准没有（ast：babel typescript eslint）

eslint规范约定：

- 规范等级：off wran error

- 核心规则：语法检查，变量命名了但是没有用，console没有删除；风格一致性，分号 空格 缩进 换行；实践 evel（重构：编译+js+sandbox） ，原型污染 

- 大量的规范来控制这些代码编写

- eslint+prettier 集成

- ci cd `pnpm lint`

针对编码规范化，你在团队中都有过哪些尝试，ESLint 9有深入实践经验吗？

规范配置 文件配置  语言配置  ignores文件哪些需要检查

请以ESLint作者视角，拆解一下完备的前端代码规范校验与格式化工具架构？

- 核心引擎，eslint初始化 配置加载 文件解析  规则处理

- parser 解析器，转为ast  expree/@typescript-eslint/parser

- rules 规则集

- plugins 插件

- 配置层

整体流程：

开始：代码输入

读取ESLint配置文件

选择适用的解析器（espree 解析js代码   babel parser 解析含有jsx或实验语法代码  typescript parser 解析ts代码）

生成ast

遍历ast节点

应用已配置的规则

节点是否符合规则？

符合 - 继续遍历  不符合报告提示或错误

解析结束

在你们团队沉淀专属eslint规范，通过插件集的沉淀以此来提升团队代码规范？如何编写插件？

- 插件

- 规则rule

- eslint 9使用规范

实例：不让团队成员使用 bamboo 来定义变量名称

- 针对这个规范需求编写一个rule 原理是通过ast （描述语言结构）节点来处理完成

- 将rule进行插件化 提供外部使用

- 将插件引入到eslint配置文件中，使用插件

rules/no-bamboo-vars.js

// 规则的本质是一个对象，约定好的对象
// 插件化体系里，这个对象的属性约束就是我们所说的插件化协议
{
    meta: {
        noBamboovars: "不允许使用baoboo变量"    }, // 插件元信息
    create(context) {
            // babel也是是这个是访问者模式，访问到某一个ast的节点，就进行处理
        Identifier(node) {
            console.log(node)
            if (node.name === 'bamboo') {
                context.report({
                    node,
                    messageId: "noBamboovars",                    
                    data: {
                        name: node.name
                    }
                })
            }
        }
    } // 插件入口，上下文
}

plugins/eslint-plugin-bamboo.js

// 插件的本质是对象，符合插件的基础协议
import { noBamboovars } from 'rules/no-bamboo-vars.js';

export const eslintBambooPlugin = {
    rules: {
        "no-bamboo-vars": noBamboovars
    }
}

eslint.config.js

import { eslintBambooPlugin } from 'plugins/eslint-plugin-bamboo.js' 
export default [
    {
        plugins: {
            bamboo: eslintBambooPlugin  // 插件定义好以后，插件名称就是规则的作用域
        },
        rules: {
            "bamboo/no-bamboo-vars": "error"
        }
    }
]

微前端？核心概念？

基座生命周期，基座只需要关心子应用的：

- 初始化：bootstrap

- 挂载：mount

- 卸载：unmount

注册子应用需要的什么配置？

1、应用名称

2、统一入口（子应用的接入协议：指的就是上面的三个子应用bootstrap mount unmount）

3、路径匹配

// single-spa为例
import { registerApplication, start } from "single-apa";

registerApplication({    name: 'app1',
    app: {
        bootstrap: bootstrap1,
        mount: mount1,
        unmount: unmount1
    },
    activeWhen: ['/app1']
})

start()

webpack5 

Module Federation (umi) 微前端：动态共享单个组件，也可以共享整个应用组成微前端

如果你接下来实现的是低代码、物料平台、统一调度中心等等，远程物料的管理更好

你们低代码平台的物料是怎么管理的，远程物料是怎么加载的，请详细说下核心流程与方案？

插件化设计

webpack eslint vue babel vite，都有插件化的身影，如

{
    plugins: [
        vue(), // 负责vue相关代码
        react(), // 负责react相关代码
        splitChunk() 
    ]
}

- 插件化基座

- 插件化协议

- 插件整个生命周期

- 插件开发

不管物料管理还是通用化的资源管理都可以是插件化管理

所以这些很多的插件组合成了这种低代码平台的物料体系

具体模块化定义

物料首先要取名，Button Image Text Container

物料最重要的两个东西是什么？
- 数据协议，json 数据

// 数据协议
type ButtonBlock = {
    type: 'button',
    props: {
        text: string;
    },
    style: {
        color: string;
    },
    events: {
        
    }
}

- 物料渲染引擎，组件将json数据渲染成页面内容，引擎有点神话简单理解抽离组件，然后对应的组件及物料，放置到 :is去渲染

渲染始终关联两个点：它是什么类型？它是是数据？

有这两个概念我们就需要设计个统一的一个渲染器，Renderer（通过策略模式来负责数据转化加工、数据到组件的传递、组件渲染）

vue <component :is={Button}></component>
react children 插槽

远程物料只有满足数据协议定义和物料引擎的渲染即可

插件化设计在物料管理中的应用

插件化思想可以简单理解和发布订阅，注册规则类似；像vue.use() 的插件化 

看你的简历写了自研低代码远程物料管理基座与页面编排渲染引擎，说说核心实现以及详细技术点？

远程物料

- 发布

1、物料协议统一

2、产物模块化规范

- 构建

- 渲染

pnpm-workspace.yaml

tsup 是一款基于 esbuild 的 TypeScript 库打包工具，无需配置即可使用。

packages

    blocks

       tsup.config.js/ts

vue defineAsyncComponent 可以获取到远程物料来消费

远程物料优化与扩展

缓存优化，本地存储

CDN加速，将远程物料部署到CDN提高加载加速

版本管理，为远程物料添加版本控制v1.2.2，避免兼容问题

存量数据处理？

后端做数据升级；前端和后端共同来去沟通降级兼容方案；想办法在版本控制好，在数据版本和物料版本对应的方案

作为leader说说低代码平台物料体系与编排引擎的核心思路、方案与成果？

基于flex布局引擎方式拖拽鼠标事件；定义标准的数据协议，支持复杂布局描述与动态配置；统一协议布局编排；数据动态更新持久化存储

请说说你之前负责的低代码平台都有哪些功能，具体什么业务，以及核心流程与方案？

优化前：

1、组件的拖拽

2、组件在页面中布局渲染

3、数据表

4、流程编辑

5、资源管理

优化后：

1、物料编排

2、物料渲染引擎

3、数据源管理

4、流程编辑器（负责配置）+流程引擎（负责执行（内存型流程，工作流流程引擎【OA 审批流 自动化批处理】））

5、资源中心（静态资源）

沉淀产物（monorepo packages）：

1、layout-engine-sdk

2、material-renderer

3、online-database（千万行数据渲染 canvas-table）

4、flow-engine（flow-editor、flow-interpretor 执行）

5、resource（大文件上传）

###  layout-engine

基础功能：

引擎分类（grid flex canvas（Figma） block）

### material-renderer

基础功能（渲染方式 设备兼容 主题定制（样式 token / 消费））

### online-database-sdk

canvas table  

表设计（shema（管理字段）业务表（存储字段数据））

外部数据连接

monorepo设计实战，如何实现自定义构建流，怎样通过增量编译与缓存加快构建？

pnpm.workspace.yaml
    packages:
        - 'packages/*'
        - 'apps/*'
packages/
    core
        package.json
            
    hooks
    shared
    ui

// 内部使用
"devDependencices": {
    "@bamboo/core": "workspace:*"
}

统一的依赖管理 版本同步 模块共享 统一工具链 相同代码风格 统一CICD 增量部署

增量构建 构建缓存

turbo turbo.json

$schema  tasks

你负责过项目前期的打包构建流程设计吗？有了解过哪些打包构建方案，请详细说说？

- babel  - tsc  -rollup - tsup - vite - webpack5

tsc: Typescript Compiler

rollup特点

tree-shaking，简化配置，丰富的插件生态，将功能的生态构建交给全世界开发者，框架插件规则制定者

tsup

基于esbuild的打包工具，默认支持ts零配置，性能非常好多格式输出，代码动态导入，代码分割

vite

整合esbuild rollup 按需加载 热更新   生产环境，rollup

webpack

自定义loader 和 plugin

- loading本质函数，转换资源，操作代码转为新代码

     通过babel swc typescript esbuild tsup rollup 处理babel-loader swc-loading ts-loader...

- plugin本质对象（calss new），增强功能，有个apply方法，compiler参数是基于tapable实现的钩子

站在前端leader角度，从原理层面分析常规和新兴构建方案异同，详述rust重构工具链的优势？

表现出新技术的追求

rust驱动工具链：swc  rurbo  oxc 编译速度稳定性超越

性能 单线程瓶颈 内存安全稳定性 社区繁荣

内置支持ts es6+ 现代框架 未来可期

自动化、批处理生成式AI相关业务？流程引擎理解？

自动化、批处理：重复性认为，并且抽象层次比较高，将期望的任务列一个步骤，然后依次执行

流程引擎：自动化管理和执行既定的业务流程，业务流程：自动化处理 批处理 Ai生成详细过程

- 工作流流程建模（编辑器）

- 任务调度

- 继承外部系统 插件化实现流程功能生态

1、约定流程协议JSON（节点 node 定义功能，边 edge 用来约束节点流程）

2、编辑器编排工作流数据

3、开发工作流执行器

TS 7 微软发布用go重写 体验至少提升10%+

项目里执行npx tsc --init 自动生成tsconfig.json配置文件

extends 

- 继承   

- 泛型约束

class UserBlock {}

- 条件类型

type IsString = T extends string ? 'yes' : 'no'

- infer（用来做类型推断）结合，提取bm类型，现在bm后面可能bm1 bm2...

type BambooName = 'hello, bm';

//  提取BambooName中的bm

type ExtractName = T extends `hello, ${infer Name}` ? Name : never

let bmName: ExtractName  // bm

// 从函数中提取参数类型和返回值类型
const say = (a: number) => `${a + 1}`;
type ExtractParamsAndReturn<T> = T extends (...args: infer Params) 
    => infer Return ? [Params, Return] : never

// 定义返回都行
type ExtractParamsAndReturn<T> = T extends (...args: infer Params)
    => infer Return ? { u: Parsms, v: Return } : never

let sayType: ExtractParamsAndReturn<typeof say>;

infer

- 类型提取

interface接口一般情况下用来抽象对象的特征，属性 方法，一种面向对象编程思想

接口可以被继承 实现，type不能（联合 交叉）

可以结合泛型使用

接口可以声明可以合并，type不会

如果想把几个接口合并做个联合实现不了，这个时候就借助type来 ｜联合，type定义类型别名

使用场景：

interface：面向对象 接口继承场景下，优先

**type：**复杂类型，频繁派生新类型，例如类型推到出来新类型，优先

泛型：在使用时才知道类型，解决定义不明确类型的问题

1、函数的参数类型不明确

2、类的属性类型不明确

3、类的方法返回值类型不明确

4、工具类型在做类型处理的时候不明确类型

Nodejs开发过服务端？

架构设计

monorepo架构

分层：

请求、响应（Controller）

服务核心层（Service）

消息机制（kafka flink clickhouse）

缓存（内存 redis）

数据持久化层（Postgresql）

数据中台

结构设计（松散， IoC（依赖注入）  AOP，思想：函数式编程 响应式编程rxjs）

websocket 

打怪升级，连接的时候使用http协议，连接完协商升级协议

upgrade升级协议标志

处理数据帧 帧缓存Buffer处理 标志位

登录安全

身份认证，cookie、jwt、双token、cokie+token、OAuth2

单点登录，oss

巨量数据具体怎么优化？

虚拟表格/列表，首屏渲染数据量非常大

Luckysheet    univer

canvas + 可视区

详细说说webpack5工程化配置细节，常见配置和优化手段？

Vite 对比，bundleless（esm）、webpack bundle工具

模块化支持

构建过程

编译环节（编译时）

优化输出

架构层（钩子函数（hooks），执行时机（执行时函数预埋好），Tapable（tap用于向钩子注册事件处理函数；call用于触发钩子执行；promise用于返回一个promise对象，支持异步钩子；全流程）

webpack使用了Tapable管理插件的钩子；插件在构建过程中通过apply  beforeRun  done等与构建流程进行交互；每个插件可以通过钩子接入到webpack的构建周期中，在构建前、构建中、构建后执行自定义操作。

// webpack.config.js

export default {
    entry: {
        main: "src/index.js"
    }, 单入口
    entry: [], 多入口
    output: {
        filename: "[filename].[contenthash].js",
        clean: true,  === CleanWebpackPlugin 零配置
        environment: {
            arrowFunction: false
        }
    },
    黑盒：编译 转化 优化 压缩，抽象成loader plugin
    loader 本质是个函数 plugin本质是一个类对象
    module: {
        rules: {
            test: /\.js/
            use: {
                loader: "babel-loader"
            }
        }
    },
    plugins: [new HtmlWebpackPlugin({
        template: "./public/index.html"
    })],
    以前，CommonsChunkPlugin，SplitChunksplugih，现在5只需要配置optimization属性
    optimization: {
        压缩 拆分等等
        minimize: false，
        chunks 拆分
        splitChunks
    },
    mode: "development"
}

有没有了解过微内核设计思想？webpack5多loader plugin设计思想是怎样完成个性化打包构建需求的？

loader 本质是个函数   plugin本质是一个类对象，两者都是微内核实际思想的具体落地

webpack5核心执行过程主要包括了以下4个阶段：

1、初始化阶段

创建webpack实例并加载用户的配置文件webpack.config.js

解析配置文件，处理配置中entry output module（模块规则）等配置项

2、编译阶段

初始化时创建一个Compiler实例，负责整个构建过程

处理模块根据entry配置项从入口开始递归处理所有依赖模块

模块解析根据配置详细解析模块路径

3、构建阶段

生成模块，所以模块都被打包成一个个chunk代码块，并输出文件

执行插件钩子，tap emit done afterEmit等

4、输出阶段

生成输出文件，根据output配置生成最终打包文件

执行插件钩子

详细说说vite5工程化配置细节，常见配置优化手段？

bundleless - 少打包，浏览器esm支持

- 模块化规范，commonjs and cmd esm umd

- 浏览器esm拥抱新技术

- 本地生成构建提速，本地esbuild、生产rollup可能会产生与本地构建产物差异问题？（VoidZero - rolldown oxc）

- 产物构建优化，rollup优化

了解微内核设计思想吗？vite5的插件化设计思想是怎样完成个性化打包构建需求的？

- 插件化设计思想（插件化底座：底层的那个调度器叫插件化底座   插件协议，数据协议定义方式 生命周期钩子）

- 自定义插件（config transform transformIndexHtml generateBundle）钩子

vite插件本质是个函数返回，在上面插件钩子操作想做的事情

从零到1实现vite？

bundleless    统一化ast统一工具链描述语言   vite - oxc - rolldown - vitest

打包构成：

1、初始化，vite.config.ts

2、解析入口，两种解析形式（应用构建，html script；子包、构建产物，build）

3、插件底座初始化，插件生命周期调度

4、优化处理

5、拆分

6、输出代码

7、资源优化

const app = express()
// 中间件设计，AOP 面向切面编程
app.use('/*.js', (req, res) => {
    const reqPath = req.path;
    const file = fs.readFileSync(path.resolve(__dirname, `.${reqPath}`), 'utf-8');
    // 很多处理都是在这里来做
    // 编译 插件处理 esbuild做编译 swc做编译 babel 做编译 rollup做编译
    // 产物的处理 产物的压缩  产物的混淆
    res.type('js') // 返回类型js文件
    res.send(file)
})