面试题

1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

2. 不定宽盒子水平垂直居中（position和tranform结合、flex布局）

a> position和tranform结合实现

<style>
    body,html {
        margin: 0;
        width: 100%;
        height: 100%;
    }
    #box {
        width: 100%;
        height: 100px;
        background: rgba(0, 0, 0, 0.7);
        position: relative;
    }
    #content {
        position: absolute;
        width: 50%;
        height: 50px;
        background: pink;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
</style>
<div id="box">
    <div id="content"></div>
</div>

b> flex实现

<style>
    body,
    html {
        margin: 0;
        width: 100%;
        height: 100%;
    }
    #box {
        width: 100%;
        height: 100px;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #content {
        width: 40%;
        height: 50px;
        background: pink; 
    }
</style>

3. 写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式（flex布局、position、float都可以实现）

a>flex实现

<style>
  .parent {
      display: flex;
  }
  .left {
      width: 200px;
      height: 100px;
      background-color: red;
  }
  .right {
      width: 200px;
      height: 100px;
      background-color: green;
  }
  .middle {
      flex:1;   /*flex-grow、flex-shrink、flex-basis  ===>  1 1 0% */
      background-color: blue;
  }
</style>
<div class="parent">
   <div class="left"></div>
   <div class="middle"></div>
   <div class="right"></div>
</div>

b>float实现（必须是把中间盒子放在最下边）

<div style="float: left;width: 200px;background-color: red">123</div>
<div style="float: right;width:200px;background-color: green">456</div>
<div style="background-color:violet;">789</div>

4. 盒模型（marign、padding、border）

• 标准盒模型（浏览器默认就是标准盒模型）box-sizing:content-box;
• IE盒模型 box-sizing : border-box
  区别：标准盒模型 content不包括padding和border，而IE盒模型包括

5. 边距重合问题（BFC块级上下文格式化）

• 父子盒子，当子盒子设置margin-top但是作用到父级盒子，并没有作用到子盒子把父级盒子高度撑起来。解决方法：在父级盒子加overflow:hidden或者加clearfix
• 兄弟盒子，当兄弟盒子设置了margin-top，margin-bottom的时候，上下边距会重合，取最大的值生效。解决方法：在两个盒子中间加空div设置为overflow:hidden或者是加clearfix
• 父和子盒子，当同时设置margin-top，取最大的值生效。解决方法：overflow:hidden或者是加clearfix

6. float元素引起的问题

• 当我两个同级盒子一个盒子设置了float:left，另一个盒子没有设置，导致的后果就是第二个盒子跑到第一个盒子下边；解决方法：给父级盒子设置overflow:hidden
• 当我两个盒子同事设置了float，会导致父级盒子高度为0；解决方法：给父级盒子设置overflow:hidden或者是clearfix

7. 阐述清除浮动的几种方式（常见问题）

• 给父级盒子设置固定高度，弊端是如果子级高度和父级div不一样时，会产生问题;
• 给父级盒子设置overflow:hidden;
• clearfix
• 最后加一个空div，设置clear:both;

.clearfix:before,.clearfix:after{
    content:"",
    display:table,
    clear:both
}
.clearfix {
   zoom:1
} 

8. css sprites（用于局部小盒子布局）

把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
好处：减少HTTP请求次数，从而提高了网站性能。假设有6个小图，就有6个HTTP请求，但是如果是放在一个大图里，就只需要1次，因为你要的6个小图都在一张大图里，请求一次后不用再次发送HTTP请求去请求图片资源。

9. 如何用原生js给一个按钮绑定两个onclick事件？

//只执行btn()；事件绑定在html标签上
<button onclick="btn()" onclick="btn_1()">按钮</button>
<script>
    function btn() {
        console.log(111)
    }
    function btn_1() {
        console.log(222)
    }
</script>


//同时执行两个方法
<button onclick="btn();btn_1()" >按钮</button>

//只执行show()；事件绑定在js代码中
<script>
    let btn = document.getElementById("btn");
    btn.onclick = show;
    btn.onclick = print;
</script>

//同时执行两个方法；使用事件监听 
<button id="btn">按钮</button>
<script>
    let btn = document.getElementById("btn");
    btn.addEventListener("click",function(){
        console.log(111)
    });
    btn.addEventListener("click",function(){
        console.log(222)
    })
</script>

10. Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout(function(){},1000);  //一秒以后执行
setInterval(function(){},1000);  //每隔几秒执行一次 
//它们都是window对象上的方法

11. 计算一个数组arr所有元素的和

let arr = [1,2,3,6,8];
let sum = 0;
for(let k of arr.values()){
    sum += k;
}
console.log(sum)   //20

12. 数组去重

//1.利用includes或者是indexOf
let arr = [1,2,3,6,2,6,8];
let newArr = [];
for(let k of arr.values()){
    if(newArr.includes(k) == false){  //新数组如果不存在就push
        newArr.push(k)
    }
}
console.log(arr)
console.log(newArr)


//2.set数据结构
let newArr = [...new Set(arr)]

