复习

  1. 首屏优化

    1. SSR
    2. 第三库按需加载，组件按需加载
    3. 骨架图
    4. 路由懒加载，图片懒加载
    5. CDN
    6. 浏览器缓存
      1. 强缓存 Cache-Control: max-age=3600 用GET
      2. 弱缓存（协商缓存） Etag/Last-modified 后端对比，没变化304

  2. 讲一下缓存

    1. keep-alive 组件缓存
    2. 浏览器缓存
      1. 强缓存
      2. 弱缓存（协商缓存）”Tag/时间“ 给后端对比

  3. tree-shaking原理

    1. 按需打包，没用到的代码通通剪掉
    2. 必须要用ES6的import/export
    3. Vue3都是模块，CompositionAPI
    4. 扫所有文件的import
    5. 这样就找得到没用过的代码

  4. TS中的type和interface

    1. type基础类型，String bool number
    2. interface 联合类型/泛类型，常用用于接口或组件接收参数

  5. vue3响应式原理

    1. Proxy里面的get，set监听
    2. 解决了vue2不能监听对象和数组的问题，不用重写数组方法

    ​

小程序相关

  1. 对小程序的理解 + 优缺点
  2. 小程序生命周期
    1. onload 一次
    2. onunload 一次
    3. onshow 每次 显示
    4. onhide 每次 隐藏
    5. onread 渲染完成
  3. 路由跳转
  4. 性能优化
    1. SetData 合并，减少
    2. SetData 避免大量，尽量只修改修改过的内容，对象指定到key
    3. 合理使用if/hidden
    4. 图片懒加载
    5. 分包加载（组件分包，按需加载）
  5. 登录流程（前端不存用户信息，后端存）
    1. 前端拿Code，给后端
    2. 后端用Code，使用WX接口，返回openid和session_key
    3. 后端设置token（自定义），返回前端
    4. 前端用token登录凭证
  6. 发布流程
    1. 开发者工具发布
    2. 上传到微信代码平台（体验版内部测试）
    3. 提交审核
    4. 审核通过（给客户灰度测试）
    5. 上线
  7. 支付
    1. 前端调用后端接口创建订单
    2. 后端使用WX支付接口生成支付信息，返给前端
    3. 前端用 wx.requestPayment 发起支付
    4. 支付成功，前端返回进入支付结果页/订单详情，触发/轮询接口，通过后端调查询结果
  8. 实现原理
    1. 双线程结构
    2. 逻辑层JS，渲染层页面展示，使用SetData通信，实现数据到页面更新
  9. 多端问题：
    1. 小程序虽然统一运行在微信环境中，但底层仍依赖不同系统 WebView 实现，因此仍然会有兼容性问题。
    2. 比如 input 在 iOS 和 Android 上表现不一致，或者 flex 布局在 Android 上出现错位，我一般通过调整样式或者简化布局来解决。

相关复习&猜题

  1. JS怎么实现继承

    1. 原型链继承，设置prototype指向（子类的 prototype 指向父类实例，会引用类型共享，不能传参）
    2. 构造函数，用call/apply实现（拿不到父类 prototype 方法（方法不能复用））
    3. 组合继承，原理：call/apply + new Paren+new Child（属性 + 方法都继承，但父类构造函数执行两次）
    4. Class继承（常用）
    5. 寄生组合继承 call/apply+prototype+Object.create+constructor（最优，是class的原理，父类构造函数执行两次）
     function Parent(name) {
   this.name = name;
 }
 Parent.prototype.say = function () {
   console.log(this.name);
 };
    
 function Child(name) {
   Parent.call(this, name);
 }
    
 Child.prototype = Object.create(Parent.prototype);
 Child.prototype.constructor = Child;

  2. 什么是原型和原型链

    1. 每个函数都是原型 prototype

    2. 每个对象（原型prototype也是对象）有一个__proto__,它指向该函数的构造函数的原型 prototype

      当对象a访问a.name，就是先找自身，没有就通过__proto__向上找，到最后找到的null，这个过程就是原型链

  3. cookie、localstorage、sessionstorage 区别

    1. cookie给服务器用，存储最小4KB，可以设置过期时间。
    2. localstorage持久化本地存储，5M，可跨标签
    3. sessionstorage关页面就没了，5M，不可跨标签

  4. 闭包

    1. 一个函数能够记住并访问它自己和它周围的变量，即使这个函数已经reurn了，这就是闭包
    2. 场景：防抖/节流，缓存/记忆函数，避免重复计算
    3. 闭包会让亦是不被垃圾回收，比如大数量的亦是或定时器要清理。

  5. 说说你理解的浏览器原理

    1. 网络请求：DNS TCP握手 HTTPS要返回加密信息 发送HTTP 服务器响应 浏览器接收

    2. 页面渲染：HTML-DOM树 CSS-CSSDOM 合并 布局 绘制 合成

    3. JS执行：因为是单线程：先同步，微任务(Promise)，宏任务（setTimeout）

    4. 另外 JS 会阻塞 DOM 解析，CSS 会阻塞渲染。

  6. vue组件通信方式有哪些

    1. ok

  7. js判断数据类型有哪些方式

    1. 常用：typeof（查基础），Array.is，instanceof（查原型），Object.prototype.toString.call（类型和原型）

    2. Object.prototype.toString.call（最准确）

    3. constructor（constructor 可以被修改，不安全）

    4. typeof null === ‘object’ 是历史遗留问题

  8. vue3和vue2的区别

    1. 响应式
    2. OptionAPI CompositinoAPI
    3. 组件多根节点
    4. 性能更好，更快

  9. 项目优化具体是怎么做的

    1. 打包优化
      1. build开启压缩
      2. 第三库或组件，按需加载
    2. 渲染优化
      1. 路由懒加载，图片懒加载
      2. 小图转base64
      3. CDN
    3. 请求优化
      1. 节流/防抖
      2. 浏览器缓存
    4. 体验优化
      1. 骨架图
      2. keep-alive 缓存
    5. SSR

  10. 防抖截流优化具体怎么封装的

    1. 防抖和节流我一般会封装成公共工具函数，支持 this、参数透传、立即执行、取消执行这些能力。
    2. 在项目里主要用于搜索输入、按钮点击、滚动监听、resize 这类高频触发场景。
    3. 防抖是”第一次或最后一次说了算”
    4. 节流是”每隔一段时间执行一次”

  11. 深拷贝和浅拷贝区别，具体怎么封装深拷贝

    1. JSON.parse简单暴力，丢失时间，函数
    2. structuredClone（主流）
    3. 递归
    4. 非浏览器环境用 lodash 库