我的笔记

2 阅读2分钟

大文件上传方案

大文件上传核心问题是网络超时和传输不稳定的问题。可以先将大文件分割为5M大小左右的小块,通过并发请求上传,避免单次请求过大,同时为了保障传输的稳定,需要引入断点续传机制,通过文件的MD5作为文件的唯一标识,上传前先拿到服务端已上传成功的文件列表,只上传缺失的部分。同时,需要在上传前校验MD5,如果已经存在了,直接秒传成功。

vite和webpack的区别

Vite 和 Webpack 最核心的区别:

  1. 启动和热更新速度不一样
  • Webpack 是全量打包,启动时要把所有依赖打包成 bundle,项目越大越慢。
  • Vite 在开发环境利用浏览器原生 ES Modules不打包、按需编译,所以启动非常快,热更新也几乎无感。
  1. 底层构建工具不一样
  • Webpack 自己一套完整打包流程。
  • Vite 开发时不打包,生产用 Rollup 打包。
  1. 定位不同
  • Webpack 生态成熟、配置复杂、适合大型复杂项目。
  • Vite 开箱即用、配置简单、现代框架(Vue/React)首选。

Vite 快在开发体验,Webpack 强在生态和兼容性。

性能优化

  • 加载上做图片懒加载、组件和路由懒加载、用 CDN 和缓存
  • 渲染上减少回流重绘,动画用 transform
  • 运行时对高频事件防抖节流,长列表用虚拟列表
  • 构建上用webpack/vite优化构建速度和体积

原型和原型链

每个函数都有prototype属性,这个prototype就是原型对象,每个对象都有__proto__属性,它指向的是创建它的构造函数的原型对象,而这个原型对象的__proto__属性指向的是它自己的原型对象,当查找对象中的某个属性或者方法时,如果查找不到就沿着__proto__向上查找,直到找到或者为null为止

vue组件通信方式

  • 父子组件通信: refpropref prop emit vuex attrsattrs listeners parentprovideinjectparent provide inject children v-model.sync 插槽
  • 隔代通信:vuex provide inject attrsattrs listeners
  • 兄弟通信:vuex

vue3和vue2的区别

  • vue2都是选项式API,vue3都是组合式API,逻辑更加聚合
  • vue2只支持单根节点,vue3可以是多个根节点
  • vue3的setup替代了vue2的beforeCreated和created生命周期,其余周期需要在前面加on
  • vue2相比vue3引入了静态提升和patchFlag,渲染速度更快
  • vue2通过defineProperty实现的, 像对象增加属性、通过下标修改数组长度都是无法监听到的,而vue3通过proxy监听整个对象,弥补了这些缺陷