web前端开发常见面试题（一）

1.简述ajax的过程

          1.创建XMLHttpRequest对象，也就是创建一个异步调用对象

          2.创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息

          3.设置响应HTTP请求状态变化的函数

          4.发送HTTP请求

          5.获取异步调用返回的数据

2.ajax请求的时候get和post方式的区别

          get一般用来进行查询操作，url地址有长度限制,请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低

          post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内客存在于http请求体中，数据不会暴漏在url地址中

          Get和Post的区别，何时使用Post？

          GET:一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符

          P0ST:一般用于修改服务器上的资源，对所发送的信息没有限制在以下情况下，请使用POST请求：

            1.无法使用缓存文件(更新服务器上的文件或数据库)

            2.向服务器发送大量数据(post没有数据量限制)

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

3.如何解决跨城问题

          理解跨域的概念:协议、域名、端口都相同才同域，否则都是跨域。

          出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨城获取文件内客，所以基于这一点,可以动态创建script标签，使用标签的src属性访回js文件的形式获取js脚本，并且这个js脚本中的内客是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案。

4.Vue与React的对比

        相同点:中心思想相同:一些都是组件，组件实例之间可以嵌套；

                   都提供了合理的钩子函数，可以为开发教定制化的去处理需求；

                   都不内置类似AJAX、Router等功能到核心包，而是以插件加载；

        不同点:React依赖虚拟DOM，而Vue.js使用的是DOM模板；

                    vue.js在模板中提供了指令、过滤器等，可以非常方便、快捷的操作D0M

5.Vue与AngularJS

        相同点:都支持指令、过滤器、双向数据绑定等

                    都不支持低端浏览器(IE6/7/8)

        不同点:AngularJS学习成本比较高，比如增加了依赖注入特性，而vue.js本身提供的API较简单、直观；

                    在性能上，AngularJS依赖对数据做脏检查,所以Watcher越来越慢。Vue.js基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的，对于庞大的应用来说，这个优化养异还是比较明显的

6.什么是闭包

       闭包就是有权访问一个函数内部变量的函数，也就是常说的函数内部嵌套函数，内部函数访问外部函数变量，从而导致垃圾回收机制没有将当前变量回收掉。在一个函数里面嵌套另一个函数，被嵌套的那个函数的作用域是一个闭包。这样的操作，有可能会带来内存泄漏。好处就是可以设计私有的方法和变量。

      作用：创建私有变量，减少全局变量，防止变量名污染。可以操作外部作用域的变量，变量不会被浏览器回收，减少变量的值。使用闭包可以形成独立的空间，延长变量的生命周期，报存中间状态值 。读取函数内部的变量值；让这些变量值始终保存着(在内存中)。

       同时需要注意的是：闭包慎用，不滥用，不乱用，由于函数内部的变量都被保存在内存中， 会导致内存消耗大。

7.哪些操作会造成内存泄漏?

        内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用 数量为 0(没有其他对象引用过该对象)，或对该对象的唯一引用是循环的，那么该对象 的内存即可回收。

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

        2. 闭包

        3. 控制台日志

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

8.前端开发的优化问题。

（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 布局慢。

9.请说一下你对promise的理解？并说一下promise你是如何使用的？

        我个人对promise的理解是，promise是异步编程的一种解决方案，他比传统的回调函数加事件更加合理和强大，目前我用promise除了使用他的异步操作外，还使用promise在项目中解决了回调地狱等问题。

        接下来，我在说一下promise的特点，promise一共有两个特点:

                对象不受外界影响，并且promise一共有三个状态，分别是进行中，成功，或者失败，只有异步操作的结果，可以决定是哪一种状态，任何其他的操作都无法改变这个状态；

                一旦状态改变，就不会再变，任何时候都可以得到这个结果，promise的状态改变只有两种可能，要么是成功，要么失败。

        如果要使用promise必须还要对promise进行实例化，实例化之后promise内有一个回调函数，这个函数里面有两个参数，分别是resolve和reject，当我们的状态发生变化的时候，如果是成功则会通过resolve将成功的结果返回出去，如果失败，那么可以通过reject将错误的信息也返回出去，我们可以通过.then方法接收返回的是成功的结果，通过catch可以接受失败的结果。

        promise常用的方法还有promise.all方法，主要是用来将多个实例包装成一个新的实例，以及

promise.rece()方法

        那么在项目中我一般使用promise来对api接口进行封装，以及一些异步的操作，都会使用到

promise

10.请说一下箭头函数与普通函数的区别？

        普通函数是很早就提出的，而箭头函数是es6提出的，他们两个在语法上不一样，并在普通函数与箭头函数他们this的指向也不要一样，普通函数内的this指向是如果没有绑定事件元素的时候，this指向的window，或者在闭包中this指向的也是window，如果函数绑定了事件，但并没有产生闭包，这个this指向的是当前调用的事件对象，箭头函数内this的指向是父作用域

        箭头函数不能使用arguments，普通函数可以使用，arguments是以集合的方式获取函数传递的参数

        箭头函数不能实例化为构造函数，而普通函数可以进行实例化