美术宝
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实现路由
- JSON.stringify不支持哪些类型
- 京东广告 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吗
- 箭头函数的this指向
京东数字 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 同构 预渲染
- preload、prefetch、dns-prefetch、preconnect
- 代码质量提升
- 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
- xss跨站点脚本攻击：把带script标签的代码注入到网页中
// 输出结果
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的原型链？
- 函数参数