千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）
1.html5的新特性?
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
用于媒介回放的 video 和 audio 元素
本地离线存储 localstorage 长期存储数据，浏览器关闭后数据不丢失
sessionstorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、 time、email、url、searcho
新的技术webworker,websocket,Geolocation
2.localStorage,sessionStorage 和 cookie的区别
cookie:分为会话周期和长生命周期，大小为4kb，如果使用cookie保存过多数据会带来性能问题。
需要程序员自己封装，原生的cookie接口不友好.
localStorage:除非被清除，否则永远保存，大小5MB， 只在浏览器中保存，不参与和服务器的通信。原生接口可以接受，
sessionStorage：仅在当前页面有效，关闭页面就会被清除， sessionStorage同上
3.重绘（repaint）和回流（reflow）是与网页渲染相关的概念。
重绘指的是当元素的样式属性发生变化时，浏览器会重新绘制这个元素，使其显示出新的样式效果，但并不影响其在文档流中的位置和大小。比如改变元素的背景颜色、文字颜色等。
回流则是指当网页布局发生变化，需要重新计算元素的布局和几何属性时，浏览器会重新执行布局流程，计算新的位置和大小。回流会影响整个文档中其他元素的布局，因此是一种比较耗费性能的操作。常见的会导致回流的操作包括改变元素的尺寸、位置、重排文档结构等。
- 在浏览器渲染过程中，首先进行回流操作来计算元素的布局，然后进行重绘操作来绘制元素的样式，最终呈现在屏幕上。因此，在性能优化方面，我们可以通过减少回流和重绘的次数来提高网页的渲染性能。一些优化的技巧包括：使用 CSS3 的 transform 属性替代改变元素的位置和尺寸，因为 transform 不会引起回流。
- 使用 CSS3 的 opacity 属性来改变元素透明度，而不是使用 display: none 或者 visibility: hidden，避免回流。
- 使用 DocumentFragment 对象在 DOM 树中进行批量操作，减少回流次数。
- 使用离线文档流（例如将要操作的元素脱离文档流，完成后再放回）减少回流的影响范围。
- 合并多次的样式修改，利用样式批处理减少回流次数。
通过避免不必要的回流和重绘，可以有效提高网页的性能和用户体验。
3.介绍路由
路由模式,hash是 vue 路由的默认路由模式,url 带#号 上线之后刷新不会丢失 浏览器兼容性好
history,url 不带#号 上线之后刷新会丢失（需要让后端服务器人员给你配置服务器的重定向） 浏览器兼容性一般
路由守卫就是在路由页面跳转的时候，自动触发的函数，可以用来对项目中的用户权限进行设置
① 全局：所有页面跳转都会触发
全局前置守卫---beforeEach()
在所有路由跳转之前 触发的钩子函数（此时路由还没有跳转完成）
全局后置守卫--- afterEach()
所有路由跳转之后 触发的钩子函数 （此时已经进入到了跳转之后的新页面）
② 路由独享
指定页面在跳转的时候触发
路由独享---beforeEnter
只会对一个路由规则生效（路由独享写在哪个规则之上 就对哪一个生效）
路由是什么？一级和多级路由？路由懒加载？
路由是一个 SPA 单页面应用，传统的页面在跳转的时候可能会造成白屏，影响用户体验，使用路由可以解决这个问题。
<!-- 路由的本质是根据 url 的不同来渲染不同的组件页面
路由分为一级路由和多级路由，一级路由在 views 文件中创建，然后在 router 下的 index.js 中进行相关的路由配置，首先把要使用的组件页面通过懒加载的方式引用进来，然后通过 path 设置路由，name 设置路由规则的名字，最后在 app.vue 中设置路由出口 router-view。多级路由采用 children 关键字来进行配置，多级路由的路由出口写在上一级路由的页面中。 -->
路由懒加载：在需要用到某个模块时才加载 因为路由页面在第一次加载的时候会把所有的路由页面全部加载完毕才显示，有的用户可能网络不好，会导致渲染时间过长，出现白屏问题，为了解决这个问题，所以我们再配置的时候可以采用懒加载的方式
路由导航
路由导航分为声明式导航和编程式导航
声明式导航用 router-link 标签完成页面跳转，里面有个 to 属性就是你要写的路径，使用 router-link 的话自动添加一个类名，我们可以给这个类名设置样式。
编程式导航有三种方法，可以使用 this.$router.push到你要去的路径，push跳转的页面可以来回跳转，还可以使用replace，replace跳转之后不能回退，go正数前进，负数后退
路由重定向--redirect
当我们首次打开路由页面的时候，没有具体的路径，页面这个时候是空白的，为了避免这种情况的发生，我们可以设置一个重定向，当我们打开页面的时候，会自动跳转到我们重定向配置的路由页面中，用户体验更好
404页面
当用户输入网址不小心输错了，会导致无法进入到我们的项目页面，这个时候我们可以设置一个404的页面，给用户一个提示，让用户清晰的知道问题和解决的方式，这样用户体验比较好
路由传参/动态路由匹配
路由传参就是把数据从一个路由页面传递到另一个路由页面，有两种方式，params和query
parmas方式在传递参数的时候总共3步，首先在接收的路由页面规则上配置接收参数，然后使用name作为跳转地址，params来设置发送参数，最后使用this.$route.params 来进行接收
query 方式传递数据总共两步，发送和接收，除了发送数据的时候 query 可以使用 name 也可以使用 path，接收的时候用 query，其他的基本一样
$router和$route 的区别
$router 代表的是路由对象涉及到的全部页面
$route 代表当前路由页面
4.promise
前提:为了让异步代码，变为同步的执行方式
回调地狱，其实就是回调函数嵌套过多导致的
正是因为如此，我们希望改变可能这种写法,将函数嵌套调用的写法，
改成平级写法
解决方案promise
Promise的作用就是将回调地狱的写法，改为平级写法
怎么改?--->不要将回调函数写在主函数的参数位置
Promise的then方法就等价于外界传递的回调函数
f1().then(成功的方法,[失败的方法]);
Promise对象可以通过其他的方式把回调函数f2传进来
参数:是一个回调函数--->因为promise的回调函数等价于一个容器，里面只放异步操作
回调函数的参数:是两个回调函数
success(resText):请求响应成功时执行的方法,正常情况99%都是用来接收响应的
failed:请求响应失败时执行的方法，第二个参数可以省略不写
1.all 和 race
1.异步改成同步的写法--->Promise
2.一个页面的渲染，需要发n个请求,
当所有请求都完成响应后，才能渲染页面--->强调统一接收响应
当首次遇到失败的请求时，promise.all则结束运行
Promise.all([Promise对象1,Promise对象2...]).then(fun);
3.一个页面的渲染，有很多接口都可以请求,
同时发送多个请求，获取相同的响应，谁快获取谁
Promise.race([Promise对象1,Promise对象2...]).then(fun);
