前端工程师 - 面试题 (最新,最全)

Posted 2021-02-16 antwan-dmy

 

一：什么是闭包？闭包的用处？

（1）闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就

是将函数内部和函数外部连接起来的一座桥梁。

（2）闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中

闭包的特性：

①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；

②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。

闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

 

 

vue面试题

一：简述vue的理解

Vue是一个渐进式的轻量级框架，核心是关注视图层，是一个构建数据驱动的页面，将数据绑定视图上，vue提供数据和视图双向绑定原理使我们开发页面更简单，修改数据，视图自动更新。 vue是模块化和组块化，如果页面要更改数据之类的，就只在组件来修改就可以，vue有几大特点：（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块化（6） 组件化Vue

通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架，可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能

过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理，变成我们想要的数据。

过滤器的本质 就是一个带有参数带有返回值的方法。

Vue组件的过程：组件可以提升整个项目的开发效率，能够把页面拆分为多个独立的模块，解决了效率低，难维护，复用性，等问题。

Vue是一个数据驱动页面的一个框架，基于MVVM模式，M指的是数据，V值得是视图，VM是视图模型，将数据绑定视图上（双向绑定）

Vue.js是一套构建用户界面的渐进式（没有强主张，没有多做职责之外的事。）框架。

Vue的生命周期

生命周期就是钩子函数，主要是在什么时候来调用这些函数，比如是在创建，挂载，更新，销毁完成之后还是之前，初始化数据完成之前还是之后等

   从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期beforeCreate : 数据声明还没被调用时使用created : vue渲染完毕后，所有数据和方法初始化后调用mounted : 挂载元素之后

updated : 如果对数据统一处理，在这里写上相应函数beforeDestroy : 可以做一个确认停止事件的确认框nextTick : 更新数据后立即操作dom

BeforeMount 挂载开始之前被调用

1. vue生命周期的作用是什么？答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

2. 第一次页面加载会触发哪几个钩子？答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

3.vue的优点是什么？

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

5.vue组件之间的传值  

1.父组件给子组件传值 （props） 

2.子组件给父组件传值 （emit）

3.兄弟组件间的传值（on和emit）

6.框架的好处

提高代码的质量，开发速度

提高代码的复用率

降低模块之间的耦合度（高内聚低耦合）

 

二。Vue.js开发环境

1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘宝npm镜像安装相关依赖

 在cmd里直接输入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回车，等待安装...

3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架

在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装...

            2).输入：vue，回车，若出现vue信息说明表示成功

4.创建项目

在cmd里输入：vue init webpack vue_test(项目文件夹名)，回车，等待一小会儿

5.安装依赖

在cmd里  1).输入：cd vue_test（项目名），回车，进入到具体项目文件夹

       2).输入：cnpm install，回车，等待一小会儿

回到项目文件夹，会发现项目结构里，多了一个node_modules文件夹（该文件里的内容就是之前安装的依赖）

6.测试环境是否搭建成功

方法1：在cmd里输入：cnpm run dev

方法2：在浏览里输入：localhost:8080(默认端口为8080)

 

三、vue中常见的指令有哪些?

v-for/v-if/v-else-if/v-else/v-on/v-bind/v-show/v-html/v-model

 

四、双向数据绑定是如何实现的？好处有哪些

v-model

好处？

组件是一个具有特定功能的 可被反复使用的视图，

各个指令实现数据和视图的绑定，解耦（降低耦合度的过程）

组件有什么好处？

封装好了组件，提高了代码复用率

提高了代码的可读性

降低了测试难度

 

五、Vue实例中常见的属性有哪些？

data 存储数据

methods 方法

directives 指令

filters 过滤器/管道

router 路由

props 接收调用该组件时传来的数据

watch 监听双向数据绑定的数据的变化

computed 用在逻辑复杂的地方，计算属性是基于它们的依赖进行缓存的，提高性能

 

六、过滤器

本质是一个带有参数 有返回值的方法;支持多重过滤

{{表达式 | myFilter(arg1,arg2) | myFilter2}}

 

七、refs

1、给子组件要指定一个属性 

2、通过引用名字mySon怎么得到子组件的实例？ this.$refs.mySon

1Vue组件化的理解

首先组件的基本构成分别是：样式结构，行为逻辑，数据。web中的组件其实就是页面组成的一部分，每个组件都会提供一些对外接口，允许使用者设置和调整参数属性，可以将不同功能的组件结合在一起，快速的构成一个符合实际需求的应用。

 

2Vue路由的理解

首先Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是通过超链接来实现页面的切换和跳转。在Vue-router中是路径之间的切换，也就是组件的切换。

 

3你对Vue钩子函数的理解

