哔哩哔哩T2前端实习二面面经

自我介绍
深浅拷贝用过吗？说下怎么浅拷贝
- es6解构赋值、Object.assign或者自己写一个简单的浅拷贝

手写深拷贝，考虑对象属性循环引用的情况

function deepClone(obj, map = new WeakMap()) {
  if (typeof obj !== 'object' || !obj) return obj
  let res = map.get(obj)
  if (res) return res
  res = Array.isArray(obj) ? [] : {}
  map.set(obj, res)
  for (let key of Object.keys(obj)) {
    res[key] = deepClone(obj[key], map)
  }
  return res
}

Promise是什么？
- ES6新语法，为解决回调地狱应运而生，处理异步任务
Promise如何实现的异步？
- Promise内置三种状态，Promise的状态发生改变后，状态就不能再改变了
- 通过在适当的时机调用构造函数中的resolve或者reject方法，修改Promise实例状态，来将then方法中的回调添加的微任务队列中
- 等待主线程中的同步任务执行完后，再执行微任务队列中的函数，达到异步的效果
Promise延迟修改状态，then方法中的回调函数什么时候被添加到微任务队列中？
- then方法中的回调函数，根据当前promise实例的状态决定如何处理
- 如果调用then方法的时候，promise实例状态为pending，这个时候需要将该回调函数暂存起来，在修改该promise实例的状态后，将该回调添加到微任务队列中
- 如果promise实例状态为fulfilled或者rejected，直接将回调函数注册到微任务队列中
跨域怎么解决？
- JSONP、CORS（简单请求和非简单请求）、前端脚手架配置、Nginx反向代理、Websocket（没有同源限制）
vue的vue.config.js如何修改webpack配置？
- vue.config.js向外导出一个对象，对象中有一个叫chainWebpack的方法，接收一个Webpack配置对象作为参数
- 通过这个参数对象修改webpack配置
一般用来修改那些webpack配置？
- 配置splitChunks分包策略，externals忽略公共基础包，采用CDN的方式引入资源等
- 添加loader配置
首屏加载如何优化？
- webpack配置分包，externals，静态资源压缩，静态资源缓存，路由懒加载，图片懒加载，防抖，节流
图片懒加载原理？
- img容器标签设置data-src为真实图片地址，判断图片容器的scrollTop与视图窗口高度clientHeight+窗口滚动过的距离scrollTop的大小关系
- 图片容器出现在可视区，就将其data-src属性赋值给src，加载图片
路由懒加载原理？
- 路由配置懒加载后，需要被懒加载的路由文件被单独打包成一个chunk文件
- 在打包出来的HTML模板中配置该chunk文件为预提取，在浏览器空闲时加载路由文件
- 在切换到对应路由时，通过函数引入预提取的路由文件，实现懒加载

手写节流函数

  function throttle(callback, time = 300) {
        let timer = null
        return function (...args) {
            if (!timer) {
                timer = setTimeout(() => {
                    callback.apply(this, args)
                    timer = null
                }, time)
            }
        }
    }

this指向分哪几类情况？
- 全局环境下调用this（全局对象）
- 函数作为对象方法被调用（指向该对象）
- 通过call、apply和bind方法显式指定this
- 作为构造函数调用（指向创建的对象实例）
箭头函数的this？
- 没有自己的this，继承自最外层普通函数，一但确定无法被修改
为啥用vite，vite好在哪里？
- 对公共依赖库做预构建，启动速度快
- 业务代码通过loader处理后，直接通过浏览器支持的ESModule加载依赖模块
- 打包阶段基于rollup，做了默认的打包优化
场景题，后端给你一万条数据，如何展示？
- 指定一个渲染容器，可以滚动，初始渲染少量数据
- 在滚动这个容器列表的时候，当最后一个元素出现在可视区，再渲染部分数据
- 如果存在大量的DOM操作可以通过文档碎片来批量操作
如果需要保存上一次用户的操作结果，怎么做？
- 通过浏览器本地存储缓存数据，下次访问页面时，判断本地存储有无数据，进而条件渲染
vue的nextTick原理是什么，实际用处？
- vue模拟异步任务的方法，内部通过判断当前执行环境是否支持promise、mutationObserver、setImmediate、setTimeout来实现优雅降级
- 在nextTick的回调函数中可以获取到vue数据更新后的真实DOM
- 在手动操作DOM绘制Echarts图形时用过
vue与jQuery操作DOM最大的不同是什么？
- vue引入的虚拟DOM的概念
vue的diff算法？
项目问题
- 技术选型
- 介绍项目
- 做了多久
- 项目难点
- 怎么上线的（后端同学弄的）
- 做了那些优化
最近在学什么？
反问