面试准备

• 一、css
  • 盒模型
  • 如何实现一个最大的正方形？
  • 水平垂直居中
• 二、JS

一、css

1、盒模型

.box{
   width:200px;
   height:200px;
   padding:20px;
   border:20px solid black;
   margin:20px;
   background:red;
}
标准模式下：box-sizing:content-box;  红色区域：width 200px + padding 20px * 2
ie模式下：box-sizing: border-box; 
  红色区域： width：200px - padding 20px * 2 - border 20px * 2 

2、如何实现一个最大的正方形？

 .box {
     width:100%;
     padding-bottom: 100%;
     height:0;
     background:red;
 }
 用padding-bottom撑开边距。

3、水平垂直居中

水平居中：

(1) 行内元素：text-align: center;

(2) 块级元素： margin: 0 auto;

(3) flex弹性布局

  .item{
     display: flex;
     justify-content: center;
  }

(4) transform属性

 .son{
     position: absolute;
     left:50%;
     transform: translate(-50% , 0);
 }

(5) 绝对定位和负的margin / 绝对定位

.son{
    position: absolute;
    left: 50%;
    width: 固定；
    margin-left: -50% * 固定；
}

 .son{
     position:absolute;
     left: 0;
     right: 0;
     margin: 0 auto;
     width: 固定；
 }

垂直居中 （1）单行文本： line-height = 父元素height (2) 行内块元素

 .parent::after .son{
     display: inline-block;
     vertical-align: center;
 }
 .parent::after{
     content: '';
     height:100%;
 }

(3) flex弹性布局

缺点：IE8、9 不支持，需要浏览器厂商前缀，渲染上可能有问题

.parent{
    display: flex;
    align-items: center;
}

(4)元素高度不定---- transform

缺点：IE8不支持，需要浏览器厂商前缀，渲染上可能有问题

.son {
    position: absolute;
    top: 50%;
    transfrom: translate(-50%, -50%);
}

(5) 元素高度固定---适用于所有浏览器

.son {
    position:absolute;
    top:50%;
    height: 固定;
    margin-top: - 50% * 固定;
}

