前端面试题及解析（一）

1、css的居中方式:

左右居中：div居中方法：margin:o auto ;文本居中方法：text-align:center;         定位来居中：                           left：50%

上下居中：height和line-height设置一样   table属性中：vertical-align:middle;

2、px,em,rem,%：

px:像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。

em：相对长度单位，它是用来设置文本的字体尺寸的，相对于父级元素对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸16px.

rem：css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根目录，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。

%：类似于em，相对于父级，适用于width、height、font-size等。

3、display的值和作用:

display:block,将此元素转换为块元素 、none不显示此元素，inline-block转换为行内块级元素，                  inline默认属性

4、路由跳转的方式:

     1、路径跳转：router-link  to:'/home'  不能传引用数据类型-数组，对象等

     2、命名式路由跳转        router-link  to:"{name:'home',params或query传值 }"可以传基本数据类             型和数组，对象

     3、编程式路由跳转  this.router.push()   params或query传值都可以传基本数据类型以及对                 象，数组

5、vue生命周期的理解

     Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。（不是很理解图示及钩子函数的使用）

6、vue数据双向绑定的原理，用了什么设计模式

看不懂。。。。。。。。不会

7、数组去重

function unique(arr) {
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {//indexOf 查找值第一次出现的位置，没有返回-1
            array .push(arr[i])
        }
         //也可用 arr.includes() 来处理
    }
    return array;
}


[...new Set(arr)]
ES6中方法 set 去重


function unique(arr) {
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return array;
}

8、统计字符串中出现最多的字符

 function num(str) {
            var obj = {};
            var len = str.length;
            for( var i = 0; i < len; i++) {
                var alpha = str[i];
                if ( obj[alpha] ) {
                    obj[alpha]++;
                }
                else {
                    obj[alpha] = 1;
                }
            } 
            var maxNum = -1;
            for( key in obj) {
                if ( obj[key] > maxNum) {
                    maxNum = obj[key];
                }
            }
            var maxKey = [];
            for( key in obj) {
                if ( obj[key] == maxNum) {
                    maxKey.push(key);
                }
            }
            console.log('出现最多次数的字符是:' + maxKey + ' 出现次数为:' + maxNum);
        }

9、js垃圾回收机制

垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。

垃圾回收器获取根并“标记”(记住)它们。然后它访问并“标记”所有来自它们的引用。然后它访问标记的对象并标记它们的引用。所有被访问的对象都被记住，以便以后不再访问同一个对象两次。以此类推，直到有未访问的引用(可以从根访问)为止。除标记的对象外，所有对象都被删除。

10、原型、原型链

原型：在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。

原型链：每一个对象数据类型(普通的对象、实例、prototype......)也天生自带一个属性__proto__，属性值是当前实例所属类的原型(prototype)。原型对象中有一个属性constructor,它指向函数对象。

11.作用域链

一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链

12.购物车的实现过程（包括怎么布局，可以用vue、react、jq等）

13.购物车详情页优化（用户商品加入太多导致页面卡顿）（懒加载、分页）

14.页面渲染过程

1．解析HTML文件，创建DOM树  HTML引擎

2．解析CSS,形成CSS对象模型   css引擎

3．将CSS与DOM合并，构建渲染树（renderingtree）  布局  js引擎

4．布局和绘制  

15.闭包

Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

16.http协议

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器

17.http中的方法，除了get方法、post方法

http1.0中还有head方法 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头

http1.1中 put 从客户端向服务器传送的数据取代指定的文档的内容。

delete 请求服务器删除指定的页面。 

options 允许客户端查看服务器的性能。 

patch 是对 PUT 方法的补充，用来对已知资源进行局部更新 
18.数据结构（排序算法，冒泡以外的）

19.vue和react的区别，用法区别

vue和react.js最大的不同之处在于它们对DOM的渲染方式不同，vue可以直接在vue文件中使用html标签，数据绑定时类似angular，可以进行条件渲染，而react.js则采用了jsx语法，运用虚拟DOM 的概念进行DOM对页面元素进行渲染，获取页面元素需要用ref来获取，vue和react之间最关键的相同之处在于，它们在被设计出来时所用的思想或者说理念是一样的，比如说都用到了component组件，props参数传递，组件之间的通信，state状态管理器，lifecircle声明周期等等，

20.网页上哪里可以看到请求的所有信息

network 的XHR中