vue-router的导航钩子主要用来拦截导航，让他完成跳转或取消。

 

4如何让css只在当前组件中起作用

在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped：

 

5created和mounted区别

created实例创建完成之后的钩子函数；$el属性不可见为undefined

mounted将编译好的HTML挂载到页面完成后执行的钩子函数，在整个实例生命周期中只执行一次；$el已创建，同时DOM结构已生成

 

6mounted和created分别什么时候用

只有ajax数据请求放在created里面就可以了，这样可以及早发请求获取数据；如果有依赖DOM的情况下，就放到mounted里面

 

7Vue和angular分别采用什么技术实现双向数据绑定？

AngularJS 采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 ViewModel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

VueJS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

 

8v-show和v-if区别

v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好

 

9的作用是什么

 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

大白话: 比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

 

10Vue中引入组件的步骤

　　1.采用ES6的import ... from ...语法或CommonJS的require()方法引入组件

　　2.对组件进行注册,代码如下

　// 注册Vue.component(‘my-component‘, {  template: ‘

　　　　　　A custom component!
　　‘})

　　3.使用组件

 

11请列举出3个Vue中常用的生命周期钩子函数

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

activated::keep-alive组件激活时调用

 

12请简述下Vuex的原理和使用方法

一个应用可以看作是由上面三部分组成: View, Actions,State,数据的流动也是从View => Actions => State =>View 以此达到数据的单向流动.但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.

Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心.

 

上图可以很好的说明Vuex的组成,一个实例化的Vuex.Store由state, mutations和actions三个属性组成:

state中保存着共有数据

改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的

如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

 

13vue与angular的区别

vue的双向邦定是基于ES5 中的 3.getter/setter来实现的，而angular而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查，vue则不需要。因此，vue在性能上更高效，但是代价是对于ie9以下的浏览器无法支持。

 

14active-class是哪个组件的属性？

vue-router模块的router-link组件

 

15怎么定义vue-router的动态路由？怎么获取传过来的动态参数

1、路由配置文件找到对应的路由，在path属性上添加/:id

2、在需要出发跳转的页面router-link配置实际要传递的参数数据

3、在目标组件通过路由对象下的$route.params进行接收

 

16vue-router有哪几种导航钩子

钩子函数种类：

router全局：beforeEach、afterEach

单个路由：beforeEnter

组件内的钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

钩子函数接收的参数：

to：要进入的目标，路有对象 到哪里去

from：正要离开导航的路由对象 从哪里来

next：用来决定跳转或取消导航

 

17在vue.cli中的安装使用步骤是？有哪几大特性？

第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）

第二步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

 

18vue-router是什么？它有哪些组件

vue的路由插件。router-link、router-view

 

19请说出vue.cli项目中src目录每个文件夹和文件的用法

assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件

 

20什么是vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

vue生命周期的作用是什么？它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

 

21vue生命周期总共有几个阶段

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

 

22第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

 

23DOM 渲染在 哪个周期中就已经完成

DOM 渲染在 mounted 中就已经完成了

 

24简单描述每个周期具体适合哪些场景

生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

arguments是一个伪数组，没有遍历接口，不能遍历

 

25computed VS methods

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

 

Reversed message: "{{ reversedMessage() }}"

 

 

// 在组件中

methods: {

 reversedMessage: function () {

   return this.message.split(‘‘).reverse().join(‘‘)

 }

}

 

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要message还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为Date.now()不是响应式依赖：

computed: {

 now: function () {

   return Date.now()

 }

}

 

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行 A的 getter！如果你不希望有缓存，请用方法来替代。

 

26computed VS watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch回调。细想一下这个例子：

 

{{ fullName }}
 

 

var vm = new Vue({

 el: ‘#demo‘,

 data: {

   firstName: ‘Foo‘,

   lastName: ‘Bar‘,

   fullName: ‘Foo Bar‘

 },

 watch: {

   firstName: function (val) {

     this.fullName = val + ‘ ‘ + this.lastName

   },

   lastName: function (val) {

     this.fullName = this.firstName + ‘ ‘ + val

   }

 }

})

 

 

 

jquery总结

一.对jquery的了解

jQuery是一个轻量级的javascript框架，极大的简化了js的编程。

1.首先jQuery提供了强大的元素选择器。用于获取html页面中封装了html元素的jQuery对象。像常见的选择器有:基本选择器，层次选择器，过滤选择器，表单选择器。

2.第二点就是jQuery提供了对css样式操作的支持，像对class属性的增加删除切换操作。还有对单个样式操作的支持的css方法，提供了一种简洁统一的操作样式的方法。

3.第三点就是jQuery出色的DOM操作的封装，极大的简化了javascript的对dom节点的增删改查操作，让我们可以使用一种更加简洁的方法来操作节点。