13. DOM事件类

• 什么是事件模型：事件模型（Event Model）是一种处理事件的方式，它允许程序在执行过程中对用户的行为或系统的状态改变做出反应。JavaScript中的事件模型主要基于DOM（Document Object Model），用于处理用户与网页的交互。事件冒泡（从下到上的冒泡）和事件捕获（从上到下捕获）
• 捕获的过程：window->document->html->body-...->目标对象
• 冒泡的过程：和捕获相反的过程
• js怎么定义事件?

//方法1
<button id="btn" onclick="show()"></button>

//方法2
let btn = document.getElementById("btn");
btn.onclick=function(){};

//方法3
let btn = document.getElementById("btn");
btn.addEventListener("click",function(event){},false)

• event事件对象
  常见的事件对象应用方法
  1.event.preventDefault() 阻止默认行为比如a的默认跳转行为
  2.event.stopPaganation() 阻止事件冒泡
  3.event.currentTarget 一个父元素下边有十个子元素但是又不想通过for循环给10个子元素都绑定事件，这时候可以给父元素绑定一个事件，但是要确定是当前哪个元素被点击了，获取当当前被点击的元素 。
  4.event.target 就是绑定事件的元素，就是上一例子中的父元素。

• btn.addEventListener("click",function(event){},false)，默认是false，指的是在冒泡时候触发事件，如果设置为true，则是在捕获过程中触发

14. HTTP协议类

• http协议特点就是简单快速，无连接，无状态
  无连接指的是链接一次就会断掉，不会保持；
  无状态指的就是这一次连接无法确定是否和上一次链接是同一身份
• http报文包括请求报文、空行、响应报文
  请求报文：请求行（请求方法、url地址、协议版本）、请求头、空行、请求数据（post请求参数）
  响应报文：响应头、响应体、空行、状态行
• 一次完整的Http请求是怎样一个过程（在浏览器输入一个地址到页面渲染怎么一个过程）
  域名解析 -->建立TCP/IP三次握手（通过三次握手建立一次连接） -->建立链接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 解析html代码，并且请求html中的资源（js、css、图片...）-->浏览器对页面进行渲染。
• get、post的区别
  1.get是不安全的，它的参数会暴露在地址栏上，而post不会；2.get的请求参数有限制，post没有；3.get浏览器回退的时候不会重复提交，而post请求会重复提交；4.get通过url传递参数，而post参数是在请求体中。
• http状态吗
  1xx：指示信息 2xx：成功 3xx：重定向 4xx 客户端错误 5xx：服务器错误 常见的有：200客户端请求成功 301所请求的页面已经转移至新的url 400语法错误 403对被请求页面的访问禁止 404请求资源不存在

15. 构造函数类

• 创建对象的两种方式：

//方法1 使用字面量
let obj = {name:"zhangsan"};

//方法2   使用构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

let person = new Person('Alice', 25);

//方法3   使用类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
let person = new Person('Alice', 25);

• 任何一个函数只要被new了就是一个构造函数（构造函数首字母一般大写）

• let obj = new M()；可以实例化一个函数

• 声明一个构造函数js会自动分配一个prototype属性，prototype会初始化一个空对象，这个对象就叫做原型对象；

• 原型对象会有一个构造器constructor默认是你声明的那个构造函数（构造函数中的prototype属性中是一个空对象，空对象中有一个constructor属性）M.prototype.constructor === M ---->true;

• 任何构造函数都有一个prototype属性，但是只有构造函数有，对象没有，对象有--proto--属性，任何对象都有--proto--属性，函数也有，因为函数也是一个对象

• 原型链图
  

  image.png
  image.png
  原型链是指当一个对象尝试访问一个属性或方法时，如果该对象自身不拥有这个属性或方法，那么JavaScript会在该对象的原型（即proto属性指向的对象）中查找，如果还没有找到，则继续在原型的原型中查找，直到找到或到达原型链的顶

• instanceof可以判断一个实例对象是不是构造函数的实例（只要是原型链上的对象都为true）
  如果是a继承了b，b继承了c，a的实例对象o检测abc都为true

o instanceof M ===>true
o instanceof Object ===>true

• constrctor属性：只有是构造函数直接生出的实例对象才是true

o.__proto__.constructor === M ===>true
o.__proto__.constructor === Object ===>false

所以来说用constructor比用instanceof判断更加严谨。

16. 类

什么是对象：对象就是一组无序的属性和方法的集合，具体描述
什么是类：一组具有相同的属性和方法的集合，类似一个模版
例如：生活中人就是一个类，每个人又是类的具体描述。

• 特点：封装、继承、多态

• 定义一个类

//方法1 通过构造函数模拟一个类
function Cat(){
  this.name = "喵"
}
Cat.prototype.sayName = {
  console.log("喵喵")
}

//方法2 ES6新增class
class Cat {
  constructor(){
    this.name = "喵"
  }
  sayName(){
    console.log("喵喵")
  }
}

