杭州阿里-瓴羊校招一面

2023-03-02 18:00

自我介绍
为什么选择前端
前两段实习经历讲述
讲述下 message 组件开发过程
- 遇到了哪些问题
- 自定义出现位置
- 解决思路？
upd 项目为什么选择 mobx
redux mobx 区别
- redux
  - 初始阶段，调用一次 reducer，传入的 state 作为初始 state，并创建好 store 更新阶段，调用 dispatch 把一个 action 发送到 store 中。 store 用之前的 state 和 action 中的数据再一次调用 reducer，并返回新的 state store 再去通知所有订阅过的 UI，UI 组件检查它们需要的 state 部分是否被更新发现数据被更新的每个 UI 组件强制使用新数据重新渲染，紧接着更新网页
  - immutable Redux 要求我们不能更改原操作对象，而是需要再原来状态的基础上返回一个新的状态对象
  - 函数式编程纯函数无副作用
- mobx
  - 触发 actions，更改 state 的值，然后 Mobx 更改 state 的副作用就是更新 UI 看似比 Redux 的要简单很多，其实是 MobX 在背后默默的帮我们实现了
  - mutable 可以直接更改状态，继而更改视图数据
  - 面向对象编程一个 store 就是一个对象
tsx 是如何编译成 js 的
webpack 性能优化
- 优化 loader 配置
- test、include、exclude 三个配置项来缩⼩ loader 的处理范围
- 压缩
- tree shaking
- 代码分割 code Splitting splitChunks
- Dll 动态链接库，其实就是做缓存
- Happy Pack 将任务分给多个⼦进程去并发执⾏，⼦进程处理完后再将结果发送给主进程
组件库
- CI/CD
- 自动化发包
- monorepo
- preset 预设
从输入一个 url 到渲染出页面发生了什么
- 判断 URL 是否合法
- dns => 域名解析为 ip 地址
- 建立客户端与服务端连接
- 客户端发送请求服务端响应返回资源
- 服务端如何知道返给客户端什么资源 Header 字段？
  - content-type？
  - csdn 文章
- 缓存强缓存和协商缓存
- 浏览器如何知道解析哪些资源
  - 掘金
- 这个过程中有哪些可以优化的地方 => SSR? 图片懒加载
css 和 js 的执行时机
- css 和 html 是并行加载
- js
  - async会和html一起解析不是顺次执行js脚本
  - defer会等html全部解析完后才会执行js代码顺次执行js脚本

算法

[DOM] 写一段代码使得点击页面的任意 div 标签时都能弹出当前时间戳

document.querySelectorAll('div').forEach(item => {
  item.addEventListener('click', () => {
    alert(Date())
  })
})

2.请实现一个 EventBus 模块，可以实现自定义事件的订阅、触发、移除功能，功能如下所示

const eventBus = new EventBus();

function handleSleep1(){
 console.log('sleep1');
}

function handleSleep2(){
 console.log('sleep2');
}

function handleSleep3(){
 console.log('sleep3');
}

// 一堆监听
eventBus.on('sleep', handleSleep1);
eventBus.on('sleep', handleSleep2);
eventBus.on('sleep', handleSleep1);
eventBus.on('sleep', handleSleep3);
// 取消一个
eventBus.off('sleep', handleSleep3);
// 触发
eventBus.emit('sleep');

// 预期正确输出是（重复监听不生效、按监听顺序执行、取消的不生效）
// sleep1
// sleep2

// 全部取消
eventBus.off('sleep');
// 触发
eventBus.emit('sleep');
// 预期的正确输出是：没有输出


class EventBus {

  this.map = new Map()

  this.on = function(name, fun) {
    if (this.map.has(name)) {
      !map[name].include(fun) && map[name].push(fun)
    } else {
      map.set(name, [fun])
    }
  }

  this.off = function(name, fun = null) {
    if(fun === null) {
      this.map.delete(name)
    } else {
      let i
      this.map[name].forEach((fn, index) => {
        fn === fun && i = index
      })
      this.map[name].slice(0, i)
    }
  }

  this.emit = function(name) {
    this.map[name].forEach(fn => fn())
  }
}

反问

react+webpack
数字营销平台 toB
10/8/5

杭州 阿里-瓴羊 校招 一面 ​

算法 ​

反问 ​

杭州阿里-瓴羊校招一面

算法

反问