百度前端面试题

1. webpack优化

webpack的性能优化较多，我们可以对其进行分类：
优化一：打包后的结果，上线时的性能优化。（比如分包处理、减小包体积、CDN服务器等）
优化二：优化打包速度，开发或者构建时优化打包速度。（比如exclude、cache-loader等）

可通过webpack优化前端的手段：
代码压缩（删除多余的代码、注释、简化代码的写法等等⽅式）
HTML文件代码压缩
使用HTMLWebpackPlugin插件来生成HTML的模板时候，通过配置属性minify进行HTML优化。
CSS代码压缩
利⽤ cssnano （css-loader?minimize）来压缩css。
JS代码压缩
利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件。
文件大小压缩
对文件的大小进行压缩，减少http传输过程中宽带的损耗。
图片压缩
Tree Shaking
将代码中永远不会⾛到的⽚段删除掉（消除死代码）。可以通过在启动webpack时追加参数 --optimize-minimize 来实现。
代码分离
代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存。
提取公共第三⽅库
SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码 。

 2. ES6新特性用到了哪些

区别：
声明方式let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明。
箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义。
模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串。
解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值。
... 扩展运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量。
for of 是ES6新增的循环方法。
promise 解决回掉地狱
模块化 import export 导入导出
class类 .....

  箭头函数 this
 
箭头函数中的this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
箭头函数的注意点

如果形参只有一个,则小括号可以省略
函数体如果只有一条语句,则花括号可以省略
箭头函数的this指向声明时所在的作用域下的this值
箭头函数不能作为构造函数实例化
不能使用arguments
箭头函数的特性

箭头函数的this是静态的,始终指向函数声明所在作用域下的this值
不能作为构造实例化对象
不能使用arguments变量

  promise.all()  promise.rise()

Promise.all() 方法接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。返回的 Promise 对象在所有输入的 Promise 对象都变为 fulfilled 状态时被 fulfilled，并且将所有 Promise 对象的结果按顺序以数组形式返回。如果其中任何一个 Promise 对象变为 rejected 状态，则返回的 Promise 对象也会立即变为 rejected 状态，并且该 Promise 对象的结果是第一个变为 rejected 状态的 Promise 对象的错误信息。
Promise.race() 方法接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。返回的 Promise 对象在其中任何一个输入的 Promise 对象变为 fulfilled 或 rejected 状态时立即变为相应的状态，并且将第一个变为 fulfilled 或 rejected 状态的 Promise 对象的结果作为该 Promise 对象的结果。
Promise.race接收的参数和all方法一样. 区别是,race方法只要成功了一个就立刻返回.

 3.  javaScript 的 eventLoop

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

同步任务和异步任务
由于javascript是一门单线程导致后面的任务需要等到前面的任务完成才能执行，如果前面的任务很耗时就会造成后面的任务一直等待。为了解决这个问题，JavaScript 将主线程中的任务分为同步任务和异步任务。
同步任务：是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
异步任务：不进入主线程、通过事件循环机制处理，在任务队列中注册回调函数最终拿到结果。
异步任务又分为宏任务和微任务
常见的宏任务有：
setTimeout,setInterval,DOM事件，ajax请求
常见的微任务：promise的then,async/await，(注意：promise是同步任务)

  4. xss攻击 怎么解决

xss(Cross Site Scripting)，即跨站脚本攻击，是一种常见于web应用程序中的计算机安全漏洞。指的是在用户浏览器上，在渲染DOM树的时候，执行了不可预期的JS脚本，从而发生了安全问题。
XSS就是通过在用户端注入恶意的可运行脚本，若服务端对用户的输入不进行处理，直接将用户的输入输出到浏览器，然后浏览器将会执行用户注入的脚本。 所以XSS攻击的核心就是浏览器渲染DOM的时候将文本信息解析成JS脚本从而引发JS脚本注入，那么XSS攻击的防御手段就是基于浏览器渲染这一步去做防御。只要我们使用HTML编码将浏览器需要渲染的信息编码后，浏览器在渲染DOM元素的时候，会自动解码需要渲染的信息，将上述信息解析成字符串而不是JS脚本，这就是我们防御XSS攻击的核心想法。

预防：
1、获取用户的输入，不用innerHtml,用innerText.
2、对用户的输入进行过滤，如对& < > " ' /等进行转义；

 5.  VVM的VM原理

 6. vue2和vue3的区别

    https://mp.csdn.net/mp_blog/creation/editor/132360370

  7. keepAlive

  8. 路由
路由的本质就是一种对应关系，比如说我们输入我们要访问的URL地址后，浏览器要去请求这个URL地址对应的资源。那么URL地址和真实资源之间就有一种对应关系，就是路由。

  9. 移动端可PC端视图兼容

  手写代码题 1. 扁平化数组

递归方法的方法
function flattten(arr) {
    var result = [];
    for(var i = 0, len = arr.length; i < len; i++) {
        if(Array.isArray(arr[i])) {  //  Array.isArray 判断是否为数组
            result = result.concat(flattten(arr[i]))  // concat() 方法用于连接两个或多个数组。
        } else {
            result.push(arr[i])
        }
    }
    return result;
}

 借用数组的API
function flatten(arr) {
    return arr.reduce((pre, cur) => {
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
    }, []);
}