面试总结TODO

美术宝

loader和plugin原理的区别：

1、loader和plugin原理的区别【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。

loader的使用很简单：

在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。

loader是运行在NodeJS中，可以用options对象进行配置。plugin可以为loader带来更多特性。loader可以进行压缩，打包，语言翻译等等。

loader从模板路径解析，npm install node_modules。也可以自定义loader，命名XXX-loader。

语言类的处理器loader：CoffeeScript，TypeScript，ESNext（Bable）,Sass,Less,Stylus。任何开发技术栈都可以使用webpack。

【Plugin】：目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。

webpack原理：从配置文件定义的模块列表开始，处理应用程序，从入口文件开始递归构建一个依赖图，然后将所有模块打包为少量的bundle，通常只有一个，可由浏览器加载。

2、keep-alive原理

缓存：created与destroyed钩子

领创智信

• 小程序为什么性能会比较好
  • 使用native方式渲染
  • 小程序每个视图都是一个独立的webview进程(AppView),逻辑处理的JS代码也全部加载到一个webview里边(AppService)，并且生命周期常驻内存。视图层和逻辑层通过JSBridage进行通信
  • 小程序获取权限的能力更强
  • 初次加载会直接缓存在本地很多东西，不通过网络请求，而是通过本地IO
• webpack如何处理commonjs让加载的模块能在浏览器运行
  • webpack打包后本身是个IIFE，各模块被包装在独立的function中
  • function(module, exports, webpack_require){}
    • 首先定义缓存
    • 定义 webpack_require ，参数为模块id，实现模块require
    • webpack_require 首先检查是否缓存了，如果缓存了直接返回模块的exports
    • 没有缓存，初始化模块，再将模块缓存
    • 调用作为参数的模块函数，将module, exports, webpack_require 作为参数传入
    • 调用完成标记为已加载
    • 再返回模块的exports内容
    • 利用前面的 webpack_require 函数，require第0个模块。
• jsonp如何解决浏览器的限制
  • script标签没有跨域限制
  • 提供一个callback，第三方把数据放在callback里，浏览器执行callback来拿到数据
• vue-directive什么场景用比较好
  • 需要操作dom的时候
• 从业务角度理解单页应用
  • 只请求一次html，剩下的都是本地
• 单页应用为什么对搜索引擎不友好
  • 爬虫找不到javascript的内容
• CRM最核心的是什么功能
• 匿名函数的应用场景
• Vue有什么性能瓶颈
  • 第三方挂载
  • watcher是数组
  • keep-alive
• chrome插件中，从安全角度理解background
  • background和popup是相互独立的
• chrome插件怎么做的
  • 通过content_scripts往页面注入代码
  • 在popup中sendMessage
  • 在background中监听
• 模块加载的几种方式和区别
• axios是怎么封装XMLHttpRequest的，技术选型为什么选axios
  • 兼容性好 能兼容到ie7
  • api友好
  • 可配置拦截
  • 防xsrf 
    设置 xsrfCookieName: 'XSRF-TOKEN' 是用作 xsrf token 的值的cookie的名称。
    axios会让你的每个请求都带一个从cookie中拿到的key，根据浏览器的同源策略，假冒的网站是拿不到cookie中的key的，后台可以因此辨别这个请求是否在用户假冒网站上的舞蹈输入，从而采取正确的策略。
• 大型项目如何管理
• npm和git安装依赖的优缺点
• vuex、event-center有什么不同
• typescript有什么优缺点
  • 团队需要协商
  • 编译需要时间
• 最近想了解什么新技术，打算怎么学
• 58赶集
  • 如果只是个二级组件，那么他的$parent 和 $root是一样的吗
  • 关闭浏览器，会调用vue的destoryed钩子吗 （不会）
• 好未来
  • 自己搭mock的话，需要做什么东西
  • 浏览器输入地址后的过程
• 知乎
  • app.use和app.get的区别
• 高德
• 新东方 2020-01-06 10:00 数据结构
  • JSON.stringify不支持哪些类型
    • undefined
    • function
    • symbol
    • 出现在数组中时，转成null
    • 循环引用会出错
    • NaN、Infinity、null 返回null
    • Set、WeakSet、Map、WeakMap 返回可枚举属性
  • 实现单例模式
    • 在构造函数中直接生成一个实例，检测到new语法的时候，返回当前实例
    • 构造函数中判断构造函数的typeof instance === 'object'
  • 平衡二叉树，返回所有大于5的叶节点
  • webpack和gulp的区别
  • 原生node实现路由