4.第四点就是jQuery还是一个为事件处理特点设计的框架，提供了静态绑定事件和动态绑定事件，完善了事件的处理机制。

5.jQuery解决了大量浏览器之间的兼容性的问题。

6.jQuery极大的简化ajax编程，提供了一种更加简洁，统一的编程方式。

7.jQuery内置了一些简单有用的内置动画，像常见的slideDown/slideUp,hide/show,fadeIn/fadeOut等，还支持基于定位机制使用animate来自定义动画效果。

 

二.jQuery和Zepto的区别和用途

jQuery主要用于pc端，Zepto主要用于移动端，Zepto更加小巧

 

三.jquery里的ready与window.onload的区别的区别？

  ready：

1.具有简写写法

2.一个HTML页面中允许编写多个

  3.(效率高)需要在DOM加载后就可以执行

  window.onload

1.没有任何简写

2.一个HTML页面中只能编写一个

  3.(效率低)必须在页面中所有内容都加载完毕后,才能执行

 

四．请简要说明jQuery框架的显著特点。

答：jQuery强调的理念是写的少，做的多。其主要特点有：轻量级、强大的选择器、漂亮的DOM操作封装、可靠的事件处理机制、完善的Ajax处理、出色的浏览器兼容性、链式操作方式、丰富的插件支持、开源产品。

 

五．jQuery如何解决跨域问题？

答：借助JSONP这个非官方的协议，其允许在服务器端集成script tags返回至客户端，通过callback的形式实现跨域访问JSONP即JSON with Padding。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。

 

六．如何编写高性能的jQuery代码？

答：定义jQuery变量的时候添加var关键字；DOM操作请务必记住缓存（cache）；尽量使用链式操作；尽量把一些代码都整合到一起；避免使用全局类型的选择器；尽量使用.on方法，因为其它任何方法都是最终使用.on方法来实现的；尽量使用最新版本的jQuery框架类库。 

 

七．jQuery与jQuery UI有啥区别？

答：

（1）jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

（2）jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。

 

八．jQuery链式调用的最大优点是什么？

答：避免频繁操作的DOM，链式调用可以实现先缓存再操作。

 

九．jQuery框架的源码看过吗？能不能简单说一下它的实现原理？

首先是采用闭包技术，然后用window作为形参传入

答：jQuery框架通过改变javascript编码方式来创建了全新的编程理念。譬如关于jQuery声明的流程：先查找（创建）jQuery对象，然后调用jQuery对象的方法完成我们需要完成的工作。jQuery就是以这种可以说是最简单的编码逻辑来改变javascript编码方式的，这个流程就是jQuery的编码逻辑核心。 

 

十．jQuery中如何将对象转化为json字符串，然后再转化回来？

答：可以通过JSON.stringify方法把一个对象转换成json字符串，再通过JSON.parse方法把一个json字符串解析成对象。 

 

十一．jQuery中的load方法一般怎么用的？

答：load方法一般在载入远程HTML代码并插入到DOM中的时候用，通常用来从Web服务器上获取静态的数据文件。如果要传递参数的话，可以使用$.get()或$.post()方法。

 

十二．描述一下.get()、[]和.eq()方法的区别。

答：eq返回原生jQuery对象，截取某些el元素生成jQuery新对象；get和[]返回的都是原生的DOM对象，原理一致；get和[]区别是get是通过jQuery对象的方法获取，[]是根据jQuery是一个数组对象获取。

 

十三。jQuery的理解：

jQuery是一个轻量级的javascript框架，极大的简化了js的编程。

1.首先jQuery提供了强大的元素选择器。用于获取html页面中封装了html元素的jQuery对象。像常见的选择器有:基本选择器，层次选择器，过滤选择器，表单选择器。

2.第二点就是jQuery提供了对css样式操作的支持，像对class属性的增加删除切换操作。还有对单个样式操作的支持的css方法，提供了一种简洁统一的操作样式的方法。

3.第三点就是jQuery出色的DOM操作的封装，极大的简化了javascript的对dom节点的增删改查操作，让我们可以使用一种更加简洁的方法来操作节点。

 4.第四点就是jQuery还是一个为事件处理特点设计的框架，提供了静态绑定事件和动态绑定事件，完善了事件的处理机制。

5.jQuery解决了大量浏览器之间的兼容性的问题。

6.jQuery极大的简化ajax编程，提供了一种更加简洁，统一的编程方式。

7.jQuery内置了一些简单有用的内置动画，像常见的slideDown/slideUp,hide/show,fadeIn/fadeOut等，还支持基于定位机制使用animate来自定义动画效果。

 

