前端学习计划

Agping
294 阅读19分钟

学习分类

  • JavaScript
  • CSS
  • 框架通识
  • Vue
  • React
  • Webpack
  • Typescript
  • 浏览器 & 网络
  • 小程序
  • 看代码说结果
  • 手撕代码 & 算法
  • 开放题

JavaScript

CSS

框架通识

Vue

  • computed和watch的区别

  • data为什么是个函数，而不是对象

  • watch能监听computed的属性吗

  • vue的响应式原理

  • vue的生命周期

  • mounted拿到数据可以后可以直接获取dom吗

  • nextTick原理

  • vue模板（template）里为什么不能使用多个头结点？

  • vuex为什么同时设计mutation和action？只设计一个行不行？

  • vue2和 vue3 在数据绑定这一块有什么区别？

  • vue挂载和卸载父子组件生命周期钩子执行顺序

  • vue的优化方案（等同于如何编写可读性高、易维护且高性能的vue代码）

  • keep-alive的原理，使用有什么问题？如何解决？

React

  • setState是同步还是异步的

  • fiber的实现原理

  • fiber的时间调度通过哪两个原生api实现的（requestAnimationFrame和requestIdleCallback？？？）

  • React合成事件是如何实现的

  • 使用Redux时需要注意的点

  • 如果Redux没返回新的数据会怎样

  • Redux是如何派发数据的？ connect原理？

  • 什么场景会触发重新渲染（re-render）

  • setState返回一样的引用，render会执行吗

  • useEffect的使用方法？useEffect的return会在什么时候执行？useEffect原理是什么？

  • useMemo和useCallback的区别，它们的实现原理是什么？

  • useEffect、useMemo、useCallback是如何做依赖收集的

  • React Hooks有什么优势和劣势

  • context的实现原理是什么？如何做依赖收集？

  • React的生命周期（React15、React16）

  • PureComponent和Component的区别

  • 如果在map循环中没有设置key值，那么从 A B C D 四个节点变成 B C D三个节点，它会以什么样的方式变化

  • React dom绑定事件和原生事件有什么区别

  • 类组件和纯函数组件的区别

  • Hooks的实现原理

Webpack

  • 为什么webpack打包慢？为什么vite会比webpack快？如果想提高webpack速度，应该怎么做？

  • 说说webpack编译打包的流程

  • 说一下对tree-shaking的了解，对CommonJS和ESM都可以用tree-shaking吗

  • webpack中plugin和laoder的区别，它们的执行时机，以及常用的plugin和loader

  • css-loader的作用是什么？不使用css-loader行不行

Typescript

  • Typescript相较于JavaScript有什么优势和劣势？

  • const func = (a, b) => a + b; 要求编写Typescript，要求a，b参数类型一致，都为number或者都为string

  • 实现ReturnType

  • 实现DeepReadOnly

  • 基于已有类型生成新类型：剔除类型中的width属性

    interface A {
  content: string;
  width: number;
  height: number;
}
复制代码

浏览器 & 网络

小程序

看代码说结果

  • EventLoop

    setTimeout(function() {
	console.log(1);
}, 0);
new Promise(function executor(resolve) {
  	console.log(2);
  	for (var i = 0; i < 10000; i++) {
    		resolve();
  	}
  	console.log(3);
}).then(function() {
  	console.log(4);
});
console.log(5);
复制代码

  • 闭包。说结果，然后分别使用Promise和async改写成每隔1s打印1个数字的形式

    function print(n){
    for(var i = 0;i <n;i++){
        setTimeout(console.log, 1000, i);
    }
}
print(10);
复制代码

  • 作用域

    var a = 20;

function bar() {
  console.log(a);
}

function foo(fn) {
  var a = 10;
  fn();
}

foo(bar);
复制代码

  • 作用域

    function bar() {
  var a = 20;
  return function() {
    console.log(a);
  }
}

var foo = bar();
var a = 10;
foo();  // 20
复制代码

  • 作用域

    var a = 20;

function bar() {
  console.log(a)
  var a = 10;
  console.log(n)
}
bar()
复制代码

  • EventLoop

    const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve(5);
  console.log(2);
}).then((res) => {
  console.log(res);
})

promise.then(() => {
  console.log(3);
})

console.log(4)

setTimeout(() => {
  console.log(6)
})
复制代码

  • EventLoop

    async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2 start');
}

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

