前端面试题

1.html5新元素有哪些？
HTML5中一些有趣的新特性：
（1）用于绘画的canvas元素；
（2）用于媒介回放的video和audio元素；
（3）对本地离线存储的更好的支持；
（4）新的特殊内容元素，比如article，footer，header，nav，section；
（5）新的表单控件，比如calendar，date，time，email，url，search
以上是w3c上的原话，简单来说就是更符合标准，提供更多功能支持；更加规范，可读性更强，性能有提升，实现功能更加简单方便，就像手机一样，高版本的功能多一些。

2.“===”和·==有何异同？
相同点：都是判定两个值是否相等；
不同点：前者会判断类型，而后者不会判断类型；

3.new具体做了些什么？
表述一：
创建一个新对象；
将它的_proto_指向其构造函数的prototype；
动态将this指向新对象；
执行函数体中的代码；
放回新对象中；

表述二：
（1）创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到this引用的对象中。
（3）新创建的对象由this所引用，并且最后隐式的返回this。

4.常使用的库有哪些？常用的前端开发工具？
（1）最常用的库：jquery-1.4.2.min.js
（2）常用的前端开发工具：Visual Studio Code、firebug、photoshop、取色器、色板、eclipse、phpstudy_pro等

5.介绍一下编写一个数组去重的方法？
思路：
（1）创建一个新的数组存放结果
（2）创建一个空对象
（3）for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

6.CSS中margin和padding的区别是？
（1）margin是外边距，属于元素之外，相邻元素的margin可以 融合；
（2）padding是内边距，在元素之内，相邻元素的padding不可融合；

7.执行效率的差别：
js是动态的解释型语言浏览器一边解析编译一边运行；
java是编译类型语言，先编译后执行；
java的效率略高，现在硬件发展快差距在逐渐变小。

8.display与visibility有何异同？
display可以有很多值，visibility只有两个常用值：visible、hidden。
当display为none、visibility为hidden时都会隐藏元素。但display会隐藏掉元素空间，visibility会保留元素空间。

9.XMLHttpRequest是什么？
XMLHttpRequest是我们得以实现异步通讯的根本。最早在IE5中以ActiveX组件实现；最近，Mozilla 1.0和Safari 1.2中实现为本地对象。XMLHttpRequest虽然不是W3C标准，但却得到了FireFox，Safari，Opera，Konqueror，IE等绝大多数浏览器的支持。

10.Servlet与CGI的区别：
区别在于Servlet处于服务器进程中，它通过多线程方式运行其service()方法，一个实例可以服务于多个请求，并且其实例一般不会销毁，而CGI对每个请求都产生新的进程，服务完成后就销毁，所以效率上低于Servlet。

---

1.简述Vue的生命周期？
它可以总共分为8个阶段：
（1）beforeCreate创建前
（2）created创建后
（3）beforeMount载入前
（4）mounted载入后
（5）beforeUpdate更新前
（6）updated更新后
（7）beforeDestroy销毁前
（8）destroyed销毁后
创建前：对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。
创建后：对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。
载入前：对应的钩子函数为beforeMount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
载入后：对应的钩子函数为mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
更新前：对应的钩子函数为beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
更新后：对应的钩子函数为updated。这一阶段DOM会和更改过的内容同步。
销毁前：对应的钩子函数为beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不再需要vue操纵DOM时，就要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。
销毁后：对应的钩子函数为destroyed。在销毁后，会触发destroyed钩子函数。
vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确的控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。

2.ajax请求的过程是?
（1）创建XMLHttpRequest对象
（2）创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
（3）设置响应HTTP请求状态变化的函数
（4）发送HTTP请求
（5）获取异步调用返回的数据
（6）是用JavaScript和DOM实现局部刷新

3.JavaScript继承的6种方法
（1）原型链继承
（2）借用构造函数继承
（3）组合继承（原型+借用构造）
（4）原型式继承
（5）寄生式继承
（6）寄生组合式继承

4.如何优化SPA应用的首屏加载速度慢的问题？
（1）将公用的JS库通过script标签外部引入，减小app.bundel的大小，让浏览器并行下载资源文件，提高下载速度
（2）在配置路由时，页面和组件使用懒加载的方式引入，进一步缩小app.bundel的体积，在调用某个组件时再加载对应的js文件
（3）加一个首屏loading图，提升用户体验

5.let，counst，var的区别：
（1）从声明过程说
var：遇到有var的作用域，再任何语句执行器都已经完成了声明和初始化，也就是变量提升并且拿到undefined的原因。
let：解析器进入一个块级作用域，发现let关键字，变量只是先完成声明，并没有到初始化那一步。如果此时在作用域提前访问，会报错xx is not defined ，这就是暂时性死区的由来。等到解析到有let那一行时，才会进行初始化阶段。如果let那一行是赋值操作，则初始化和赋值同时进行。
count和let一样。
（2）从内存分配说
var：会直接在栈内存里预分配内存空间，然后等到实际语句执行时，再存储对应的变量，如果传的是引用类型，则在堆内存里开辟一个内存空间存储实际内容，栈内存会存储一个指向堆内存的指针。
let：不会在栈内存里预分配内存空间，而且在栈内存分配变量的时候，会检查，如果有相同变量名存在就会报错。
count：不会分预配内存空间，栈内存分配变量时也会做同样的检测。count存储的变量是不可修改的，所以对于基本类型来说无法修改指定的值，对于引用类型来说无法修改栈内存里分配的指针，但是可以修改指针指向的对象里面的属性。
（3）从变量提升说
let只是创建过程中提升，初始化过程并没有提升，所以会产生暂时性死区。
var的创建和初始化过程都提升了，所以赋值前访问会得到undefined