十四、 bind()、live()、one()和on()的区别?

      * bind() - 绑定事件

       * live() - 老版本具有,新版本移除

       * one() - 只绑定一次事件

       * on() - 是jQuery底层提供的机制

 

十五：jquery里的ready与window.onload的区别的区别？

  ready

具有简写写法

一个HTML页面中允许编写多个

  (效率高)需要在DOM加载后就可以执行

      window.onload

没有任何简写

一个HTML页面中只能编写一个

  (效率低)必须在页面中所有内容都加载完毕后,才能执行

十六：jQuery中如何将对象转化为json字符串，然后再转化回来？

答：可以通过JSON.stringify方法把一个对象转换成json字符串，再通过JSON.parse方法把一个json字符串解析成对象。

 

 

ajax方面

一．Ajax是什么？

答：是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

什么是ajax，为什么要使用Ajax（请谈一下你对Ajax的认识）?

答案：Ajax是客户端请求服务器数据的一种技术。是一种向服务器发送异步请求的一种技术，从服务器获得数据，Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验。

为什么要用ajax：Ajax应用程序的优势在于：

• 通过异步模式，提升了用户体验

• 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

 

二．同步请求和异步请求的区别？

答：

• 同步：提交请求→等待服务器处理→处理完毕返回，这个期间客户端浏览器不能干任何事。

• 异步：请求通过事件触发→服务器处理（这是浏览器仍然可以作其他事情）→处理完毕。

 

三．异步加载的方式有哪些？

答：

（1）defer，只支持IE；

（2）async；

（3）创建script，插入到DOM；

 

四、 JSON 的了解

轻量级数据交互格式，可以形成复杂的嵌套格式，解析非常方便

 

五、请解释 ajax 的工作原理

Ajax 的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约 ISP 的空间及带宽租用成本的目的。简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用javascript 来操作 DOM而更新页面。

 

六、ajax优点：

1.无刷新更新数据，减少用户等到时间，更好的用户体验

2.异步与服务器通信，无需打断用户，响应更加迅速

3.可以把服务器的一些负担转到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

4.基于标准化，广泛被支持

二：AJAX最大的特点是什么。Ajax可以实现动态刷新（局部刷新）页面。就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

 

七、ajax缺点

1.破坏了前进后退功能，用户往往通过后退按钮来取消上一步操作，但是使用ajax无法实现。可以使用Gmail来解决这个问题，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。

2.安全问题。ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有自身受到如跨站脚本攻击，SQL注入等攻击。

3.对搜索引擎支持较弱

4.一些手持设备不能很好的支持等

 

八、json与jsonp的区别？

  Json:是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

Jsonp实现数据跨域传输的一种手段

 

九、解释jsonp的原理，以及为什么不是ajax

动态创建一个script标签，利用script标签src属性访问没有限制，实现跨域。

 

九、实现原生ajax的四个步骤？

  (1)创建XHR对象

   var xhr = new XMLHttpRequest();

  (2)监听XHR的状态改变

   xhr.onreadystatechange = function(){}

  (3)连接到Web服务器

   xhr.open(请求方法, URL, 是否为异步请求);

  (4)发送请求消息

 xhr.send( 请求主体 );

 

十、GET和POST的区别，何时使用POST？

GET：一般用于信息获取

 POST：一般用于修改服务器上的资源

 (1) 传递给服务器端的参数的处理不同

    GET请求,参数跟在URL后面

    POST请求,参数放在请求体中提交

 (2) 参数的限制

    GET请求,对参数的大小和长度有限制

    POST请求,没有限制

 (3) 安全性

    GET请求:安全性很差

    POST请求:相对安全

使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

 

十一、http请求由三部分组成，分别是：请求行、消息报头、请求正文

HTTP（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，HTTP1.1版本中给出一种持续连接的机制，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。

 

 

 

简历面试题：

一．HTML5和CSS3新特性：

CSS3新特性：圆角border-radius，阴影 box-shadow，旋转transform，动画animation，过渡模块transition，

HTML5新特性：视频video ，音频audio，画布canvas，表单控件属性data，url，email、file、time。新标签footer，nav，header，section

 

二．对W3C的理解

1. 对于结构要求：标签闭合，标签字母要小写，标签不要乱嵌套

2.对于css和js来说：使用外链css和js，结构，表现，行为分离三块，结构清晰，提高页面加载速度，用户体验提高

 

三．对Less理解

 Less语言是css的预处理器，动态性语言，可以声明变量，存储的值可以随时调用，还可以值运算，函数等方式。

 

四．WebStorage和cookie的区别

 webStorage是html5的属性，分别是sessionStorage和localStorage

相同点：都是保存在服务器端