async1();

new Promise(function(resolve) {
  console.log('promise1');
  resolve();
}).then(function() {
  console.log('promise2');
}).then(function() {
  console.log('promise3');
});

console.log('script end');
复制代码

  • 原型链

    function foo() {

}

const bar = new foo()

console.log(bar.__proto__)
console.log(bar.__proto__.__proto__)
console.log(bar.__proto__.__proto__.__proto__)
console.log(bar.__proto__.__proto__.__proto__.__proto__)
console.log(foo.prototype)
console.log(foo.prototype.prototype)
console.log(foo.prototype.prototype.prototype)
复制代码

手撕代码 & 算法

  • 手写快排
  • 手写深拷贝
  • 手写节流和防抖
  • 手写call / apply
  • 手写Promise.all / Promise.race / Promise.allSettled
  • 手写限制并发数量
  • 手写括号匹配
  • 手写红包算法（注意均衡分配和浮点数计算精度问题）
  • 数组去重
  • 将奇数排在前面，偶数排在后面。要求时间复杂度O(n)。空间复杂度O(1)（不能用splice）
  • 数组转树结构
  • 解析出URL中所有的部分
  • 实现一个compare函数，比较两个对象是否相同
  • 螺旋矩阵
  • 大数相加
  • 找出出现次数最多的英语单词
  • 节点倒序（将ul.id=list，将ul节点下的10000个li节点倒序。考虑性能。）
  • 实现一个函数计算 "1+12-31+100-93"
  • 判断链表是否有环
  • 手写useReducer
  • 手写useDidMount
  • 手写useDidUpdate，模拟componentDidUpdate
  • 手写usePrevious
  • 爬楼梯
  • 删除单向链表中的某个节点
  • 柯里化
  • 中划线转大写
  • 千位分割
  • 使用es5实现es6的let关键字

开放题

  • Antd栅格布局的实现

  • 劫持所有的a标签，点击时不发生跳转，而是弹出提示框提示即将跳转到某个网址，点击确认则跳转，点击取消则无操作

  • 两个promise，分别实现串行和并行形式，只有两个promise都返回结果时打印success，否则打印fail

  • 长列表的优化方案有哪些？如何设计一个虚拟列表

  • 埋点是如何拦截和上报的

  • 如何实现一个无埋点数据上报

  • 使用hash路由时，怎么能再刷新后时候自动滚动到页面上次的锚点位置？

  • 做过哪些性能优化方面的工作

  • 实现一个多级菜单，菜单层级不定

  • 如何监控和排查内存泄漏问题

  • 模拟实现Java中的sleep函数

  • 使用var模拟实现es6中的let和const

  • 实现一个数组的splice方法（说思路）

  • A页面跳转到B页面，在B页面做的操作传输给A页面的方法

  • Sentry是如何实现错误监控的

  • 将一个GIF绘制到canvas上是否可行？如果可行，说说你的实现方法。

  • 如果让你搭建一个项目，你会使用哪些技术方案进行组合？

  • 如何做技术选型？

  • 手写实现一个图片懒加载

    1、到指定高度加载图片

    2、考虑重排和重绘

    3、考虑性能

    4、先加载缩略图，再加载完整的图

    5、注意图片加载容错情况

  • 编写一个函数，传入一个promise和数字n，n(s)内promise没有返回结果，直接reject

  • 了解SSR吗

  • 说一下深拷贝要注意的点

  • 前端发展方向设想

  • 如何设计一个类似于elementui这样的可以单包发布，也可以多包发布的框架

  • 如果让你设计一个单测框架，你怎么设计？

  • 如何实现模块懒加载？import语法是如何做的

  • 如何设计一个单点登录方案？

  • 用过哪些设计模式？分别说说它们的使用场景和应用案例？你觉得使用设计模式给你带来了什么好处？

  • 从A页面跳转到B页面，再返回A页面时，如何让A页面保持上一次的状态

  • 了解Vue3和React18吗

  • Nginx和node中间件代理的区别

  • Node中间件主要是解决什么问题

  • 说一下你做过的最有收获的项目。描述一下系统所承载的功能、目标以及这个系统能解决什么问题？

  • 你怎么看待Typescript中大量存在any的现象？面对这样的场景你将有什么样的想法和行动？

avatar
文章
阅读
粉丝