2020秋招前端面试总结

面试中问答题目：

面经

1. 浏览器输入url到页面渲染经历了哪些步骤
2. http缓存机制（强缓存协商缓存）
3. 垃圾回收机制
4. 非对称加密和对称加密
5. http和https的区别
6. 回流和重绘
7. 设计模式
8. 类和对象的区别
9. 小程序结构
10. 跨域
11. JSONP的原理和缺点
12. CSRF 和 XSS
13. TCP和UDP的区别
14. OSI七层模型和TCP/IP五层模型
15. v-if 和v-show
16. 排序算法了解哪些？分别是什么？时间复杂度是多少？
17. ES6中数组的方法
18. vue-router
19. 性能优化的方法
20. 怎么实现继承
21. 如何避免原型链上的对象共享
22. 哈希路由
23. 虚拟DOM机制
24. HTTP／1.0／1.1／2.0
25. 防抖和节流
26. 深拷贝
27. for in 和for of
28. css的常见的单位
    px,像素
    em,元素的字体高度,相对于父元素
    %,百分比
    rem,根元素的font-size,相对于根元素,元素
    vm,视窗宽度，1vw=视窗宽度的1%
    vh,视窗高度，1vh=视窗高度的1%
29. 垂直水平居中
    1）absolut ,top,left 50%,margin-top,margin-left:宽高的一半

.box{
	width: 100px;
	height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
	left: 50%;
	margin-top: -50px; /*高度的一半*/
	margin-left: -50px; /宽度的一半*/
}

2)未知宽高：transform 中 translate 偏移的百分比是相对于自身大小而说的。

.content{
	background: orange;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50%);
}

3）margin: auto;实现绝对定位元素的居中

.content{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

4）弹性布局：flex

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body{
    display: flex;
    align-items: center;/*定义body的元素垂直居中*/
    justify-content: center;/*定义body的元素水平居中*/
}
.content{
    width: 300px;
    height: 300px;
    background: orange;
}

5）相对定位

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.content{
    width: 300px;
    height: 300px;
    background: orange;
    margin: 0 auto;/*水平居中*/
    position: relative;/*设置position*/
    top: 50%; /*偏移*/
    /*margin-top: -150px;*/    /*第一种：margin-top*/
    transform: translateY(-50%);/*第二种：transform：转换*/
}

30. 判断变量是不是数组
    1）arr instanceof Array :true
    2）Object.prototype.toString.call(arr) :[‘Object Array’]
    3）Array.prototype.isPrototypeOf(arr) :true
    4）arr.constructor.toString(): Array
    5）Array.isArray(arr) :true

31. call apply bind

32. arguments：所在函数的一个内置类数组对象，可以用数组的[i]和.length。

33. 数组去重
    1）Set： Array.from(new Set(arr))
    2）splice：双重for循环，判断是否相等，相等，删除
    3）indexOf
    4）sort ：相邻元素对比
    5）includes：arr1.includes( arr[i] )
    6）filter：
    7）map：创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

34. 两栏布局

35. 事件委托，点击标签输出对应的序号

36. QUIC

37. vue双向绑定

38. BFC

39. JS延迟加载

40. vue 导航钩子

41. vue 生命周期

42. vue和react的区别

43. vue3.0数据绑定

44. 管理js模块

45. 单页应用和多页应用

46. http 301、304状态码

47. 栈和队列的相同点和不同点

面试中手写题：

1. 实现防抖和节流

<script type="text/javascript">
    //防抖：事件被触发n秒后再执行回调函数，若n秒内又被触发，则重新计时
    function debounce(fn, delay) {
        let timer = null;
        return function () {
            if(timer){
                clearTimeout(timer);
            }
            timer = setTimeout(fn,delay)
        }
    }
    // 节流：规定一个单位时间内，只能有一次触发事件的回调函数执行，若在单位时间内某事件被触发多次，只有一次能生效
    function throttle(fn, delay){
        let flag = true;
        return function(){
            if(!flag){
                return false;
            }
            flag = false;
            setTimeout(()=>{
                fn();
                flag = true;
            },delay)
        }
    }
</script>

2. 手写bind函数

<script type="text/javascript">
// 模拟bind
    Function.prototype.bind1 = function () {
        // 将参数拆成数组
        const args = Array.prototype.slice.call(arguments);
        //获取 this (数组第一项)
        const t = args.shift();
        // fn1.bind(...)中的fn1  （谁执行this就是谁，fn1执行，this就是 fn1）
        const self = this;
        // 返回一个函数
        return function () {
            return self.apply(t,args)
        }
    }
    function fn1(a,b,c) {
        console.log('this:',this);
        console.log(a,b,c);
        return 'this id fn1';
    }
    // 谁执行this就是谁，fn1执行，this就是 fn1
    const fn2 = fn1.bind1({x: 100}, 10, 20, 30)
    const res = fn2();
    console.log(res);  //this: {x: 100} 10 20 30 this id fn1

</script>

3. 深拷贝

<script type="text/javascript">
 // 深拷贝
  function deepClone(target){
   // 定义一个变量
    let result;
    // 判断变量是不是对象
    if(typeof target === 'object'){
        // 判断变量是不是数组
        if(Array.isArray(target)){
            // result赋值为数组
            result = [];
            // 执行遍历
            for(let i in target) {
                // 递归克隆数组中每一项
                result.push(deepClone(target[i]));
            }
            // 如果当前的值是null直接赋值null
        } else if(target == null){
            result = null;
            // 如果当前的值是RegExp直接赋值
        } else if(target.constructor === RegExp){
            result = target;
        } else{
            // 如果当前的值是普通对象，直接for in循环，递归赋值对象所有值
            result = {};
            for(let i in target){
                result[i] = deepClone(target[i]);
            }
        }
    } else {
        result = target;
    }
    return result;
  }
</script>

4. instanceof实现
5. 查找一万个数据的链表的中间值