1.存储的大小不一样，cookie存储小，数量限制在20个，数据最多不能超过4k，webStorage存储比较大，能达到5M或者更大。

2.共享方式，cookie在同源下只要没过期就会一直共享，localStorage在同源中没被删除也会共享，sessionStorage在窗口关闭之前在同一个窗口同源下才会共享

3.cookie始终在同源的http请求中携带，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存

4.数据的有效期不一样， sessionStorage：仅在当前的浏览器窗口关闭有效

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据

 Cookie：只在设置的cookie过期时间之前一直有效，即时窗口和浏览器关闭

 

五．你对ajax的理解

 Ajax是客户端向服务器发送异步请求数据的一种技术，从服务器获取数据，ajax不必刷新整个页面，只需对局部页面进行更新，提高页面的加载速度，从而缩短用户等待时间，改善用户体验。

Ajax优点：

1. 无需刷新就可以更新数据，减少用户等待时间，更好的用户体验

2. 异步与服务器通信，无需打断用户，响应更加迅速

3. 可以把服务器端的一些负担转到客户端，利用客户端闲置的时间来处理。减去服务器的压力

 

六．讲一下MVVM和MVC模式

MVVM模式：

Model（数据模型）负责对数据的存和取，View（视图负责页面展示），ViewModel（视图数据模型，负责业务逻辑处理），MVVM模式是通过视图模型viewModel来实现连接，view和Model是通过viewModel实现数据双向绑定，分离视图和数据模型

优点：1主要目的是分离视图和模型

      2降低代码耦合度，提高视图或者逻辑的复用性

      3提高了模块的可测试性

MVC模式：Model（模型）处理数据，view（视图）展示数据的界面，controller（控制器）链接模型和视图的桥梁

MVC是一种业务逻辑，数据，界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进界面及用户交互的同时不需要重新编写业务逻辑。实现分离数据模型和视图的代码。

优点：低耦合，复用性高，可维护性高，分离视图和模型

MVC和MVVM的区别：

 MVC的控制器变成MVVM的视图模型，MVVM解决了MVC大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验，当模型Model频繁发生变化，开发者需要主动更新视图，MVC的控制器不能直接改变视图，视图还要依赖于模型，所有MVVM解决了这些问题

 

七．SQL的理解

 SQL是结构化查询语言，是一种数据库查询语言，和数据库通信的语言

 

八．mysql的理解

 MySQL是关系型数据库，特点：开源，免费，轻量，跨平台

优点：1.免费开源，节约成本

       2.性能优越，执行速度非常快

       3.操作简单，学习成本低

       4.应用广泛

 

九．git的理解

 Git是构建代码管理工具，

优点：1.适合分布式开发，强调个体

      2.公共服务器压力和数据量都不会太大

      3.速度快，灵活

      4.任意两个开发者之间可以很容易的解决冲突

      5.离线工作

 

十．Git和svn的区别

 1.git是分布式的，svn不是

 2.git和svn的分支不同

 3.git的内容完整性要高于svn

git和svn的区别是什么？

http://blog.csdn.net/saint1126/article/details/5953339

1.GIT是分布式的，SVN不是：

2.GIT把内容按元数据方式存储，而SVN是按文件：

3.GIT分支和SVN的分支不同：

4.GIT没有一个全局的版本号，而SVN有：

5.GIT的内容完整性要优于SVN：

1.SVN优缺点优点： 1、管理方便，逻辑明确，符合一般人思维习惯。  2、易于管理，集中式服务器更能保证安全性。  3、代码一致性非常高。  4、适合开发人数不多的项目开发。 缺点： 1、服务器压力太大，数据库容量暴增。  2、如果不能连接到服务器上，基本上不可以工作，看上面第二步，如果服务器不能连接   上，就不能提交，还原，对比等等。 3、不适合开源开发但 是一般集中式管理的有非常明确的权限管理机制（例如分支访问限制），可以实现分层管理，从而很好的解决开发人数众多的问题。

2.Git优缺点优点：1、适合分布式开发，强调个体。 2、公共服务器压力和数据量都不会太大。 3、速度快、灵活。 4、任意两个开发者之间可以很容易的解决冲突。 5、离线工作。 缺点：1、学习周期相对而言比较长。 2、不符合常规思维。 3、代码保密性差，一旦开发者把整个库克隆下来就可以完全公开所有代码和版本信息。

 

十一．Vue的理解

  Vue是一套用于构建用户界面的渐进式框架，可以为复杂的单页面应用提供驱动，支持组件化，可以将页面封装成很多个组件，数据驱动加组件化的前端开发，通过简单的API实现响应式的数据绑定和组合的视图组件，核心是关注视图层，是一个构建数据驱动页面的一个框架，将数据绑定视图上，vue提供数据和视图双向绑定原理使我们开发页面更简单，修改了数据，视图会自动更新。Vue是模块化和组件化，如果页面要更新数据，在组件来修改就可以。

