2019前端面试常问

客官°小女子只卖身不卖艺 2021-11-04 21:20 443阅读 0赞

面试项目简介：

Vue:hash（散列算法）DOM Diff算法（React）  
Node.js  
[https://www.cnblogs.com/DCL1314/p/7903085.html][https_www.cnblogs.com_DCL1314_p_7903085.html]  
路由传参：  
[https://www.jianshu.com/p/4debd60d3187\#!/xh][https_www.jianshu.com_p_4debd60d3187_xh]  
一、直接在路由中写参数  
二、通过prams传参  
三、通过query传参  
Vue数据双向绑定:  
[https://www.cnblogs.com/alongup/p/9022180.html][https_www.cnblogs.com_alongup_p_9022180.html]  
如果要实现数据绑定,需要将数据设置对象的set,get方法属性,这样当数据发生变化的时候,会执行set函数,在set函数中,重新渲染页面。  
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.1）数据劫持、vue是通过Object.defineProperty()来实现数据劫持，其中会有getter()和setter方法；当读取属性值时，就会触发getter()方法，在view中如果数据发生了变化，就会通  
过Object.defineProperty( )对属性设置一个setter函数，当数据改变了就会来触发这个函数；

4、什么是Promise?  
Promise可以帮助我们更好地处理异步操作，resolve（请求成功回调函数）和reject（请求失败回调函数）

面试必问：

// vue中可以给组件添加生命周期函数(钩子函数),分别在组件的各个周期阶段执行  
// 当组件创建完毕并渲染完毕时调用,可以通过this操作当前组件对象, 当组件创建完毕时调用(未渲染),当组件被销毁时调用,当data发生变化时导致组件需要重新渲染时调用

1．Doctype作用？标准模式与兼容模式各有什么区别?

（1）<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
    	DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
    （2）标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

3.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;  
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;  
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;  
6.Label的作用是什么？是怎么用的？

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

10.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；
    （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
    （3）区  别： IE的content部分把 border 和 padding计算了进去;

Es6新语法：[https://www.jianshu.com/p/ac1787f6c50f][https_www.jianshu.com_p_ac1787f6c50f]  
[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513]

1.  不一样的变量声明：const和let  
    ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部）  
    let和var声明的区别：  
    let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了：  
    如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行：  
    2.模板字符串  
    在ES6之前，我们往往这么处理模板字符串：  
    通过“\\”和“+”来构建模板
2.  基本的字符串格式化。将表达式嵌入字符串中进行拼接。用$\{\}来界定；
3.  ES6反引号(\`\`)直接搞定；

3.箭头函数（Arrow Functions）  
ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体；  
箭头函数最直观的三个特点。  
• 不需要 function 关键字来创建函数  
• 省略 return 关键字  
• 继承当前上下文的 this 关键字  
细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略\{\} 和 return；  
4. 函数的参数默认值  
5.Spread / Rest 操作符  
Spread / Rest 操作符指的是 …，具体是 Spread 还是 Rest 需要看上下文语境。  
当被用于迭代器中时，它是一个 Spread 操作符：  
当被用于函数传参时，是一个 Rest 操作符  
6.二进制和八进制字面量  
ES6 支持二进制和八进制的字面量，通过在数字前面添加 0o 或者0O 即可将其转换为八进制值：  
7.对象和数组解构  
8.对象超类  
ES6 允许在对象中使用 super 方法：  
9.for…of 和 for…in  
for…of 用于遍历一个迭代器，如数组：  
for…in 用来遍历对象中的属性  
10.ES6中的类  
ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。  
H5新特性：[https://www.jianshu.com/p/cddb84a31bfa][https_www.jianshu.com_p_cddb84a31bfa]  
新的特殊内容  
• 增加的标签及描述

\-----------定义页面独立的内容区域。  \------------定义页面的侧边栏内容。 \---------------允许您设置一段文本，使其脱离其父元素的文本方向设置。 ------定义命令按钮，比如单选按钮、复选框或按钮 ----------用于描述文档或文档某个部分的细节 -----------定义对话框，比如提示框 --------标签包含 details 元素的标题  \-------------规定独立的流内容（图像、图表、照片、代码等等）。  \--------定义  元素的标题  \-------------定义 section 或 document 的页脚。  \----------定义了文档的头部区域  \-------------定义带有记号的文本。 ------------定义度量衡。仅用于已知最大和最小值的度量。  \---------------定义导航链接的部分。 ---------定义任何类型的任务的进度。 \---------------定义 ruby 注释（中文注音或字符）。  \------------------定义字符（中文注音或字符）的解释或发音。  \-----------------在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 \-----------定义文档中的节（section、区段）。 \---------------定义日期或时间。 \----------------规定在文本中的何处适合添加换行符。 • 修改或删除的：hr（直线，语义化变为分割线）、small（表示文字小，语义化变为附属细则）、strong（加粗，语义化变为重点强调）、font被删除、big被删除、 新的表单控件 传统的表单元素：form 、label 、input（text、radio、chickbox、button、submit、reset、password、hidden、file...） 给input的type新属性：calendar（日历）、date（日期）、time（时间）、email（邮箱地址）、url、search、color（调色板）、tel（电话号码）、range（范围）、number（数字）。。。 表单的新属性 autocomplete（自动补全） autofocus（自动获取焦点） list （规定输入域的 datalist。datalist 是输入域的选项列表） min、max 和 step 属性（input 类型规定限定） multiple（email 和 file可选择多个值） pattern（规定用于验证 input 的正则） placeholder（描述输入域所期待的值） 用于媒介|播放的 video 和 audio 元素 video 视频（安卓手机兼容性有问题：表现在全屏、自动播放等） 方法和属性地址 1. 内部会议弹幕控制（用的flash） audio 音频（微信自动播放需要使用自己的API启动） 方法和属性地址 音频项目地址 对本地离线存储的更好的支持 localStorage（持久计划储存在本地） localStorage存在大小限制，一般情况下5MB localStorage没有过期时间，除非人为删除 方法 （1）localStorage.setItem('id',id); （2）localStorage.getItem('id'); （3）localStorage.removeItem('id'); （4）localStorage.clear()//删除所有信息 4.一般用于存储不重要的信息，做页面之间的通信（A页面传给B页面值） sessionStorage（回话存储：当前页面关闭，存储的sessionStorage就清除） sessionStorage和localStorage除了存储的时间不同，其他不存在区别 关闭页面就清空，但是移动端跳转页面，又返回存储信息还存在。 本地存储存在同源策略。 加密一般使用MD5、sdk.js 用于绘画的 canvas 元素 例1：用户上传图片 例2：生成海报

1.CSS3有哪些新特性？

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

74.对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

2.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？  
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。  
绘画 canvas;  
用于媒介回放的 video 和 audio 元素;  
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;  
sessionStorage 的数据在浏览器关闭后自动删除;  
语意化更好的内容元素，比如 article、footer、header、nav、section;  
表单控件，calendar、date、time、email、url、search;  
新的技术webworker, websocket, Geolocation;

移除的元素：  
纯表现的元素：basefont，big，center，font, s，strike，tt，u;  
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：  
IE8/IE7/IE6支持通过document.createElement方法产生的标签，  
可以利用这一特性让这些浏览器支持HTML5新标签，  
浏览器支持新标签后，还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim;

如何区分HTML5： DOCTYPE声明\\新增的结构元素\\功能元素

6.什么是响应式设计？  
低成本实现一套代码一个网页在多终端多设备下访问达到一定用户体验的开发方式。其布局会根据终端情况自适应调整达到一定水平的用户体验。

Css新特性  
9.CSS3新增伪类有那些？  
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。  
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。  
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。  
p:only-child 选择属于其父元素的唯一子元素的每个

元素。  
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。  
:enabled、:disabled 控制表单控件的禁用状态。  
:checked，单选框或复选框被选中。

Vue  
Vue布局原理:  
在vue框架中,组件(componet)是基本的开发单位,一个页面可以由若干个组件组成,整个页面也可以作为一个组件

Vue组件传值:

Vue数据双向绑定:  
如果要实现数据绑定,需要将数据设置对象的set,get方法属性,这样当数据发生变化的时候,会执行set函数,在set函数中,重新渲染页面。

在数据渲染时使用prop渲染数据，将prop绑定到子组件的数据上，修改数据时更新自身数据，来替代prop,watch子组件自身数据的改变，触发事件通知父组件更改绑定到prop的数据

// v-model=“xxx” 指令 相当于:value=“xxx” 加上@input=“xxx=arguments\[0\]”  
// 1.如果一个组件中使用v-model进行数据双向绑定,那么它的组件的props中必须接受一个value的值,2.而且需要在合适的时候发射input事件,3.子组件发射input事件后4.,父组件的v-model指令会将input事件的参数赋值给v-model绑定的数据变量,5.变量变化之后再次通过v-model传递value值给子组件  
// 对象.属性 = 值 的方式添加属性  
// @property 可以通过对象.属性的方式调用函数  
// defineProperty 给对象添加属性 并且可以自定义set get函数  
// 参数1 要添加属性的对象  
// 参数2 添加的属性名  
// 参数3 属性配置对象  
组件配置对象的data中的数据,在创建组件时,会以get/set属性方法的形式直接添加当前组件对象上,当对组件的属性进行赋值时,这个属性的set函数就会调用,vue在set函数中插入渲染页面的render函数,所以数据一旦发生变化,页面就会立刻重新渲染

Vue不销毁

Vue路由传值：  
Params传参， url 中显示参数和不显示参数两种方式  
query 传参  
[https://blog.csdn.net/qq\_34645412/article/details/74937396][https_blog.csdn.net_qq_34645412_article_details_74937396]  
小程序：  
[https://blog.csdn.net/xchaha/article/details/81019945][https_blog.csdn.net_xchaha_article_details_81019945]  
尽管它只是 MVC（模型 - 视图 - 控制器）中“视图”的库  
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用  
Vue生命周期函数：  
beforecreate : 举个栗子：可以在这加个loading事件  
created ：在这结束loading，还做一些初始化，实现函数自执行  
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情  
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容  
①实例创建时的生命周期函数；②实例执行时的生命周期的函数；③实例销毁时的生命周期的函数。  
beforeCreate()  
beforeMount()  
beforeUpdate()  
beforeDestroy()  
Before keep-alive()

Reacr面试题：  
[https://blog.csdn.net/eyeofangel/article/details/88797314][https_blog.csdn.net_eyeofangel_article_details_88797314]  
20. React组件生命周期的阶段是什么？  
React 组件的生命周期有三个不同的阶段：

\*初始渲染阶段：\*这是组件即将开始其生命之旅并进入 DOM 的阶段。  
\*更新阶段：\*一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。  
\*卸载阶段：\*这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。  
21. 详细解释 React 组件的生命周期方法。  
一些最重要的生命周期方法是：

componentWillMount\*\*()\*\* – 在渲染之前执行，在客户端和服务器端都会执行。  
componentDidMount\*\*()\*\* – 仅在第一次渲染后在客户端执行。  
componentWillReceiveProps\*\*()\*\* – 当从父类接收到 props 并且在调用另一个渲染器之前调用。  
shouldComponentUpdate\*\*()\*\* – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。  
componentWillUpdate\*\*()\*\* – 在 DOM 中进行渲染之前调用。  
componentDidUpdate\*\*()\*\* – 在渲染发生后立即调用。  
componentWillUnmount\*\*()\*\* – 从 DOM 卸载组件后调用。用于清理内存空间。

Ajax  
1.Ajax 是什么? 如何创建一个Ajax？

Ajax（Asynchronous JavaScript and XML）是一种浏览器端不用刷新整个页面就可以与服务器端通信的技术
          它不是新技术, 而是一种由多种技术组合的技术,包括Javascript、HTML和CSS、DOM、XML和JSON、XMLHttpRequest
    
     HTML，CSS用于呈现
     DOM实现动态显示和交互
     XML和JSON进行数据交换与处理
     XMLHttpRequest对象用于进行异步请求数据读取
     Javascript绑定和处理所有数据
    优点：
    	 减轻服务器的负担，Ajax一般只从服务器获取只需要的数据。
     	 无需刷新整个页面, 减少用户等待时间。
    	 更好的客户体验，可以将一些服务器的工作转移到客户端完成，节约网络资源，提高用户体验。
     	基于标准化的对象，不需要安装特定的插件, 浏览器都能支持Ajax
     	彻底将页面与数据分离。
    缺点：
    	没有浏览历史, 不能回退,可能造成请求数的增加
     	存在跨域请求问题
     	对搜索引擎支持比较弱
    
    (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
    (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
    (3)设置响应HTTP请求状态变化的函数
    (4)发送HTTP请求
    (5)获取异步调用返回的数据
    (6)使用JavaScript和DOM实现局部刷新

3.同步和异步的区别?  
同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).  
同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.  
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。  
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

4.如何解决跨域问题?  
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域  
出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案  
jsonp、 iframe、[window.name][]、window.postMessage、服务器上设置代理页面  
18.解释jsonp的原理，以及为什么不是真正的ajax

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

5.http状态码有那些？分别代表是什么意思？  
简单版  
\[  
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息  
200 OK 正常返回信息  
201 Created 请求成功并且服务器创建了新的资源  
202 Accepted 服务器已接受请求，但尚未处理  
301 Moved Permanently 请求的网页已永久移动到新位置。  
302 Found 临时性重定向。  
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。  
304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
            401 Unauthorized 请求未授权。
            403 Forbidden   禁止访问。
            404 Not Found   找不到如何与 URI 相匹配的资源。
    
            500 Internal Server Error  最常见的服务器端错误。
            503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
        ]

Get和Post

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符  
POST：一般用于修改服务器上的资源，对所发送的信息没有限制  
在以下情况中，请使用 POST 请求：

1.  无法使用缓存文件（更新服务器上的文件或数据库）
2.  向服务器发送大量数据（POST 没有数据量限制）
3.  发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠  
    Js：  
    1.介绍js的基本数据类型。  
    Undefined、Null、Boolean、Number、String、  
    ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )  
    2.介绍js有哪些内置对象？  
    Object 是 JavaScript 中所有对象的父对象  
    数据封装类对象：Object、Array、Boolean、Number 和 String  
    其他对象：Function、Arguments、Math、Date、RegExp、Error  
    3.说几条写JavaScript的基本规范？  
    1.不要在同一行声明多个变量。  
    2.请使用 ===/!==来比较true/false或者数值  
    3.使用对象字面量替代new Array这种形式  
    4.不要使用全局函数。  
    5.Switch语句必须带有default分支  
    6.函数不应该有时候有返回值，有时候没有返回值。  
    7.For循环必须使用大括号  
    8.If语句必须使用大括号  
    9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。  
    4.JavaScript原型，原型链 ? 有什么特点？  
    每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，  
    如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，  
    于是就这样一直找下去，也就是我们平时所说的原型链的概念。  
    关系：instance.constructor.prototype = instance.**proto**
    
    特点：  
    JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。  
    当我们修改原型时，与之相关的对象也会继承这一改变。
    
    当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，  
    就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。  
    function Func()\{\}  
    [Func.prototype.name][] = “Sean”;  
    Func.prototype.getInfo = function() \{  
    return [this.name][];  
    \}  
    var person = new Func();//现在可以参考var person = Object.create(oldObject);  
    console.log(person.getInfo());//它拥有了Func的属性和方法  
    //“Sean”  
    console.log(Func.prototype);  
    // Func \{ name=“Sean”, getInfo=function()\}  
    11.eval是做什么的？  
    它的功能是把对应的字符串解析成JS代码并运行；  
    应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。  
    由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’);  
    12.什么是window对象? 什么是document对象?  
    window对象是指浏览器打开的窗口。  
    document对象是Documentd对象（HTML 文档对象）的一个只读引用，window对象的一个属性。  
    38.IE和DOM事件流的区别  
    1.执行顺序不一样、  
    2.参数不一样  
    3.事件加不加on  
    4.this指向问题

54.事件委托是什么？

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

55.谈一下JS中的递归函数，并且用递归简单实现阶乘？

递归即是程序在执行过程中不断调用自身的编程技巧，当然也必须要有一个明确的结束条件，不然就会陷入死循环。

jQuery:  
Jquery:[https://blog.csdn.net/qq\_29134495/article/details/51993825][https_blog.csdn.net_qq_29134495_article_details_51993825]  
1、ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、\[\]、\{\}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。  
2、文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面：  
3、浏览器对象模型（BOM）对浏览器窗口进行访问和操作。  
24.Jquery与jQuery UI 有啥区别？

jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
    jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
    提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

闭包：  
4.什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
    
    闭包的特性：
    1.函数内再嵌套函数
    2.内部函数可以引用外层的参数和变量
    3.参数和变量不会被垃圾回收机制回收
    
    //li节点的onclick事件都能正确的弹出当前被点击的li索引
     <ul id="testUL">
        <li> index = 0</li>
        <li> index = 1</li>
        <li> index = 2</li>
        <li> index = 3</li>
    </ul>
    <script type="text/javascript">
        var nodes = document.getElementsByTagName("li");
        for(i = 0;i<nodes.length;i+= 1){
            nodes[i].onclick = (function(i){
                      return function() {
                         console.log(i);
                      } //不用闭包的话，值每次都是4
                    })(i);
        }
    </script>		
    
    执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在
    使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源
    因为say667()的内部函数的执行需要依赖say667()中的变量
    这是对闭包作用的非常直白的描述
    
      function say667() {
        // Local variable that ends up within closure
        var num = 666;
        var sayAlert = function() {
            alert(num);
        }
        num++;
        return sayAlert;
    }
    
     var sayAlert = say667();
     sayAlert()//执行结果应该弹出的667

内存泄漏：  
5.那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。  
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。  
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。  
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）  
性能优化：  
1.你有用过哪些前端性能优化的方法？

（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
    （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
    （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
    （4） 当需要设置的样式很多时设置className而不是直接操作style。
    （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
    （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
    （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。
    （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
    对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。
    向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。
    减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

流行框架：  
1.比较var, let和const

* var : E7S6之前用来定义变量的关键字, 有变量提升, 没有块作用域
    * let : ES6用来定义变量的关键字, 没有变量提升, 有块作用域
    * const : ES6用来定义常量的关键字,没有变量提升, 有块作用域

1.  使用箭头函数编码设置定时器, 不断输出当前时间
    
    setInterval(() => console.log(Date.now()), 1000)  
    5.说说你对Angular双向数据绑定的理解
    
     *  View（视图）： 页面（标签、指令，表达式）
     *  Model(模型) ： 作用域对象（属性、方法）
     *  数据绑定： 数据从一个位置自动流向另一个位置
        
         *  View–>Model
         *  Model–>View
     *  单向数据绑定： 只支持一个方向
        
         *  View–>Model ： ng-init
         *  Model–>View : \{ \{name\}\}
     *  双向数据绑定
        
         *  Model<–>View : ng-model  
            9.说说你对Angular路由的理解和基本使用
     *  angular中用来实现SPA的技术
     *  在不进行页面跳转的情况下, 进行页面的局部更新显示(当请求某个路由路径时, 发送是ajax请求)
     *  使用angular-route.js
        
         *  将angular-route.js复制到当前项目中
         *  在页面中引入
         *  在创建module时依赖’ngRoute’
     *  在主页中指定/
        
        , 它是用来包含显示不同页面内容的容器
     *  配置路由： 使用$routeProvider服务  
        12.说说ES6的模块化
     *  定义暴露模块 : export  
        暴露一个对象:  
        export default 对象  
        暴露多个:  
        export var xxx = value1  
        export let yyy = value2
        
            var xxx = value1
              let yyy = value2
              export {xxx, yyy}
     *  引入使用模块 : import  
        default模块:  
        import xxx from ‘模块路径/模块名’  
        其它模块  
        import \{xxx, yyy\} from ‘模块路径/模块名’  
        import \* as module1 from ‘模块路径/模块名’
     *  解决ES6的模块化语法浏览器不能解析的问题?
        
         *  使用Babel  
            14.说说你对项目构建的理解和常用的项目构建工具
     *  什么是项目构建?
        
         *  编译项目中的js, sass, less
         *  合并js/css等资源文件
         *  压缩js/css等资源文件
     *  构建工具的作用?
        
         *  简化项目构建, 自动化完成构建
     *  常用的项目构建工具
        
         *  grunt
         *  gulp
         *  webpack  
            15.说说你对React的理解
     *  Facebook开源的一个js库, 页向组件开发
     *  它本身并不是一个MVC框架, 而仅仅是其中的V, 用来动态渲染视图页面
     *  React关心
        
         *  显示/更新DOM
         *  响应事件
     *  React高效的原因
        
         *  虚拟(virtual)DOM, 不总是直接操作DOM
         *  高效的DOM Diff算法, 最小化页面重绘

react框架中，一个组件由js和css文件组成，在js中主要编写组件类，组件的模板代码，还需要引入css文件,css文件中主要编写css样式，react中不存在样式隔离，所以在给标签起class/id等属性时，需要注意重名问题，推荐使用组件名+自定义名称，例如MyCom-title

16.说说你对JSX的理解  
\* javascript XML  
\* 组成: js的代码和xml标签  
\* 用来创建虚拟DOM对象的JS扩展语法, 浏览器不能直接解析运行, 需要Babel转译后才能运行  
\* js中直接可以套xml标签, 但xml标签要套js需要放在\{\}中  
18.说说你对vue和vue-router的理解

* vue是一位华裔前Google工程师开发的前端js库
    * 与angular.js类似的是声明式开发，但性能高于angular，体积小很多, 比较适合移动端开发
    * 它本身不是全能框架, 只关注UI, 如果需要router/ajax, 可以使用对应插件或使用别的库来实现

*  vue-router是vue的路由扩展库(插件), 用于实现SPA应用

19.创建Vue时选项对象中常用的几个属性

{
    	el : '#app',
    	data : {}/function
    	methods : {}
    	computed : {}
    	watch : {}
    	filters : {}
    	redirectives : {}
    	components : {}
    }

25.JQuery一个对象可以同时绑定多个事件，这是如何实现的？

可以同时绑定多个事件，低层实现原理是使用addEventListner与attachEvent兼容处理做事件注册

26.针对 jQuery 的优化方法？  
优先使用ID选择器  
在class前使用tag(标签名)  
给选择器一个上下文  
慎用 .live()方法（应该说尽量不要使用）  
使用data()方法存储临时变量  
6.jQuery四大特征：

1）方法的链式调用
    2）取赋值合体（读写二合一）
    3）隐式迭代（可以给很多元素同时设置事件click，jQuery内部会做出很多我们看不见的工作）
    4）函数化编程（封装成函数来操作，核心函数$和核心对象$()）

9.BFC（块级格式化上下文）

BFC布局规则：  
1.内部的Box会在垂直方向，一个接一个地放置。  
2.内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠  
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。  
4.BFC的区域不会与float box重叠。  
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。  
6.计算BFC的高度时，浮动元素也参与计算。

BFC什么时候出现(哪些元素会生成BFC?)  
根元素  
float属性不为none  
position为absolute或fixed  
overflow不为visible  
display为inline-block, table-cell, table-caption, flex, inline-flex  
23.em与rem

em:基于自身的font-size（如果自身没有设置font-size,它会继承父元素font-size）
    rem:rem基于html的font-size

八、NodeJs

1.如何判断当前脚本运行在浏览器还是node环境中？（阿里）

this === window ? 'browser' : 'node';
    通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

2.对Node的优点和缺点提出了自己的看法？

（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，  
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。  
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，  
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。  
（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，  
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。  
4.Node.js的适用场景？

1)、实时应用：如在线聊天，实时通知推送等等（[如socket.io][socket.io]）  
2)、分布式应用：通过高效的并行I/O使用已有的数据  
3)、工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序  
4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）  
5)、利用稳定接口提升Web渲染能力  
6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）  
[https://segmentfault.com/a/1190000018630871vuehttps://blog.csdn.net/lizidemao/article/details/83751690面试指南：][https_segmentfault.com_a_1190000018630871vuehttps_blog.csdn.net_lizidemao_article_details_83751690]  
v-show 与 v-if 区别

1.  v-hsow和v-if的区别：  
    v-show是css切换，v-if是完整的销毁和重新创建。
2.  使用  
    频繁切换时用v-show，运行时较少改变时用v-if
3.  v-if=‘false’ v-if是条件渲染，当false的时候不会渲染  
    Vue.js 2.x 双向绑定原理  
    这个问题几乎是面试必问的，回答也是有深有浅。基本上要知道核心的 API 是通过 Object.defineProperty() 来劫持各个属性的 setter / getter，在数据变动时发布消息给订阅者，触发相应的监听回调，这也是为什么 Vue.js 2.x 不支持 IE8 的原因（IE 8 不支持此 API，且无法通过 polyfill 实现）。  
    通过v-bind把父组件的数据绑定到了子组件的props属性中，而在props上默认用value取值，然后通过$emit触发事件input，因为v-model绑定的事件是input，故在子组件上触发了父组件的input事件，通过触发事件来进行传值，实现了父子组件数据的双向绑定，相对于直接使用v-bind以及自定义事件代码量有所减少  
    [https://blog.csdn.net/aaronthon/article/details/81714528关系型数据库非关系性数据库：sqlite,sqlserver,mysql][https_blog.csdn.net_aaronthon_article_details_81714528_sqlite_sqlserver_mysql]  
    关系型数据库：mongdodb,redis非关系型数据库严格上不是一种数据库，应该是一种数据结构化存储方法的集合，可以是文档或者键值对等。  
    面向对象：  
    继承----封装----多态（接口的多种不同的实现方式即为多态）  
    三次握手四次分手：

Selenium使用注意事项：  
等页面完全加载出来在使用。  
1、首先注意事项  
　 有时页面还没加载出来，脚本找不到元素，就会报错，所以添加思考时间是非常必要的，切记。  
　 进入一个页面后，简单实用back()函数，再进行查找元素时，会报错，所以要将不断来回查找的元素放进循环体内  
　 driver.switch\_to\_alert().accept() 处理弹窗"接受"作用  
l = random.randint(1,9) 随机函数，根据用例要求进行实用  
　 ‘\[%d\]’%l 直白的理解就是将后面 l 的值传递给%d（整数）  
　 find\_element\_by\_link\_text 和 find\_elements\_by\_link\_text 有区别，后者主要是查找整个页面相同的函数，即可迭代。

Element-Ui PC端组件vux手机端组件  
三次握手四次挥手  
[https://www.jianshu.com/p/ad0904df7d76][https_www.jianshu.com_p_ad0904df7d76]  
[https://blog.csdn.net/qq\_38950316/article/details/81087809][https_blog.csdn.net_qq_38950316_article_details_81087809]  
报文结构:  
请求报文:请求行、请求头部、空行、请求数据  
响应报文:响应行、响应头、响应体

7 请谈谈小程序的生命周期函数？  
• onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。  
• onShow() 页面显示/切入前台时触发，一般用来发送数据请求；  
• onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。  
• onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。  
• onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。

跨域：6.跨域问题

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同
    1)JSONP（JSON with Padding）
      只支持get请求, 不支持post请求
      编码:客户端url?callback=? 和 服务器端:var callback = req.query.callback
               返回的value需要封装成json
        res.send(callback+'('+json+')');
    背后:使用<srcipt>发送请求 和 只能发get请求
    
    <srcipt>发送请求实现过程：
         动态生成<script>标签, 然后通过标签的src属性发送GET类型的跨域请求,
         服务器端返回一段js脚本, 这段js脚本的内容为一个函数调用,实参为需要返回的响应数据(json),
         客户端这边需要提前定义好对应的函数, 当<script>请求成功并接收到数据时,
         会自动调用此函数, 在函数中  我们就可以处理响应数据了
    2)CORS
        Cross-Origin Resource Sharing(跨域资源共享)
        支持get和post请求
    编码：客户端 ：不需要额外做任何工作
        服务器端：只需由服务器发送一个响应标头即可
    存在浏览器兼容的问题

通俗易懂的三次握手，四次挥手

[https://www.eotodo.com/share/jishu/jishu60.html][https_www.eotodo.com_share_jishu_jishu60.html]  
44.为什么利用多个域名来存储网站资源会更有效？  
CDN缓存更方便  
突破浏览器并发限制  
节约cookie带宽  
节约主域名的连接数，优化页面响应速度  
防止不必要的安全问题

== 与 === 的区别  
==判断值，可转换类型，’5’==5 true，false  
===判断值和类型，’5’===5 false  
New array()定义一个去重数组

Vue2.0和vue3.0区别：[https://www.cnblogs.com/webdragon/p/11025921.html][https_www.cnblogs.com_webdragon_p_11025921.html]  
Vue: [https://segmentfault.com/a/1190000018630871][https_segmentfault.com_a_1190000018630871]  
React: [https://blog.csdn.net/eyeofangel/article/details/88797314][https_blog.csdn.net_eyeofangel_article_details_88797314]  
小程序：[https://blog.csdn.net/xchaha/article/details/81019945][https_blog.csdn.net_xchaha_article_details_81019945]

[https_www.cnblogs.com_DCL1314_p_7903085.html]: https://www.cnblogs.com/DCL1314/p/7903085.html
[https_www.jianshu.com_p_4debd60d3187_xh]: https://www.jianshu.com/p/4debd60d3187#!/xh
[https_www.cnblogs.com_alongup_p_9022180.html]: https://www.cnblogs.com/alongup/p/9022180.html
[https_www.jianshu.com_p_ac1787f6c50f]: https://www.jianshu.com/p/ac1787f6c50f
[https_www.jianshu.com_p_87008f4f8513]: https://www.jianshu.com/p/87008f4f8513
[https_www.jianshu.com_p_cddb84a31bfa]: https://www.jianshu.com/p/cddb84a31bfa
[https_blog.csdn.net_qq_34645412_article_details_74937396]: https://blog.csdn.net/qq_34645412/article/details/74937396
[https_blog.csdn.net_xchaha_article_details_81019945]: https://blog.csdn.net/xchaha/article/details/81019945
[https_blog.csdn.net_eyeofangel_article_details_88797314]: https://blog.csdn.net/eyeofangel/article/details/88797314
[window.name]: http://window.name
[Func.prototype.name]: http://Func.prototype.name
[this.name]: http://this.name
[https_blog.csdn.net_qq_29134495_article_details_51993825]: https://blog.csdn.net/qq_29134495/article/details/51993825
[socket.io]: http://xn--socket-hh4k.io
[https_segmentfault.com_a_1190000018630871vuehttps_blog.csdn.net_lizidemao_article_details_83751690]: https://segmentfault.com/a/1190000018630871vuehttps://blog.csdn.net/lizidemao/article/details/83751690%E9%9D%A2%E8%AF%95%E6%8C%87%E5%8D%97%EF%BC%9A
[https_blog.csdn.net_aaronthon_article_details_81714528_sqlite_sqlserver_mysql]: https://blog.csdn.net/aaronthon/article/details/81714528%E5%85%B3%E7%B3%BB%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93%E9%9D%9E%E5%85%B3%E7%B3%BB%E6%80%A7%E6%95%B0%E6%8D%AE%E5%BA%93%EF%BC%9Asqlite,sqlserver,mysql
[https_www.jianshu.com_p_ad0904df7d76]: https://www.jianshu.com/p/ad0904df7d76
[https_blog.csdn.net_qq_38950316_article_details_81087809]: https://blog.csdn.net/qq_38950316/article/details/81087809
[https_www.eotodo.com_share_jishu_jishu60.html]: https://www.eotodo.com/share/jishu/jishu60.html
[https_www.cnblogs.com_webdragon_p_11025921.html]: https://www.cnblogs.com/webdragon/p/11025921.html
[https_segmentfault.com_a_1190000018630871]: https://segmentfault.com/a/1190000018630871