拼多多暑期实习前端一面

拼多多暑期实习一面

自我介绍
介绍项目
http1与http2的区别
webpack的loader与plugin区别
webpack如何优化打包配置
webpack的输出产物如何运行
- 立即执行函数，加自定义模块加载机制
webpack的生命周期钩子有哪些
vue和react区别
- 模板语法，一个template，一个jsx，灵活性不同
- 封装程度，vue封装程度更高，内置多个指令和数据双向绑定，react封装度比较低，适合扩展
- diff算法不同
vue2与vue3区别
vue2的diff算法与vue3的diff算法
- vue2：双端比较
- vue3：在原来的基础上引入了最长递增子序列
vue2和3的数据响应式原理
- 数据劫持加发布订阅
- vue2通过Object.definepproperty实现数据劫持
- vue3通过Proxy实现数据劫持
Object.defineropperty的缺陷
- 不能拦截新增元素和数组的部分操作
vue如何确保数组元素响应式化
- 通过函数式编程的思想重写部分数组方法
vuex原理
- vue状态管理插件，通过Vue.mixin全局混入生命周期函数，确保子组件获取vuex实例
- 内部根据传入的配置对象，通过vue构造函数响应式化state中的数据
- 实例上定义dispatch和commit方法，分别用于执行配置对象中actions或者mutations的函数，并注入参数
vue router原理
- vue路由插件，通过Vue.mixin全局混入生命周期函数，确保子组件或者当前路由对象和vuerouter实例
- 定义全局组件,router-link和router-view，router-link基于a标签封装，router-view作为视图分发的出口
- 根据传入的配置对象，确定路由机制，hash路由还是history路由
- 监听hashchange或者popstate事件，监听路由变化，根据路由加载配置对象中的视图组件，并渲染
减少首屏加载时间的手段
路由懒加载怎么配置，原理
如何排查影响首屏加载的因素
页面渲染的大致流程
css的下载是否阻塞dom渲染
- JS会阻塞DOM解析
- CSS会阻塞JS的执行，JS有可能操作样式，需要等待css先下载
- css是否下载并解析也涉及到渲染树的生成
- css会阻塞dom渲染
图片的下载是否阻塞dom渲染
页面渲染的过程
service worker是什么
对象扁平化

//将下列对象扁平化
let entry = {
  a: {
    b: {
      c: {
        ddd: 'a.b.c.ddd',
      },
    },
    d: {
      e: 'a.d.e',
    },
    f: 'a.f',
  },
  b: 'b',
}
//结果
let output = {
  'a.b.c.ddd': 'a.b.c.ddd',
  'a.d.e': 'a.d.e',
  'a.f': 'a.f',
  b: 'b',
}
//实现
function handle(target) {
  let res = {}
  function dfs(obj, prefix) {
    for (let key of Object.keys(obj)) {
      let val = obj[key]
      let temp = prefix ? prefix + '.' + key : key
      if (typeof val === 'object') {
        dfs(val, temp)
      } else {
        res[temp] = val
      }
    }
  }
  dfs(target, '')
  return res
}
console.log(handle(entry))