Vue有几个特点：1简洁2轻量3快速4模块化5组件化6数据驱动

Vue组件的过程：组件可以提升整个项目的开发效率，能够把页面拆分为多个独立的模块，解决了效率低，难维护，复用性，等问题。

Vue的生命周期

生命周期就是钩子函数，主要是在什么时候来调用这些函数，比如是在创建，挂载，更新，销毁完成之后还是之前，初始化数据完成之前还是之后等

从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列

过程，我们称这是 Vue 的生命周期

beforeCreate : 数据声明还没被调用时使用

created : vue渲染完毕后，所有数据和方法初始化后调用

mounted : 挂载元素之后

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

nextTick : 更新数据后立即操作dom

BeforeMount 挂载开始之前被调用

vue生命周期的作用是什么？

答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

第一次页面加载会触发哪几个钩子？

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

 

十二．jQuery的理解

 jQuery是一个轻量级的javascript框架，极大的简化了js的编程。

1.首先jQuery提供了强大的元素选择器。用于获取html页面中封装了html元素的jQuery对象。像常见的选择器有:基本选择器，层次选择器，过滤选择器，表单选择器。

2.第二点就是jQuery提供了对css样式操作的支持，像对class属性的增加删除切换操作。还有对单个样式操作的支持的css方法，提供了一种简洁统一的操作样式的方法。

3.第三点就是jQuery出色的DOM操作的封装，极大的简化了javascript的对dom节点的增删改查操作，让我们可以使用一种更加简洁的方法来操作节点。

4.第四点就是jQuery还是一个为事件处理特点设计的框架，提供了静态绑定事件和动态绑定事件，完善了事件的处理机制。

5.jQuery解决了大量浏览器之间的兼容性的问题。

6.jQuery极大的简化ajax编程，提供了一种更加简洁，统一的编程方式。

7.jQuery内置了一些简单有用的内置动画，像常见的slideDown/slideUp,hide/show,fadeIn/fadeOut等，还支持基于定位机制使用animate来自定义动画效果。

 

十三：webpack和gulp的理解

Gulp 是一个任务管理工具，让简单的任务更清晰，让复杂的任务易于掌控，对代码进行构建的工具

webpack是一个前端模块化方案，更侧重模块打包，webpack是一款模块加载兼打包工具，它可以将js、jsx、coffee、样式sass、less，图片等作为模块来使用和处理。

 

十四：为什么离开上一家公司

 1.与自己的规划不符合了，需要重新调整自己

 2.自己尝试新的挑战

 

十五、什么是 MVVM , mvp和 MVC 是什么区别, 原理是什么?

mvc的界面和逻辑关联紧密，数据直接从数据库读取，必须通过Controller来承上启下，通信都是单向的。mvvm的View 和 ViewModel可以互相通信，界面数据从viewmodel中获取。

区别：mvc和mvvm都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到View 。

Mvc的实现视图和模型的分离，避免了视图和模型糅合在一起，当视图改变的时候只要业务逻辑没变就不需要改变模型，缺点控制器不能直接更新视图，视图依然依赖模型的数据来显示

Mvp是针对mvc缺点进行改进，mvp分为模型，视图，展示器。Mvp用展示器代替了控制器，展示器直接更新视图，所以mvp的展示器可以处理视图的请求并传送到模型又可以根据模型的变化更新视图，实现了视图和模型的完全分离

Mvvm是mvp的进一步发展，完全实现视图和模型的分离。Mvvm的视图模型代替了mvp的展示器，视图模型和视图实现双向绑定，当视图发生变化的时候视图模型也会改变，视图模型变化的时候视图也发生改变

 

十六、MVC的理解

用一种业务逻辑,数据,界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面.在改进和个性化定制界面及用户交互的同时不需要重新编写业务逻辑，这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见

M模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。

V视图（View）一般用来展示数据，比如通过HTML展示。

C控制器（Controller）一般用做连接模型和视图的桥梁。

 

 

css面试题

一．描述基于class的选择器与基于id选择器在性能上的区别。

答：基于class的选择性的性能相对于基于id选择器开销很大，因为其需要遍历所有DOM元素。 

 

二、如何优化网页加载速度

1.  减少css，js文件数量及大小，压缩css和js代码

2. 图片预加载

3. 把css放置顶部。把js放置在底部

4. 减少http请求

5. 使用外部文件js和css

6. 少用全局变量，缓存dom节点查找的结果

 

三、display:none和visibility:hidden的区别？

display:none  隐藏对应的元素，在文档布局不占据空间

visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

 

