面试前准备题

1、call 和 apply的区别
call和apply的作用相同（用于更改this的指向），不同之处在于传参的形式，apply是以数组的形式传递参数的，而call方法的参数可以是任意类型的06612.026+9.

2、transition,animation,transform的区别？
transform是静态属性，主要用来做元素的特殊变形，一旦写到style里以后立刻显示作用，无变化过程。
transition和animation是C3动画属性，transition是过渡动画，在transition动画过程中，如果属性值有了新的变化，则会中断当前的动画执行，并把中断时的属性值提供给新的动画作为起始值来重新计算动画。
animation是关键帧动画，配合@keyfranmes使用，是transition的扩展，可以较精确地控制动画过程中任何一个时间点的属性效果。

3、谈谈你对语义化的了解？
HTML语义化就是让页面的内容结构化，便于浏览器、搜索引擎解析；
去掉或样式丢失的时候能让页面呈现清晰的结构，并且是容易阅读的，使阅读代码的人对网站更容易将网站分块，便于阅读维护理解。
H5中新增加了很多的标签如：<artical><nav><header><footer>等，就是基于语义化设计原则。
语义HTML具有以下特性：用正确的标签做正确的事情。
文字包裹在元素中，用以反映内容、例如：段落包含在<p>元素中；顺序表包含在<ol>元素中。

4、js基本数据类型
]基本数据类型：Undefined、Null、Boolean、Number、String
基本类型值是指简单的数据段，5种基本类型是按值访问的，因为可以操作保存在变量中的实际值
基本类型的值在内存中占据固定大小的空间，被保存在栈内存中。从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本。
不能给基本类型的值添加属性
引用数据类型：Object（data，array，function，object）
引用类型值是指那些可以由多个值构成的对象。js不允许直接访问内存中的位置，也就是不能直接访问操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。
引用类型的值是对象，保存在堆内存中，包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针，指针指向堆内存的地址。从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象。
对于引用类型的值，可以为其添加属性和方法，也可以改变和删除其属性和方法

5、解释下什么是事件代理？
事件委托是利用事件的冒泡原理来实现的，给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）
window.onload = function(){
          　　var oUl = document.getElementById("ul1");
          　　oUl.onclick = function(ev){
            　　　　var ev = ev || window.event;
                　　　　var target = ev.target || ev.srcElement;
            　　　　if(target.nodeName.toLowerCase() == 'li'){
            　 　　　　　　    alert(123);
        　　　　　　　 alert(target.innerHTML);
                　　　　}
          　　}
        }

6、从输入URL到显示网页，后台发生了什么？
DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束
分为4个步骤：

1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

7、谈谈你对this的认识
this是JS中的一个关键字，代表了函数运行时，自动生成的一个内部对象，只能在函数内部使用；
this的指向并不能在创建时就决定了，而是由执行环境决定的。
针对WEB应用，在全局环境下，this就代表了window对象；
对象环境下，函数被对象调用时，this指向该对象；
构造函数环境，this指向它的实例，也就是它的引用

8、请用js实现一个继承
原型链继承，call()/apply()继承，混合继承（call和原型链）、对象冒充

9、哪些操作会造成内存泄漏？
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
dom操作,闭包，循环

10、项目中怎么和后端交互？
在项目的时候，我们前后端会大概说一下接口地址，前端请求的参数，后端返回的参数，然后大家就开始写，写的差不多的时候，大家调一下接口看一下返回的数据，没问题就可以了。

11、vue的nextTick是怎么回事？
vue执行的异步DOM更新操作同一个数据更改 VUE会将watcher推入一个队列中，并且去除重复的更改，在下一个事件循环中去执行实际更改
例如：
执⾏vm.msg="new value"后，执⾏$el的内容输出可以发现，值并没有改变，可以通过nextTick(callback)来监听DOM的实际变化

第二次默写

1、清浮动的方式？
（1）一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。
（2）使用空标签清除浮动
（3）使用空标签清除浮动

2、跨域的方式有哪些？
由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
（1）JSONP
　　这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。
1 <script> 2 var _script = document.createElement('script'); 3 _script.type = "text/javascript"; 4 _script.src = "http://localhost:8888/jsonp?callback=f"; 5 document.head.appendChild(_script); 6 </script>
　　实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。
缺点：
　　1、这种方式无法发送post请求（这里）
　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。
（2）Proxy代理
　　这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
需要注意的是如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。
（3）CORS
　　这是现代浏览器支持跨域资源请求的一种方式。
当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

3、iframe的优缺点？
优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本
   缺点：
4. iframe会阻塞主页面的Onload事件
5. 即时内容为空，加载也需要时间
6. 没有语意

4、请描述一下cookies，sessionStorage和localStorage的区别？　　
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

5、写出5个以上兼容性问题
FLEX,transform,:after伪类选择器，事件对象 scrolltop,clientweigth浏览器窗口宽度

6、CSS3有哪些新特性？

1. CSS3实现圆角（border-radius 、border-image）
2. 对文字加特效（text-shadow、阴影（box-shadow）
   3.动画：animation;transition; transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
   display :　flex;
3. 增加了更多的CSS选择器 多背景 rgba
4. 在CSS3中唯一引入的伪元素是 ::selection.
5. 媒体查询，多栏布局
6. 线性渐变（background-image:linear-gradient）

7、常用的es6的特性有什么？
箭头函数，const， let ，解构，class

8、什么是作用域链？
内部环境可以通过作用域链访问所有的外部环境中的变量对象，但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链，以查询变量和函数名，反之向下则不能。

9、new操作符都干了什么？
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

10、HTTP请求码
200请求成功；304请求缓存数据成功；404代表地址未找到；403没有访问权限（访问被拒绝）；500或以上 服务器内部错误；

11、重绘和回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。样式改变会引起重绘。
浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流，回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。

作者：汪汪
链接：https://www.zhihu.com/question/41466747/answer/132562725
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

12、BFC、
块级格式化上下文(Block Formatting Context)
1.利用BFC可以消除Margin Collapse
2.利用BFC去容纳浮动元素
3.利用BFC阻止文本换行

13、网站如何进行性能优化？
（1）尽量减少HTTP请求（2）使用浏览器缓存（3）使用压缩组件（4）图片、js的预加载（5）脚本放在底部（6）将样式文件放在文件的顶部（7）使用外部的CSS和JS（8）精简代码

14、怎么理解vue组件？
组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

16、vue双向数据绑定的原理
//由于组件实例的作⽤域是独⽴的，意味着不能在组件内直接使⽤⽗级的数据，可通过props将数据传递给⼦组件
v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

17、vue的虚拟dom是怎么理解的？

更新DOM的花费时间非常长
当我们使用 JavaScript 来改变页面的时候，浏览器不得不做一些工作来找到需要的DOM节点，并且做出类似这样的改变：   
document.getElementById('myId').appendChild(myNewNode);
在如今的应用程序的DOM中大概有成千上万的节点，因此更新所花费的时间就更长了。有很多不可避免的很小很频繁的更新拖慢了页面的速度。
我们可以使用 JavaScript 将DOM节点虚拟化表示   
<ul id='myId'>
<li>Item 1</li>
<li>Item 2</li>
<ul>

// Pseudo-code of a DOM node represented as Javascript
Let domNode = {
tag: 'ul'
attributes: { id: 'myId' }
children: [
// where the LI's would go
]
};

这就是我们的“虚拟”DOM。

18、webpack怎么配置，核心特征是什么？
webpack 是前端自动化打包工具
首先建一个webpack.config.js 文件，