上面代码定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。也就是说，ES5 的构造函数Point，对应 ES6 的Point类的构造方法。事实上，类的所有方法都定义在类的prototype属性上面。

• 如何继承一个类

//es5做法
function Parent(){
    this.x = 10;
}
function Child(){
  this.y = 20;
}
Child.prototype = new Parent();
let parent = new Parent();
let child = new Child();
console.log(parent.x)   //10
console.log(child.x)  //10


//es6做法
class Parent {
    constructor() {
        this.x = 10;
    }
    //类的方法
    num() {
        this.xx += 1;
    }
}

class Child extends Parent {
    constructor() {
        super()
        this.y = 20;
    }
}
let parent = new Parent();
let child = new Child();
console.log(parent.x)   //10
console.log(child.x)  //10
console.log(parent.y)   //undefined
console.log(child.y)  //20

• new 一个对象的过程

1.创建一个空对象，类型为object；
2.在空对象内部创建一个this对象,this的proto属性指向构造函数的prototype；
3.将构造好的对象返回

function Person() {
    var this = {
        __proto__: Person.prototype
    }
    this.name = name
    this.age  = age

    return this
}

var person = new Person()

17. 通信类

• 什么是同源策略限制：同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
• 什么是同源：协议、域名和端口三个部分（默认端口80）这三个中有一个不一样就是跨域了。

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。

http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

• 解决跨域通信的几种方式？JSONP 、CORS

1.JSONP：创建动态script标签，然后利用script的src属性可以实现跨域，src中的带有回调函数，通过回调函数来接受后台数据。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

首先，网页动态插入<script>元素，由它向跨源网址发出请求。

 function addScriptTag(src) {
   var script = document.createElement('script');
   script.setAttribute("type","text/javascript");
   script.src = src;
   document.body.appendChild(script);
 }
 
 window.onload = function () {
   addScriptTag('http://example.com/ip?callback=foo');
 }
 
 function foo(data) {
   console.log('Your public IP address is: ' + data.ip);
 };
 

上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。

服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

foo({
  "ip": "8.8.8.8"
});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

2.CORS（跨域资源共享）：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。浏览器在识别你在用ajax发送了一个跨域请求时候会自动在http头中加一个origin，来允许跨域通信。如果不使用CORS，浏览器会默认ajax不能进行跨域通信

对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

const formFetch = (url,params) => {
    return fetch(url, {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        params: params
    }).then(res=> {
        return res.json();
    })
}
export default formFetch;

CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据

18. 渲染机制类

• Doctype 是用来 声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些错误。DTD是一系列文档类型 .例如html，xhtml
• <!DOCTYPE html> 4.0版本有两种模式，一个是严格模式，对于弃用的标签不能正确显示，一个是传统模式对于弃用的标签比如font可以正确解析。
• 浏览器的渲染过程：把html经过html parse 转成dom tree ,css也是经过 css parse 转成cssom tree,然后dom tree和cssom tree结合以后，变成render tree,render tree（render tree此时并不知道div画在哪，宽高）结合layout以后，便可以在浏览器上画页面了。
• 重排Reflow：DOM结构中的各个元素都有自己的盒模型，这些都需要浏览器根据各种样式计算并根据计算结果将元素放到它该出现的位置，这个过程叫做Reflow。
• 重绘Repaint：就是浏览器把你确定以后的盒模型绘制一遍放到页面上，这个过程称为Repaint。

当你增加、删除、修改DOM节点时，会导致Reflow或Repaint。移动DOM位置，修改css样式、修改网页默认字体等都会触发Reflow。

如何减小Repaint的概率：将节点放入到docment 片段中，一次性加入到dom结构中。

19. js运行机制

• js是单线程运行机制，在同一时间内只能做一件事情。定时器属于异步任务，console.log属于同步任务，js优先执行同步任务

20. 页面优化

• 资源整合压缩，减少http请求
• 非核心代码异步加载（单独把文件抽出来）
• 利用浏览器的缓存

异步加载方式：动态脚本加载（动态创建节点）
defer async （在script标签上加上这两个属性）

区别：延迟defer脚本相当于告诉浏览器立即下载，但是延迟执行，如果是多是按顺序执行的；而异步async脚本告诉浏览器立即下载文件，但不保证他们会按照先后顺序执行，下载和执行。指定async的目的是不让页面等待两个脚本因此要确保两个文件不存在依赖关系。defer和async都只适用于外部文件。

一般放入head里边但是这样意味着全部的javascript文件下载解析完之后才执行页面的内容，这样对于多个javascript文件页面显示的内容会有延迟，空白页面，为了避免这个问题，一般将script引入放入body元素种页面内容的后面

21. 浏览器缓存cookie、sessionStorage、localStrorage的之间的相同点和不同点？localStrorage、sessionStrorage是H5新增的方法。

相同点：都是保存在客户端，且同源的。
不同点：（三方面）

• 数据和服务器的交互方式：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存;
• 存储数据的大小：cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；
• 有效时间：cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
  localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  sessionStorage 数据在当前浏览器窗口关闭后自动删除。