.son{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

4、常见布局 （1）两列布局，左边固定宽度，右边自适应

 .left{
     width: 200px;
     float: left;
     margin-right: 10px;
 }
 .right{
     overflow: hidden; // 创建 bfc
 }

(2) 左右等高布局

<div class="layout">
  <div class="left">left</div>
  <div class="right">center</div>
</div>

<style>
.layout{
  display: table;
  width: 100%;
}
.layout div{
  display: table-cell;
}
.layout .left{
  width: 50%;
  height: 200px;
}
.layout .right{
  width: 50%;
}
</style>

5、三角形

.sqre{
    width:0;
    height:0;
    border-top: 20px solid blue;
    border-bottom: 20px solid yellow;
    border-left: 20px solid transparent;
    border-right: 20px solid red;
}

6、link 和@important的区别？

<style type="text/css">@import url(路径地址/test.css);</style>

<link href="路径地址/test.css" rel="stylesheet" type="text/css" />

• 加载顺序：引入css时，link页面载入时同步加载 ---页面完全载入加载；
• 属性：link是xhtml标签，除了引入css还可以定义rss其他事务。 ---- 只能加载css.
• link 无兼容问题--- @important 是css2.1提出的，有低版本兼容问题；
• link支持js方式改变dom样式---@important不支持；

7、bfc---块格式化上下文 （block formatting context）定义？

触发条件：

• 根元素 html;
• 浮动元素（float不为none）；
• 绝对定位元素（postion等于fixed或者absolute）;
• 内联块（display: inline-block）;
• 表格单元格和表格标题；
• 具有overflow 且 不为none的块元素； 特性(功能)：
• 使bfc内部浮动元素不会乱跑；
• 和浮动元素产生边界。

二、JS 1、js的基本数据类型？ 判断方法？

基本类型： number、string、 boolean、 undefined、 null

引用类型： object、 function、 array

判断方法：

(1) typeof

 可以判断出 number,string,boolean,undefined;  typeof null = undefined; 
 typeof object/arrry = object;

(2) Object.prototype.toString.call() 所有类型都可以使用。常用于判断浏览器内置对象；

    if(Object.prototype.toString.call(data) === '[object Object]') {
       return 'object'
     } else if(Array.isArray(data)) {
       return 'array'
     } else {
       return 'base'
     }
调用该方法输出的结果：[objec XXX] 

(3) Array.isArray(XXX) 判断是否为数组

2、es5和es6声明变量的方法？ es5: 有var/function es6: 有 let\const\class\important

3、闭包的概念？优缺点？

    function makeFunc() {
       var name = "Mozilla"; // name 是一个被 makeFunc 创建的局部变量
       function displayName() { // displayName() 是内部函数，一个闭包
           alert(name);  // 使用了父函数中声明的变量
       }
       return displayName;
   }
   
   var myFunc = makeFunc();
   myFunc();

概念：内部函数总是可以访问其所在的外部函数中声明的变量和参数；

特点：

• 让外部函数访问内部函数的变量；
• 外部函数声明的局部变量会常驻内存中，缓存变量；
• 可以避免使用全局变量，造成全局污染；
• 内存空间无法得到释放，造成内存泄漏；

4、赋值、浅拷贝、深拷贝

(1) 赋值：将某一个数值或者对象赋给另一个变量；

基本数据类型：赋值，两个变量之间不互相影响；
引用数据类型：赋址，两个变量实际上是指向同一地址，相互影响；

(2) 浅拷贝 ：创建一个新的对象，该对象是对原始对象属性值的精确拷贝；（基本类型将拷贝基本类型的值，引用类型则是拷贝引用类型的内存地址）

 使用场景：
 * 方法一：Object.assign()
 * 方法二： 展开语法spread {...XX }
 * 方法三：Array.prototype.slice(start, end);--不包含end元素的新数组；
 ```
let a = {
    name: "tom",
    msg: {
        num: "1"
    }
}
let b = Object.assign({}, a); 
或 let b = { ...a};
或 let b = a.slice(0);
a.name = "jon";
a.msg.num = "2";
console.log(a);
// {
// 	name: "jon",
// 	msg: {num: '2'}
// } 
console.log(b);
// {
// 	name: "tom",
// 	msg: {num: '2'}
// } 
 ```

(3) 深拷贝

将拷贝所有的属性，包含属性所指向的动态分配的内存；

使用场景：
* 方法一：JSON.parse(JSON.stringify(object))
* 方法二： 使用递归的方法
缺点：
 会忽略 undefined\symbol\ 函数;
 不能序列化-函数；
 不能解决循环引用的对象, 会报错；
 不能处理正则；
 不能正确处理new Data(),转换结果会不对应；
 例子一：
  let obj = {
        name: 'muyiy',
        a: undefined,
        b: Symbol('muyiy'),
        c: function() {}
    }
    let b = JSON.parse(JSON.stringify(obj));
    console.log(b);
    // {name: "muyiy"}
例子二：
    // 木易杨
    let obj = {
        a: 1,
        b: {
            c: 2,
       		d: 3
        }
    }
    obj.a = obj.b;
    obj.b.c = obj.a;
    let b = JSON.parse(JSON.stringify(obj));
    // Uncaught TypeError: Converting circular structure to JSON
例子三：
    new Date();
    // Mon Dec 24 2018 10:59:14 GMT+0800 (China Standard Time)
    JSON.stringify(new Date());
    // ""2018-12-24T02:59:25.776Z""
解决办法：转为字符串或时间戳
    new Date().valueOf();
    // 1545620645915
例子四：
   正则表达式无法字符串转换～
   let obj = {
        name: "muyiy",
        a: /'123'/
    }

5、数组去重的方法 （1）原始方法：定义一个新数组，将数组中的元素与新数组中的元素一一对比，不相同则放入新数组中。 （2） 先将数组排序，再与相邻位置对比，不同的放入新数组中； （3） 利用数组的indexOf下标属性来查询； （4） 利用es6的set方法； (5) 用数组原型对象上的方法

 *  includes方法
 *  filter和includes方法
 * forEach和includes方法

方法一：
 function deal(list) {
   let now = [list[0]], old = list;
   for(var i= 1; i<old.length;i++) {
     var repeat = false;
     for(var y = 0; y < now.length; y++) {
       console.log(old[i],now[y]);
       if(old[i]=== now[y]){
         repeat = true;
         break;
       }
     }
     if(!repeat) {
        now.push(old[i]);
      }
   }
   return now;
 }
 
 方法二：
  function deal(list) {
   let now = [], old = list.sort();
   for(var i= 0; i<old.length;i++) {
     if(old[i]!== old[i-1]){
       now.push(old[i]);
     }
   }
   return now;
  }
  
  方法三：
  function deal(arr) {
     //Set数据结构，它类似于数组，其成员的值都是唯一的
    return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}
方法四：
   function deal(list) {
      let now = [], old = list;
       for(var i= 0; i<old.length;i++) {
       // indexof方法
         if(now.indexOf(old[i] === -1)){
           now.push(old[i]);
         }
        // includes
        if(!now.includes(old[i])){
           now.push(old[i]);
         }
       }
   return now;
  }
 方法五：
 function deal(list) {
   var now = [];
   //
   now = list.filter((item) => {
     return now.includes(item) ? '' : now.push(item)
   })
   // list.forEach((item) => {
       return now.includes(item) ? '' : now.push(item);
   }
   return now;
  }

6、dom事件有哪些阶段，谈谈对事件代理的理解？

三大阶段：捕获-目标-冒泡

事件代理：事件不直接绑定在某元素上，而是绑定了该元素的父元素上，进行触发事件后，通过条件判断执行相关操作；

7、前端性能优化 （1） 减少请求数量 （2） 减小资源大小 （3） 优化网络连接 （4） 优化资源加载 （5） 减少重绘回流 （6） 性能更好的api (7) webpack优化

• 减少请求数量：合并，图片处理（雪碧图、base64编码），减少重定向，使用缓存，不使用css@import
• 减小资源大小： html\js\css\图片压缩，wep格式图片，
• 优化网络连接：使用CDN，使用dns预解析，并行连接，持久连接
• 优化资源加载：资源加载位置（css放在head中，js放在body的底部），资源加载时机（模块按需加载，资源懒加载，资源预加载）
• 减少重绘回流