前端面试题整理（1）

---

一 http相关知识点

http知识点【转】
http各版本区别【转】
http请求头和响应头【转】
https的三次握手【转】

二 缓存cookie、session、token

2.1三者关系

三者关系（好理解）【转】
三者关系【转】

2.2 cookies、sessionStorage和localStorage解释及区别

cookies、sessionStorage和localStorage解释及区别【转】

三 new的一个行为流程

new的一个行为流程

四 script放在head里面会造成什么问题

script放在head里面会造成什么问题

五 水平垂直居中

代码如下（示例）：

<div id="box">
   <div class="box2">55</div>
</div>

1.利用margin负值实现，需要知道自身宽度

#box{
    width: 300px;height: 300px;border: 1px black solid;position: relative;
    }
.box2{
    background: red;width: 100px;height: 100px;position: absolute;
    top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
    }

2.利用transform的translate位移方法实现，需要知道宽度

#box{
    width: 300px;height: 300px;border: 1px black solid;position: relative;
    }
.box2{
    background: red;width: 100px;height: 100px;position: absolute;
    top: 50%;left: 50%;transform: translate(-50px,-50px);
    }

3.利用margin的auto实现

#box{
    width: 300px;height: 300px;border: 1px black solid;position: relative;
}
.box2{
    background: red;width: 100px;height: 100px;position: absolute;
    top:0;left: 0;right: 0;bottom: 0;margin: auto;
}

4.利用calc计算实现

#box{
    width: 300px;height: 300px;border: 1px black solid;position: relative;
}
.box2{
    background: red;width: 100px;height: 100px;position: absolute;
    top: calc(50% - 50px);left: calc(50% - 50px);
}

5.利用table-cell

#box{
    width: 300px;height: 300px;border: 1px black solid;display: table-cell;
    text-align: center;vertical-align: middle;
}
.box2{
    background: red;width: 100px;height: 100px;display: inline-block;text-align: left;
}

6.利用flex

#box{
    width: 300px;height: 300px;border: 1px black solid;display: flex;
    justify-content: center;align-items: center;
}
.box2{
    background: red;width: 100px;height: 100px;
}

7.利用grid

#box{
    width: 300px;height: 300px;border: 1px black solid;display: grid;
    justify-content: center;align-items: center;
}
.box2{
    background: red;width: 100px;height: 100px;
}

8.利用行高对齐

#box{
    width: 300px;height: 300px;border: 1px black solid;text-align: center;
    line-height: 300px;font-size: 0;
}
.box2{
    background: red;width: 100px;height: 100px;display: inline-block;
    font-size: 16px;vertical-align: middle;line-height: initial;text-align: left;
}

六 闭包

当前函数执行时，形成一个私有的上下文，函数执行完后，当前私有上下文中的某些内容，被上下文以外的内容所占用，那么当前上下文就不能被释放，就形成了闭包。

垃圾回收机制

七 防抖节流

7.1防抖

概念：当持续触发事件 一定时间内没有再触发事件 事件处理函数才会执行一次 如果设定的时间到来之前 又一次触发了事件 就重新开始延时
经典应用：1.输入框模糊输入，问题：请求服务器需要一定的时间，返回的数据很可能会出现前一次输入的结果
2.登录，问题：防止用户点击次数过快，发送请求次数过多

var input = document.getElementById('input');
        //防抖函数
        function debounce(delay){
            //闭包 将定时器的变量值一直保存在内存
            let timer;
            return function(value){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    console.log(value);
                },delay)
            }
        }
        var debounceFunc = debounce(1000);
        input.addEventListener('keyup',function(e){
            debounceFunc(e.target.value);
        })

7.2 节流

节流：当持续触发事件的时候 保证一段时间内 只调用一次事件处理函数一段时间内 只做一件事情
经典应用：图片懒加载，页面滑到底部，延迟将图片加载出来

<button id="button">点击</button>
    <script>
        function thro(func,wait){
            let timeOut;
            return function(){
                if(!timeOut){
                    timeOut = setTimeout(function(){
                        func();
                        timeOut = null;
                    },wait)
                }
            }
        }
        function handle(){
            console.log(Math.random());
        }
        document.getElementById('button').onclick = thro(handle,2000);
    </script>

八 promise

九 js操作dom如何增删改查

js中的dom节点操作

十 渲染

10.1 HTML如何渲染到页面上

HTML渲染到页面上【转】