ajax
1)ajax请求的原理/ 手写一个ajax请求？ 2)readyState？ 3)ajax异步与同步的区别？ 4)ajax传递中文用什么方法？
- 优点：流式写法，简单直观，api少，代码量少，适合多页面应用开发
- 缺点：异常处理麻烦，都是异步操作，很难精细的控制执行顺序
- webpack：webpack是模块化管理和打包工具。通过loader的转换，任何形式的资源都可以视作模块，它可以将很多松散的模块，按照依赖和规则打包成符合生产环境部署的前端资源，它的定位是模块打包器，而grunt和gulp是构建工具
- 优点：可以模块化打包任何资源，适合SPA单页面应用开发，还可以按需加载模块进行代码分割
- 缺点：学习成本高，通过babel编译后js代码打包后体积过大
- rollup 下一代ES6模块化工具，最大的亮点是利用ES6模块化设计，利用tree-shaking生成更简洁、更简单的代码，一般而言，对于应用使用webpack，对于类库使用Rollup。
- 优点：用标准化的es6来写代码，通过tree-shaking来减少体积
- 缺点：对代码拆分、静态资源、CommonJS模块支持不太友好
- parcel 是一个快速，零配置web应用程序打包工具，目前只能用来构建用于运行在浏览器中的网页，这也是他的出发点和专注点。
- 优点：内置了常见场景的构建方案及其依赖，无需再安装各种依赖。能以html为入口，自动检测和打包依赖资源。默认支持模块热替换，真正的开箱即用
- 缺点：不支持SourceMap，不支持剔除无效代码（treeShaking），配置不灵活
2、Loader和Plugin的区别？
Loader（加载器）：Webpack将一切文件视为模块，单Webpack的原生是只能解析js文件，如果想把其它文件打包的话，就会用到Loader，所以Loader的作用是让Webpack拥有了加载和解析非js文件的能力。
Plugin（插件）：Plugin可以扩展Webpack的功能，让Webpack具有更多的灵活性，在Webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在何时的时机通过Webpack提供的API改变输出结果。
3、webpack的构建流程
- 初始化参数：从配置文件和shell语句中读取与合并参数，得出最终的参数。
- 开始编译：用上一步得到的参数初始化
Compiler对象，加载所有配置插件，执行对象的run方法开始执行编译。确定入口，根据配置文件中的entry找出所有的入口文件。 - 编译模块：从入口文件出发，调用所有配置的loader对模块进行编译，再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件都经过了本步骤的处理。
- 完成编译模块：在经过使用Loader翻译完所有的模块后，得到了每个模块被翻译后的最终内容以及他们之间的依赖关系。输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会。
- 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在以上过程中，Webpack在会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。
4、Webpack有哪些常见的Loader和Plugin？他们是解决什么问题的？
Loader：
- babel-loader：把ES6或者React转换成ES5
- css-loader：加载CSS，支持模块化、压缩、文件导入等特性
- eslint-loader：代码检查
- file-loader：输出文件
- url-loader：和fileload类似，但是小文件可以以base64的形式输出
- sass-loader：把sass编译成CSS
- postcss-loader：使用postcss来处理CSS
- css-loader：主要来处理background还有@import这些语法，让webpack能够正确对其路径进行处理
- style-loader：把CSS代码注入到JS中，通过DOM操作来加载CSS
Plugin：
- DefinePlugin：创建一个编译时可配置的全局常量
- HotMoDuleReplacementPlugin：启动模块热替换
- html-webpack-plugin：自动生成带有入口文件引用的index.html
- optimize-css-assets-webpack-plugin：用于优化或者压缩css资源
- ModuleNotFoundPlugin：找不到模块的时候提供一下更详细的上下文信息
- webpack-manifest-plugin：生产资产的显示清单文件
- ModuleScopePlugin：引用了src目录外的文件报警插件
5、source map是什么？上下文环境怎么用？
- source map是为了解决开发代码与实际运行代码不一致是帮助我们debug到原始开发代码的技术
- webpack通过配置可以自动生成source map文件，map文件是一种对应编译文件和源文件的方法
source map的类型：
- source-map：原始代码，最好的source map有完整的结果，但是会很慢
- eval-source-map：原始代码，同样道理，但是最高的质量和最低的性能
- cheap-module-eval-source-map：原始代码（只有行内），但是最高的质量和最低的性能
- cheap-eval-source-map：转换代码（行内），每个模块被eval执行，并且sourcemap作为eval的一个dataurl
- eval：生成代码，每个模块都被eval执行，并且存在@sourceURL，带eval的构建模式能cache SourceMap
- cheap-source-map：转换代码（行内），生成sourcemap没有映射，从loaders生成sourcemap没有被使用
- cheap-module-source-map：原始代码（只有行内）与上面的一样除了每行特点的loader中进行映射
看似配置很多，其实只有五个关键自：eval、source-map、cheap、module和inline的任意组合
关键字及其含义：
- eval：使用eval包裹模块代码
- source-map：生成.map文件
- cheap：不包含列信息和loader的sourcemap
- module：包含loader的sourcemap（比如 jsx to js，babel的sourcemap），否则无法定义源文件
- inline：将.map作为DataURL嵌入，不单独生成.map文件
如何选择source map的类型
首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系，因此，不管是开发还是生产环境都可以选择不包含列信息。
开发环境建议使用：cheap-module-eval-source-map
生成环境使用：cheap-module-source-map
6、如何利用webpack来优化前端性能？
- 压缩js TerserPlugin({})
- 压缩css OptimizeCSSAssetsPlugin({})
- 压缩图片 image-webpack-loader
- 清除无用的css（定义并未使用）：PurgecssPlugin
- Tree Shaking:
- 一个模块有多个方法，只要其中某个方法用到了，则整个文件都会打到bundle里面去，tree shaking就是只把用到的方法打包，没用到的方法会在ugligy阶段去掉。
- 原理是利用ES6模块的特点，只能作为模块顶层语句出现，import的模块名只能是字符串常量。
- webpack默认支持，在.babelrc里设置module:false即可在production mode下默认开启
- Scope Hoisting：
- 可以让webpack打包出来的文件体积更小，运行的更快，它又译为作用域提升，是在webpack3中推出的功能。
- 原理是将所有的模块按照引用顺序放在一个函数作用域里，然后适当地重命名一些变量防止命名冲突，
- 这个功能在node为production下默认开启，开发环境要用webpack.optimize.ModuleConcatenationPlugin
- 代码分割：
- 对于大的web应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被用到。
- webpack有一个功能就是将你的代码库分割成chunks语块，当代码运行到需要他们的时候再进行加载
- 入口点分割：
- Entry Poins：入口文件设置的时候可以配置
- 问题：
- 如果入口chunks之间包含重复的模块（lodash），那些重复的模块都会被引入各自的bundle中。
- 不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码
- 动态倒入和懒加载
- 用户当前需要什么功能就只加载这个功能对应的代码，也就是所谓的按需加载
- 在给单页应用做按需加载优化时，一般采用以下原则
- 对网站功能进行划分，每一个类一个chunk
- 对于首次打开页面需要的功能直接加载，尽快展示给用户，某些依赖大量代码的功能点可以按需加载
- 被分割出去的代码需要一个按需加载的时机
react和vue的比较
相同 1）vitual dom 2）组件化 3）props，单一数据流
不同点 1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作） 2）状态管理（react） 3）对象属性（vue） 4）vue：view——medol之间双向绑定 5）vue：组件之间的通信（props，callback，emit）