6.v-if和v-show有什么区别？
v-show仅仅控制元素的显示方式，将display属性在block和none来回切换；
而v-if会控制这个DOM节点的存在与否。
当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；
当只需要一次显示或隐藏时，使用v-if更加合理。

7.简述vue的响应式原理？
当一个vue实例创建时，vue会遍历data选项的属性，用Object.definePreperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个租价实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

8.px和em的区别？
px和em都是长度单位，区别是，px的值是固定的，是绝对单位，类似的还有pt（磅，1pt=1/72英寸）、pc（皮卡，1pc=12pt）、mm（毫米）、cm（厘米）、in（英寸）绝对单位指定是多少就是多少，计算比较容易。
em的值不是固定的，它是相对单位，em是指当前默认字号大小（继承父元素默认字号）的倍数，可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍，若父元素或默认字号为12pt，则2em就是24pt。类似的还有ex，ex是当前字号高度值（通常是字体尺寸一半）的倍数。

9.get和post的区别？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符。
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

10.事件委托是什么？
（1）利用事件冒泡的原理，让自己的所触发的事件，由它的父元素代替执行；
（2）通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

---

1.简述同步和异步的区别：
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

2.setTimeout与setInterval有何区别?
（1）setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段后就将执行那段代码。
（2）不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还是自动重复执行代码，而setTimeout只执行一次那段代码。

3.img的alt和title的异同？
alt是图片加载失败时，显示在网页上的替代文字；
title是鼠标放上面时显示的文字，title是对图片的描述与进一步说明；
这些都是表面上的区别，alt是img必要的属性，而title不是。
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片进行说明。

4.谈谈你所了解到的web攻击技术？
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成认证用户进行非预期的个人信息或设定信息等某些状态更新。

5.简述JavaScript的优缺点：
优点：简单易用，与java有类似的语法，可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序，并且事先不用编译，逐步执行，无需进行严格的变量声明，而且内置大量现成对象，编写少量程序可以完成目标；
缺点：不适合开发大型应用程序。

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

7.JavaScript的本地对象，内置对象和宿主对象分别是什么？
（1）本地对象为array obj regexp等可以new实例化；
（2）内置对象为gload Math 等不可以实例化的；
（3）宿主对象为浏览器自带的document，window等。

8.js有哪些内置对象？
（1）Math对象：Math.abs(x);//用来返回数的绝对值；
（2）Date对象：var date = new Date();//通过new的方式创建一个日期对象；
（3）Array对象：var arr = new Array();
（4）字符串对象：var str = new String()

9.JQuery库中的$()是什么？
$()函数是jQuery()函数的别称。$()函数用于将任何对象包裹成jQuery对象，接着你就被允许调用定义在jQuery对象上的多个不同方法。你可以将一个选择器字符串传入$()函数，它会返回一个包含所有匹配的DOM元素数组的jQuery对象。

10.JavaScript的DOM是什么意思？
DOM是W3C的对象模型，DOM是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容结构和样式。

---

1.谈谈对this对象的理解？
（1）this总是指向函数的直接调用者，而非间接调用者；
（2）如果有new关键字，this指向new出来的那个对象；
（3）在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

2.CSS引入的方式有哪些？link和@import的区别是什么？
CSS引入的方式包括内联 内嵌 外链 导入
link和@import的区别是：
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS；
（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题；
（4）后者优先级更高；

3.什么是闭包？
官方的解释：所谓闭包，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
在Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、Python、Go、Lua、objective c、swift以及java（java8及以上）等语言中都能找到对闭包不同程度的支持。
通俗的讲就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

4.什么是vuex？
在SPA单页面组件的开发中Vue的vuex和React的Redux都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

5.React有哪些优化性能的手段？
首屏加载
首屏加载是被讨论最多的话题，一方面web前端首屏的加载性能的确普遍较差，另一方面，首屏的加载速度至关重要，很多时候过长的白屏会导致用户还没有体验到网站功能的时候就流失了，首屏速度是用户留存的关键点。

6.为什么要有同源限制？
比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过JavaScript读取到你的表单中input中的内容，这样用户名，密码就能轻松到手。

7.什么是CSS Hack？
针对不同的浏览器写不同的CSS，就是CSS Hack

8.JavaScript原型，原型链？有什么特点？
（1）原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们称之为原型链。
（2）原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

9.列举JavaScript的本地对象
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

10.HTML5离线存储
（1）localStorage长期存储数据，浏览器关闭后数据不丢失；
（2）sessionStorage数据在浏览器关闭后自动删除。

---