前端面试题目总结(1)

1.数组的扁平化处理？
数组的扁平化就是把多维数组转化为一维数组。
实现的方式：
1）ES6新增的flat方法
let arr = [1,3,4,[7,5,[55,66,2]],555]
arr.flat()
(7) [1, 3, 4, 7, 5, Array(3), 555]
flat()默认参数为1，默认展开一层数组，若是想要完全展开，则需要传入参数Infinity
arr.flat(Infinity)
(9) [1, 3, 4, 7, 5, 55, 66, 2, 555]
2）reduce方式实现
3）层层递归实现
2.谈谈对于虚拟dom的理解
虚拟dom是为了解决浏览器的性能问题而出现的。
虚拟dom与真实dom的节点对一一对应的。虚拟dom不会立即去操作dom，而是将更新的diff内容保存在本地的一个JS对象中，最终一次性attch到DOM树上，再进行后续操作，避免大量的无效计算。（页面更新可以全部反应到JS对象（虚拟dom）上，等更新完成之后，再将最终的JS对象映射成真实的DOM,交于浏览器去绘制）
虚拟DOM的优点：性能提升 跨端
3.对于路由的两种模式理解？
前端路由有两种模式：hash 和 history
hash模式：#拼接在真实的url之后，当#后边的路径发生变化的时候，浏览器不会进行重新请求，而是触发hashchange事件。
优点：浏览器兼容性好
缺点：路径不美观
history模式：允许开发者直接更改前端路由，更新浏览器地址而不重新发起请求
优点：路径正规
却段：兼容性不如hash，且需要服务端支持，否则一刷新界面就404
4.用户未登录，直接在地址栏访问路由，会如何？
用户未登录，直接访问路由信息，通过路由守卫 直接跳转至登录界面。
通过token去判断用户的登录态，进行路由守卫
token一般是用户登录成功之后，服务端将用户名，密码加密之后得到的字符串
token在客户端的存储：
cookie:自动发送，不能跨域
sessionStorage:每次调用接口，将token放在HTTP请求头的Authorization字段中
localStorage:每次调用接口，将token当成一个字段传给后台
若是未登录在sessionStorage中添加token字段，访问路由信息，可以看到静态界面，但是访问不到数据，那么就需要后端提供标识。
5.跨域问题怎么处理？
跨域：违反了浏览器的同源策略
当协议，端口号，域名不同，则会引起跨域问题
解决方案：cors(Access-Contorl-Allow-Origin:*) JSONP(仅支持get方法）
6.在项目中实施的性能优化的点有哪些？
代码层面的优化：
1）v-if和v-show区分使用场景
v-if：真正的条件渲染，会进行组件的销毁与重建
v-show:通过样式display:none控制显隐
2）computed和watch区分场景使用
computed:计算属性，依赖其他属性值(多入单出),有缓存，只有依赖的属性值发生改变，下一次获取才会重新计算。
watch:监听回调。必须与data中定义的属性一致(单入多出),每次监听的数据发生变化时，都会执行回调进行后续操作
3）v-for遍历必须添加key属性，且避免同时使用v-if
4) 长列表性能优化：vue通过Object.defineProperty对数据进行劫持，来实现视图响应数据的变化，有时候用的组件就是纯粹的数据展示，不会改变的情况下，可以通过Object.freeze()来冻结一个对象。
5）时间的销毁：对于手动添加的addEventListener方式添加的不会自动销毁，需要手动进行销毁，以免造成内存泄漏。
6）图片资源懒加载
7）路由懒加载
8）第三方插件按需引入
webpack层面的优化
1）webpack对图片进行压缩:vue项目中可以在webpack.base.conf.js中url-loader中设置limit大小对图片进行处理，小的转化为base64处理。其余的不操作，请求资源时，会比较慢，可以通过image-webpack-loader进行压缩。
2）提取公共代码
3）提取组件公共css
Web技术优化
1）开启gzip压缩
2）浏览器缓存(HTTP缓存：强制缓存，协议缓存)