前端面试题收集

• 说说 CSS 盒模型
  网页设计中的盒模型就是指页面中的一块区域，可以分成content，padding，border，margin等结构，盒模型主要分两种，content-box和border-box。区别在于当开发者指定这个区域的width和height时，前者指content部分，而后者指content+padding+border。
• margin 合并/折叠
  外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  要消除外边距合并一般是利用overflow：hidden来触发bfc。
• 如何给未知宽高的图片垂直居中对齐
  将img的display改成block，左右margin设为auto；如果父元素高度不固定可以给图片上下加相同的padding，这是最简单的方法了。除此之外可以用flex布局，给父元素设置justify-content：center；align-items：center；
  还有就是绝对定位了：position：absolute；top：50%；left：50%；transform：（-50%，-50%）；
• JS 变量声明提升是什么意思
  js代码在执行前，所有的var声明和函数声明都会被放到作用域的最顶端首先执行。
• JS 有哪些数据类型
  string，number，Object，Boolean，function，null，undefined
• JSON 是什么
  json是一种数据交换格式，它是ecmascript的一个子集，格式和js里的对象一样，采用键值对的形式保存数据，但是它不同于对象的是，它只接受只js中字符串，数字，布尔值，null，对象和数组类型的数据
• call 和 apply 的区别
  call和apply都是用来调用函数的时候为其传入一个上下文对象（this）；
  其区别就是参数的传递方式不同，call接受一个一个的参数，而apply接受一个数组。
• jQuery 的链式操作是什么
  jquery的调用只有两种方法，1：.ajax()...
  本质就是调用封装好的函数。jQuery的这种管道风格的DSL链式代码，总的来说节约JS代码，所返回的都是同一个对象，可以提高代码的效率。
  原理大致是通过return this的形式来实现跨浏览器的链式调用。
• DOMContentReady 事件是什么
  这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时,初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。
  domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
  document.addeventListener('DOMContentLoaded',function(){...},false);
• 常见网站性能优化手段
  我能想到的有 合并请求，代码压缩，按需加载，利用缓存keep-alive，在js中减少动画效果和加载时的dom操作，这样减少了重绘和重排，等等。
• cookie, localStorage 区别是什么
  cookie是后端通过setcookie向前端种下的一小段信息，容量很小只有4kb，其作用一般是为了辨别用户身份，进行session跟踪。它保存在用户本地终端，可以通过js来读取和修改；
  localstorage是html5中加入的新特性，它也是作为本地储存来使用的，但是它的储存容量有5m，解决了cookie容量不足的问题。它的本质是字符串的储存和读取，所以内容过大会造成页面有卡顿现象。
• 如何做数组去重
  利用ES6的Set来做

function unique(arr){
  return [...new Set(arr)];
}

利用遍历查找

function unique(arr){
  var arr2 = []
  for(let i=0;i<arr.length;i++){
    if(arr2.includes(arr[i]) === false){
      arr2.push(arr[i])
    }
  }
  return arr2
}

利用对象的属性查找

function unique(arr){
  var arr2 = []
  var obj = {}
  for(let i=0;i<arr.length;i++){
    if(!obj[arr[i]]){
      arr2.push(arr[i])
      obj[arr[i]] = 1
    }
  }
  return arr2
}

• call 和 bind 的区别
  这两者的区别在于，call是调用某个函数，同时为函数指定this和参数，然后产生函数调用后的结果；而bind则是单纯地为某个函数绑定this值，然后返回一个不同this的新函数。
• AJAX 是什么，GET 和 POST 的区别是什么
  整个页面不会刷新，从服务器获取数据，更新部分页面的技术；ajax=异步JavaScript+xml。以下是一个ajax实例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
  if (xhr.readyState==4 && xhr.status==200){        
   document.getElementById("myDiv").innerHTML=xhr.responseText;
    }
}
xhr.open("GET","/try/ajax/ajax_info.txt",true);
xhr.send();

get和post的区别就是get提交的数据包含在url里所以有大小限制，而且会被看到，安全性不高。post数据大小无限制，安全性高一点。get能被缓存，post不行；GET只允许 ASCII 字符。POST没有限制。也允许二进制数据；GET后退按钮/刷新无害，POST数据会被重新提交；GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。

• Promise 怎么用
  Promise可以看成一个容器，它内部承载了一个异步操作的结果；从语法上来说他是一个对象，从它这里可以获取异步操作的消息；

function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
};

• var, let, const区别
  var 声明一个变量，在代码执行时声明前置，可以重复声明，没有块级作用域；let 声明不会前置，不可以重复声明，有块级作用域；const声明一个常量，它声明的变量的值是不能改变的。
• JSONP 是什么
  是一种跨域的手段.JSONP的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
  当通过<script>元素调用数据时，响应内容必须用javascript函数名和圆括号包裹起来。而不是发送这样一段JSON数据[1, 2, {"buckle": "my shoe"}]，这就是JSONP中P的意义所在。
  JSONP看起来与JSON差不多，只不过是被包含在函数调用中的JSON，它会发送这样一个包裹后的JSON响应：
  handleResponse([l, 2, {"buckle": "my shoe"}])
  包裹后的响应会成为<script>元素的内容，它先判断JSON编码后的数据，然后把它传递给handleResponse()函数,当然这个函数是前后端约定好的，前端的handleResponse()函数会把json解析出来然后利用到页面上。