前端开发常见面试题

1.盒子模型

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。

2.html5新特性

语义标签  增强型表单  视频和音频   Canvas绘图 SVG绘图    地理定位   拖放API  WebWorker  WebStorage(localStorage,sessionStorage)   WebSocket

3.div垂直水平居中

<div id="father">

        <div id="son">child</div>

 </div>

（1）

#father{

    500px;

  height: 500px;

  background-color: red;

  position: relative;

}

#son {

   100px;

  height: 100px;

  background-color: blue;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  margin: auto;

}

 

（2）

#father{

    500px;

  height: 500px;

  background-color: red;

  position: relative;

}

#son {

   100px;

  height: 100px;

  background-color: blue;

  position: absolute;

  left: 50%;

  top:50%;

  margin-left: -50px;

  margin-top: -50px;

}

（3）

#father{

    500px;

  height: 500px;

  background-color: red;

  display: flex;

  justify-content: center;

  align-items: center;

}

#son {

   100px;

  height: 100px;

  background-color: blue;

}

4.防抖和节流

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

5.http常见的code

1xx - 信息提示   2xx - 成功（200） 3xx - 重定向 （304 - Not Modified）   4xx - 客户端错误   5xx - 服务器错误

6.http和https区别

网站中的通信协议一般就是HTTP协议和HTTPS协议。

HTTP协议是一种使用明文数据传输的网络协议。一直以来HTTP协议都是最主流的网页协议，但是互联网发展到今天，HTTP协议的明文传输会让用户存在一个非常大的安全隐患。

HTTPS协议可以理解为HTTP协议的升级，就是在HTTP的基础上增加了数据加密。在数据进行传输之前，对数据进行加密，然后再发送到服务器。这样，就算数据被第三者所截获，但是由于数据是加密的，所以你的个人信息让然是安全的。这就是HTTP和HTTPS的最大区别。

百度和谷歌两大搜索引擎都已经明确表示，HTTPS网站将会作为搜索排名的一个重要权重指标。也就是说HTTPS网站比起HTTP网站在搜索排名中更有优势。

7.es6新特性

字符串扩展：

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部

   数组解构

   let arr = [1,2,3]

const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
console.log(x,y,z); // 1 2 3

对象解构

const person = {
    name:"jack",
    age:21,
    language: ['java','js','css'// 解构表达式获取const {name,age,language} = person;

// 打印
console.log(name);
console.log(age);
console.log(language);

函数参数默认值

function add(a , b = 1) {
    return a + b;
}
// 传一个参数
console.log(add(10));


箭头函数

var sum3 = (a,b) => {
    return a + b;
}

数组中新增了map和reduce方法。

promise

ES6给Object拓展了许多新的方法，如：

• keys(obj)：获取对象的所有key形成的数组
• values(obj)：获取对象的所有value形成的数组
• entries(obj)：获取对象的所有key和value形成的二维数组。格式：[[k1,v1],[k2,v2],...]

• assian(dest, ...src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。

8.原型

9.react，vue组件通信

10.react和vue区别

11.数组的方法

12.position的属性

13.react/vue生命周期

14.px em rem区别

15.cookie localStorage sessionStorage区别