• 京东广告 2020-01-07 10:30
  • 箭头函数的this指向
    • 定义时的this指向
    • 对象定义方法如果用了箭头函数，那么this是全局对象
    • 箭头函数适用于匿名函数 比如定时器等
  • jsonp返回的数据格式
    • jsonp返回约定好的函数包裹json的格式
    • 因为事先定义好了回调函数，jsonp返回的时候直接执行
  • cookie localstorage 同域名不同源，是否可以共享
    • localStorage不行，可以通过postmessage解决 onmessage监听
    • cookie设置好domain、path
  • history路由 webpack做了什么配置
    • webpack-dev-plugin
  • vue优化
  • bind上是否可以带参数 // Todo
  • 宏任务和微任务分别对应哪些
    • setTimeout setInterval setImmediate requestAnimationFrame 宏任务
    • process.nextTick MutationObserver Promise.then catch finally 微任务
  • 组件v-model
    • 子组件props接收value
    • 监听input
  • webpack4更新了什么
    • 零配置 安装webpack-cli
    • --mode development production
    • 去掉了CommonsChunkPlugin，optimization.splitChunks和optimization.runtimeChunk代替
  • 字符串找到出现最多的字符
  • 前端领域新的东西
    • webassembly
    • PWA
    • Flutter
    • Vue3.0
    • serverless
  • 常用的loader、plugin
  • sass-loader能把模块翻译成ast吗
  • webpack为什么要有hash
  • 小程序生命周期
    • onload onshow onready onhide onunload
  • 事件委托
    • 减少事件注册，节省内存
    • 可给动态添加的元素触发
    • 利用的是事件向上冒泡阶段
  • vue的key可以直接用index吗
• 京东数字 2020-01-07 19:00
• 贝壳找房 2020-01-09 10:30
  • vue双向绑定讲明白，为什么要用到window.target
  • websocket参与过压测吗
  • webpack优化
    • 开启多核编译
    • hardSourceWebpackPlugin
    • 集群编译
    • 缓存 hardsource
  • 首屏优化?
    • preload、prefetch、dns-prefetch、preconnect
      • preload 专注当前页面，高优先级加载资源，不阻塞window的onload事件
      • prefetch 空闲时预加载可能用到的资源
      • preconnect http请求前进行dns解析、tls协商、tcp握手等环节
    • 压缩 分割
    • 抽取异步加载组件
    • 组件库按需加载(直接影响大小)
    • dllplugin dllReferencePlugin 打包出dll.js不变的固定模块，只需编译一次
    • 路由懒加载
    • 开启source-map
      • devtool: 'cheap-module-source-map'
    • 独立css文件
      • mini-css-extract-plugin
    • webpack4在production模式下，会自动压缩js，css和html需手动压缩
      • html-webpack-plugin{minify:}
      • optimize-css-assets-webpack-plugin
    • 处理图片
      • url-loader -> file-loader
      • 雪碧图
      • img-webpack-plugin
    • 引两份文件，一份是es6，一份是编译后的es5
    • ssr 同构 预渲染
  • 代码质量提升
    • eslint
    • 编码规范
    • pre-commit
    • 单元测试
  • 效率提升工具
  • vue最佳实践
    • vue分析工具
    • 代码分割，路由懒加载的时候，带上chunkName
    • 验证props
    • v-for 带key
    • 避免直接修改DOM
    • mixins
    • 自带修饰符
      • 表单修饰符 .lazy .number .trim
      • 事件修饰符 .stop .prevent .capture .self .once .passive
      • 按键修饰符 .enter .tab .delete .esc .space .方向
  • websocket node端 还有什么框架
  • 性能信息收集 performance
• 快手 2020-01-13 10:00
  • 实现promise.all
  • [] == true
  • viewport标签
  • domdiff深入
  • 哈希路由和锚点冲突怎么办
  • 实现instanceof
  • 实现new
  • 模块化 commonjs和module的区别
    • commonjs是值的拷贝，模块内部变化不会影响到已经输出的值，ES6模块是值的引用，也不会缓存，模块变了，import加载的值也会变
    • commonjs是运行时加载，模块是对象，先加载整个模块生成一个对象，再从对象上读取方法。ES6是编译时加载，模块不是对象，import是静态命令。在import时可以指定加载某个输出值，而不是加载整个模块
  • cookie有什么属性
  • 安全
    • xss跨站点脚本攻击：把带script标签的代码注入到网页中
      • 转义字符
      • 建白名单：设置HTTP Header中的Content-Security-Policy
    • csrf跨站请求伪造：攻击者构造出一个后端请求地址，诱导用户点击，如果是登录状态，后端就以为是用户在操作
      • GET请求不对数据进行修改
      • 不让第三方网站访问到用户Cookie，可以对Cookie设置SameSite属性
      • 验证Referer，阻止第三方网站请求接口
      • 请求时附带验证信息，比如验证码或者token

// 输出结果
let a = 1

function add(n) {
  return n = n + 1
}

let b = add(a)

function add(n) {
  return n = n + 2
}

const c = add(a)

setTimeout(() => {
  console.log(1)
}, 0)

new Promise((resolve) => {
  console.log(2)
  resolve()
  console.log(3)
}).then((res) => {
  console.log(4)
  return 5
}).then(res => {
  console.log(res)
})
console.log(6)

• 滴滴 2020-01-14 10:00
  • promise如何做业务异常处理
  • function的原型链？
  • 函数参数