四、CSS中 link 和@import 的区别是？

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重 高于@import的权重.

 

五、介绍一下CSS的盒子模型？

（1）有两种，IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了border和padding;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

 

六.解释下浮动和它的工作原理

浮动元素不会占据文档流

当浮动元素碰到包含它的元素的边框或者其他浮动元素的边框时会停留下来。

 

七、. 前端页面有哪三层构成，分别是什么?作用是什么?

 结构层Html 表示层CSS 行为层 js

结构层：对网页内容的语义含义做出了描述，

表示层：如何显示有关内容”的问题做出了回答。

 行为层：内容应该如何对事件做出反应

 

八、标签上title与alt属性的区别是什么?

Alt 当图片不显示是 用文字代表。Title 为该属性提供信息

 

九：简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

 

十：对WEB标准以及W3C的理解与认识     

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

 

十一：语义化的理解？

• HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

• 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；

• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。

• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

 

十二：前端页面有哪三层构成，分别是什么？作用是什么？

结构层、表示层、行为层。

网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。

网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应

 

 

angular面试题

一。angular理解：

·使用AngularJS构建应用时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块.每一个模块完成一个特定的子功能,所有的模块按某种方式组织起来,成为一个整体,完成整个系统所要求的功能.采用模块化的组织方式，可以最大程度的实现代码的复用

 

二、jQuery、vue、angular的区别

·（1）angular是一个mvc框架,  采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组织是模块化的, angular的view可能仅仅是一个框架, , 对view的dom操作或者时间监听都是在directive中实现的, 而且一般情况下很少直接去写dom操作代码, 只要你监听model, model发生变化后view也会发生变化, 就是双向绑定机制, angularjs适用于单页面开发

（2）jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，

 （3）vue是一个渐进式的轻量级框架, 他核心只关注视图层, 是一个构建数据驱动的web界面,易于上手, 还便于与第三方库或与既有项目整合,也能够为复杂的单页应用程序提供驱动，  vue的话是模块化和组块化，如果页面要更改数据之类的，就只在组件来修改就可以了，

 

三。Angular和jQuery的区别

jQuery只是一个类库以DOM做为驱动（核心），jquery是基于操作DOM, 适用于操作DOM比较多的项目, jquery是一个库, 比较大,兼容大部分浏览器, 有丰富的插件, 可拓展性强, jquery不能向后兼容, 使用插件时,可能会有冲突, 而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心），包含模板和双向数据绑定, 路由, 模块化, 服务, 过滤器, 依赖注入等所有功能

 

四。jQuery和vue的区别

    1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。3.可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作

4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的值的变化而变化就叫做双向数据绑定

 

五。angularJS和vue.js的区别

一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定,  但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于  ES5的getter和setter来实现, 而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有过个vue实例

 

六。angularJS双向数据绑定的原理？

监视函数 $watch队列

当我们去做数据绑定时，ng框架会自动的给数据添加一个监听watcher,对应有一个回调当数据变化时，更新视图

如果知道数据发生了变化？

ng会周期性的执行一个函数来检查模型数据是否发生了变化->$digest

什么时候会执行$digest?

ngClick ngSrc常用的ng指令都会触发$digest,也可以手工触发$scope.$digest()

$scope.$apply();-->$rootScope.$digest()

 

七、Setinterval和$interval的区别？

 Setintercal 是js 提供的 不带有自动轮训功能，无法进行时刻改变dom数据

 只能手动添加$apply()或者$digest();

$interval是angularJS提供的一中服务，自带dom数据也循环

 

八, 谈谈你对webpack的看法

一。WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

二。Gulp 和webpack的区别

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

 

 

 

 

js面试题

一．描述垃圾回收器的功能。

答：垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

 

二．documen.write和innerHTML的区别？

答：document.write只能重绘整个页面，innerHTML可以重绘页面的一部分

 

三．那些操作会造成内存泄漏？

答：

• 给DOM对象添加的属性是一个对象的引用。

• DOM对象与JS对象相互引用。

• 给DOM对象用attachEvent绑定事件。

• 从外到内执行appendChild，这时即使调用removeChild也无法释放。

• 反复重写同一个属性会造成内存大量占用。

 

四．一句话说明内存泄漏的定义。

答：内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

 

五．eval是做什么的？

答：eval功能是把对应的字符串解析成JS代码并运行；但不安全，非常耗性能。

 

六．null与undefined的区别？

答：Undefined类型只有一个值，即undefined，当声明的变量还未被初始化时，变量的默认值为undefined。Null类型也只有一个值，即null，null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 

 

七．谈谈对this对象的理解。

答：this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。

 

八．use strict是什么意思？

