- es6的新特性
const let
模板字符串
箭头函数
函数的参数默认值
对象和数组解构
for...of 和 for...in
- 原型链和作用域链的区别
（1）原型链
当访问一个对象的某个属性时，会先在这个对象本身的属性上找，如果没有找到，会去这个属性的__proto__属性上找，
即这个构造函数的prototype，如果还没找到，就会继续在__proto__上查找，直到最顶层，找不到即为undefined。
这样一层一层往上找，彷佛是一条链子串起来，所以叫做原型链。
（2）作用域链
变量取值会到创建这个变量的函数的作用域中取值，如果找不到，就会向上级作用域去查，直到查到全局作用域，
这么一个查找过程形成的链条就叫做作用域链。
（3）区别
作用域是对变量而言，原型链是对于对象的属性而言
作用域链的顶层是window，原型链的顶层是Object
- 栈和堆的区别
1、堆
动态分配内存，内存大小不一，也不会自动释放
2、栈
自动分配相对固定大小的内存空间，并由系统自动释放
3、基本类型都是存储在栈中，每种类型的数据占用的空间的大小是确定的，并由系统自动分配和释放。内存可以及时回收。
4、引用类型的数据都是存储在堆中。准确说是栈中会存储这些数据的地址指针，并指向堆中的具体数据。
- new操作符到底到了什么
（1）var obj = new Fun() 做了三件事
var obj = {}
obj.__proto__ = Fun.prototype
Fun.call(obj)
（2）实现一个new
function _new(fn, ...arg) {
const obj = Object.create(fn.prototype);
const ret = fn.apply(obj, arg);
return ret instanceof Object ? ret : obj;
}
- promise、async有什么区别
1、什么是Async/Await
async/await是写异步代码的新方式，使用的方式看起来像同步
async/await是基于Promise实现的，它不能用于普通的回调函数。
2、什么是promise
为了解决异步嵌套而产生，让代码更易于理解
区别：async/await让代码更像同步，进一步优化了代码
- bind、call、apply的区别
var a = {
user:"程序猿",
fn: function(arg1, arg2) {
console.log(this.user)
console.log(arg1+ arg2)
}
}
var b = a.fn
1、bind
var c = b.bind(a)
c(1,1)
2、apply
b.apply(a, [1, 1])
第一个参数是this指向的新环境
第二个参数是要传递给新环境的参数
注意： 第一个参数为null时表示指向window
3、call
b.call(a, 1, 1)
第一个参数是this指向的新环境
第二、三...个参数是传递给新环境的参数
注意： 第一个参数为null时表示指向window
小结： bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向。
- 说说你对promise的了解
（1）promise是为解决异步处理回调金字塔问题而产生的
（2）有三种状态，pengding、resolve、reject，状态一旦决定就不会改变
（3）then接收resolve()，catch接收reject()
- 对this的理解
1、单独使用，this表示全局对象
2、在函数中，this表示全局对象
3、在对象的一个函数方法中，this表示这个对象
4、可以通过apply、bind来更改this的指向
ps： this永远指向的是最后调用它的对象，仅当它在对象的一个函数方法中时会有差异
- for..in 和 object.keys的区别
Object.keys不会遍历继承的原型属性
for...in 会遍历继承的原型属性
- key主要是解决哪一类的问题，为什么不建议用索引
（1）key的作用主要是为了高效的更新虚拟DOM
（2）当以index为key值时，如果数组长度发生变化，会导致key的变化，比如删除其中某一项，那么index会相应变化。
所以用index作为key和不加index没有什么区别，都不能提升性能。一般用每项数据的唯一值来作为key，就算数组长度变化，
也不会影响到这个key
- vuex的核心概念
state => 基本数据
getters => 从基本数据派生的数据
mutations => 修改数据，同步
actions => 修改数据，异步
modules => 模块化Vuex
- vue-router如何实现路由懒加载（ 动态加载路由 ）
（1）vue异步组件
vue异步组件技术 ==== 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'],resolve)
}
（2）es提案的import()
组件懒加载方案二 路由懒加载(使用import)
const Home = () => import( '@/components/home')
const Index = () => import( '@/components/index')
{
path: '/index',
component: Index
}, {
path: '/home',
component: Home
}
（3）webpack的require,ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}
- vue如何优化首屏加载速度？
（1）按需加载组件，不一次性加载所有组件
（2）减少打包js，如果打包后的js文件过大，会阻塞加载。如下：A、在index.html文件中：
<script src="/static/common/js/vue.min.js"></script>
B、在vue.config.js文件中配置:
config.externals({
vue: 'Vue',
})
配置两个步骤，不打包vue
（3）关闭sourcemap，开启压缩代码
vue.config.js文件中配置：productionSourceMap: false,
（4）加个好看的loading效果
- 响应式系统的基本原理
1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，
视图跟着变化，视图变化，数据也随之发生改变
2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法
- 批量异步更新策略及 nextTick 原理？
（1）批量异步策略
Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
（2）nextTick
在下一次DOM更新循环结束之后执行延迟回调
- Vue的生命周期以及钩子函数
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，
这就是一个组件所谓的生命周期。
beforeCreate （使用频率低）
* 在实例创建以前调用
* 没有实例化，数据访问不到
created （使用频率高）
* 实例被创建完成后调用
* 能拿到数据
* 能修改数据，
* 可以在这个钩子函数里发请求，访问后端接口拿数据
beforeMount
* 真实的dom节点挂载到页面之前
* 编译模板已经结束，虚拟dom已经存在，
* 可以访问数据，也可以更改数据
mounted（挂载）
* 真实的dom节点挂载到页面以后
* 可以访问和更改数据
beforeUpdate
* 修改之前调用
updated
* 修改之后调用
beforeDestroy
* 实例卸载以前调用，可以清理非vue资源,防止内存泄露
destroyed
* 组件销毁之后触发
- 从输入url到显示页面，都经历了什么
1.在浏览器的地址栏输入url地址，
2.浏览器会在浏览器缓存，系统缓存，路由缓存里查看，如果有数据就显示在页面上，如果没有，就继续第三步。
3.在发起http请求前，需要域名解析，解析获取ip地址。
4.浏览器向服务器发起tcp请求(传输控制协议)，与浏览器建立tcp三次握手
5.握手成功后，浏览器向服务器发起http请求，请求数据包。
6.服务器处理请求，发送数据给浏览器。
7.浏览器收到http响应。
8.读取页面数据，浏览器渲染，解析html源码。
9.生成DOM树，解析css样式，js交互。
10.客户端和服务器交互。
11.ajax查询。
- cookies sessionStorage和localstorage区别
（1）cookie：能存储内容较小，在4k左右，一般用作保存用户登录状态、记住密码，记住账号使用。不清除的话会一直存在，
可以设置过期时间自动清除，设置的时候可以设置在不同的域下面。每次在和服务端交互都会放在header里面，所以若是储存
太多会影响性能。
（2）localStorage：HTML5 标准中新加入的技术，可保存内容在5M左右，不会自动清除，除非手动进行删除。
（3）sessionStorage：和localStorage类似，他们唯一区别就是sessionStorage保存在当前会话中，会话结束sessionStorage
失效。会话一般是在关闭页面或者关闭浏览器失效。
- 前端怎么解决跨域
1. JSONP跨域【目前已基本不用了】
2. CORS跨域
后端修改请求头
header(‘Access-Control-Allow-Origin:*’);允许访问的网址
header(‘Access-Control-Allow-Method:POST,GET’);允许访问的方式
3. nginx反向代理
www.baidu.com/index.html需要调用www.sina.com/server.php,可以写一个接口www.baidu.com/server.php,由这个接口
在后端去调用www.sina.com/server.php并拿到返回值，然后再返回给index.html
- html5有哪些新特性、移除了那些元素？
（1）新增特性
a、新增标签
article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、
footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、
source、summary、time、track、video
其中常用标签：article、aside、audio、video、canvas、footer、header、nav、section
b、新增localStorage、sessionStorage
c、新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑）
d、Geolocation 地理定位
（2）移除特性 <basefont> 默认字体，不设置字体，以此渲染，<font> 字体标签，<center> 水平居中，
<u> 下划线，<big> 大字体 <strike> 中横线，<tt> 文本等宽
- 阐述清楚浮动的几种方式（常见问题）
1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，
margin/padding也不能正常显示
2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container">
<div class="left">left浮动</div>
<div class="right">right浮动</div>
<div style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
content: ' ';
display: block;
clear: both;
}
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
- 移动端适配1px问题
1. 在ios8+中当devicePixelRatio=2的时候使用0.5px
<body>
<div id="main" style="border: 1px solid #000000;"></div>
</body>
<script type="text/javascript">
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var main = document.getElementById('main');
main.style.border = '.5px solid #000000';
}
</script>
2. border-image使用的背景图片
.border-image-1px {
border-width: 1px 0px;
-webkit-border-image: url(border.png) 2 0 stretch;
border-image: url(border.png) 2 0 stretch;
}
3. viewport和rem结合
viewport结合rem解决像素比问题
比如在devicePixelRatio=2设置meta
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio=3设置meta
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333,
minimum-scale=0.3333333333333333, user-scalable=no">
- css3有哪些新特性
新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url（bt_blue.png） 0 10;
旋转 transform: rotate（20deg）；
倾斜 transform: skew（150deg, -10deg）；
位移 transform:translate（20px, 20px）；
缩放 transform: scale（。5）；
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