答：表示代码标志为“严格模式”，则其中运行的所有代码都必然是严格模式下的。如果在语法检测时发现语法问题，则整个代码块失效，并导致一个语法异常。如果在运行期出现了违反严格模式的代码，则抛出执行异常。

 

九．简述new操作符的功能。

答：

（1）创建一个空对象，使用this变量引用该对象，同时还继承了该函数的原型

（2）属性和方法被加入到this引用的对象中。

（3）新创建的对象由this所引用，并且最后隐式的返回this。 

 

十．描述typeof关键字的功能。

答：typeof可用来判断一个变量是否为空或是什么类型的变量。typeof一般只能返回如下几个结果：number、boolean、string、function、object、undefined。 

 

十一．描述instanceof关键字的功能。

答：instanceof可用来判断一个变量是否为空或是什么类型的变量。如果想判断一个变量是否某个对象的实例建议使用instanceof关键字。

 

十二．简述hasOwnProperty函数的功能。

答：hasOwnProperty函数是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。 

 

十三．简述一下isPrototypeOf函数的功能。

答：isPrototypeOf函数是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

 

十四．谈谈对JSON的了解。

答：JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。其是基于JavaScript的一个子集，具有数据格式简单，易于读写，占用空间小的特点。

 

十五．描述一下context的概念。

答：context就是限定查找的范围，context必须是一个DOM元素，context底层还是用了.find()方法来实现的。

 

十六．描述一下.delegate()和.live()方法的区别。

答：delegate方法指定了委托对象，live方法委托给了jQuery的context，1.9版本以后用on方法代替了。

 

十七．描述一下.attr()和.prop()方法的区别。

答：.attr()方法是操作属性节点，.prop()方法是操作获取到的对应js对象的属性。在遇到要获取或设置checked、selected、readonly和disabled等属性时，用prop方法显然更好。.prop()方法更高效，因为.attr()方法要访问DOM。

 

十八。apply()与call()的区别？

功能一样, 都是将当前函数作为指定对象的方法执行, 即函数中的this是指定对象

参数不一样，apply传递的参数是this和一个数组，call传入的参数是this和一串参数列表

 

十九.JavaScript 中 this 是如何工作的。

•作为函数调用，this指向window

•外层函数对应的对象上，这是JavaScript的缺陷，用that替换。

•作为构造函数使用，this 绑定到新创建的对象。

•作为对象方法使用，this 绑定到该对象。

•使用apply或call调用 this 将会被显式设置为函数调用的第一个参数。

 

二十、十次完整的HTTP事务是怎样一个过程

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

 

二十一、HTML5的离线储存？

• localStorage    长期存储数据，浏览器关闭后数据不丢失；

• sessionStorage  数据在浏览器关闭后自动删除。

 

二十二、如何实现浏览器内多个标签页之间的通信?

调用localstorge、cookies等本地存储方式

 

二十三、线程与进程的区别？

一个程序至少有一个进程,一个进程至少有一个线程.

线程的划分尺度小于进程，使得多线程程序的并发性高。 

另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 

线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。 

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

 

二十四、js的全局函数有哪些，js的内置对象有那些？分别各列举5个

decodeURI() 解码某个编码的 URI。

decodeURIComponent() 解码一个编码的 URI 组件。

encodeURI() 把字符串编码为 URI。

encodeURIComponent() 把字符串编码为 URI 组件。

escape() 对字符串进行编码。

eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。

getClass() 返回一个 JavaObject 的 JavaClass。

isFinite() 检查某个值是否为有穷大的数。

isNaN() 检查某个值是否是数字。

Number() 把对象的值转换为数字。

parseFloat() 解析一个字符串并返回一个浮点数。

parseInt() 解析一个字符串并返回一个整数。

String() 把对象的值转换为字符串。

unescape() 对由 escape() 编码的字符串进行解码。

 

二十五、哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

2. 闭包

3. 控制台日志

4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

 

二十六、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点

        createDocumentFragment()  //创建一个DOM片段

       createElement()   //创建一个具体的元素

        createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

       appendChild()

        removeChild()

        replaceChild()

           insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

       getElementsByTagName() //通过标签名称

  getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

  getElementById() //通过元素Id，唯一性

 

二十七：js的类型转换，强制转换和隐式转换

显示：toString()转换为字符串

  parseInt()转换为整数

parseFloat()转换为浮点型数据

Number()如果转换的内容中包含非法字符，结果为 NaN

强制：Boolean(value) - 把给定的值转换成 Boolean 型；

Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；

String(value) - 把给定的值转换成字符串；

隐式：null,undefined,boolean,string,number,object。object是引用类型

 

二十八：简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

作者：xuguibin
链接：https://www.jianshu.com/p/ff4fdea3f2fa