高于海汇前端面试这是一个比较搞笑的面试，主要是问的不会，回答时乱说，把面试官小姐姐逗笑了。我们一起来看看今天的面试内容

这是一个比较搞笑的面试，主要是问的不会，回答时乱说，把面试官小姐姐逗笑了。我们一起来看看今天的面试内容（面试的内容的回顾，没什么分析，都是一些死知识点，记住就行）。

VUE部分

nexttick的原理

一次弄懂 Vue2 和 Vue3 的 nextTick 实现原理

vue-router的实现

手写Vue-router核心原理，再也不怕面试官问我Vue-router原理

父子组件的生命周期的顺序

加载渲染过程

父组件的beforeCreate
父组件的created
父组件的breforeMount
子组件的beforeCreate
子组件的created
子组件的beforeMount
子组件的mounted
父组件的mounted

子组件更新过程

父组件beforeUpdate
子组件beforeUpdate
子组件uodated
父组件updated

父组件更新过程

父组件beforeUpdate
父组件update

销毁过程

父组件beforeDestroy
子组件beforeDestroy
子组件destroyed
父组件destroyed

CSS

如何实现0.5px的边框线

方法一：背景色渐变

<head>
    ……
    <style>
        .container {
            width: 500px;
        }
        .border-gradient {
            postion: relative;
            border-top: 1px solid green; /* 效果对比 */
            margin-top: 10px;
            padding-top: 10px;
        }
        .border-gradient:after {
            display: block;
            content: '';
            left: 0;
            top: 0;
            height: 1px; /* 关键属性 */
            background-image: linear-gradient(0deg, #f00 50%, transparent 50%); /* 关键属性 */
        }
    </style>
</head>
<body>
    <div class="container container1">
        <h3>方法一：阴影</h3>
        <div>原理：高度1px,背景渐变，一半有颜色，一半透明。</div>
        <div class="border-gradient"></div>
    </div>
</body>

效果：

方法二：利用transform缩放

<head>
    <style>
        .border-scale {
            postion: relative;
            border-top: 1px solid green; /* 效果对比 */
            margin-top: 10px;
            padding-top: 10pxl
        }
        .border-scale:after {
            content: '';
            display: block;
            left: 0;
            bottom: 0;
            height: 1px; /* 关键属性 */
            transform: scaleY(0.5); /* 关键属性 */
            background-color: #f00;
        }
    </style>
</head>

效果：

当然上面的高度也可以换成border的方式实现，大家自己发挥。

回流和重绘

回流：当render tree中的一部分（或全部）因为元素的规模尺寸。布局，隐藏等改变而需要重新构建。如：display、width、height
重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响到布局的，例如：color

隐藏一个dom

visibility: hidden; 不回流，只重绘
opacity: 0; 不回流，只重绘
z-index: n; 利用层叠方式，隐藏dom。回流 + 重绘
display: none; 回流 + 重绘
postion 将dom定位到视野之外。回流 + 重绘

左右布局(固定宽度)，中间自适应

直接上代码吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左中右布局</title>
    <style>
        .container {
            height: 500px;
            overflow: hidden;
        }
        .left {
            width: 300px;
            height: 100%;
            background-color: red;
        }
        .right {
            width: 200px;
            height: 100%;
            background-color: green;
        }
        /* 方式一 */
        .container1 {
            display: flex;
            justify-content: space-between;
        }

        /* 方式二： display: inline-block + float: right< */
        .left2 {
            display: inline-block;
        }
        .right2 {
            float: right;
        }

        /* 方式三：float */
        .left3 {
            float: left;
        }
        .right3 {
            float: right;
        }

        /* 方法四：postion */
        .container4 {
            position: relative;
        }
        .right4 {
            position: absolute;
            right: 0;
            top: 0;
        }

        /* 方法五：grid */
        .container5 {
            display: grid;
            grid-template-columns: 300px auto 200px;

        }

    </style>
</head>
<body>
    <p>方式1: FLEX布局</p>
    <div class="container container1">
        <div class="left left1"></div>
        <div class="right right1"></div>
    </div>

    <p>方式2: display: inline-block + float: right</p>
    <div class="container">
        <div class="left left2"></div>
        <div class="right right2"></div>
    </div>

    <p>方式3: float</p>
    <div class="container">
        <div class="left left3"></div>
        <div class="right right3"></div>
    </div>

    <p>方式4: postion</p>
    <div class="container container4">
        <div class="left"></div>
        <div class="right right4"></div>
    </div>

    <p>方式5: grid</p>
    <div class="container container5">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
</html>

如何实现瀑布流

答案省略。。。

Javascript

输出值

console.log(1);
new Promise(resolve => {
    console.log(2);
    resolve();
}).then(() => {
    console.log(3);
});
setTimeout(() => {
    console.log(4);
    new Promise(resolve => {
        console.log(5);
        resolve();
    }).then(res => {
        console.log(6);
    })
}, 0);
console.log(7);

结果： 1 2 7 3 4 5 6
解析：我不想写，就这样吧（可评论）

如何实现数组的filter方法

Array.prototype.kiFilter = function(func, thisValue) {
    if(typeof func !== 'function') {
        throw new Error(`${func} is not function`);
    }
    const arr = Array.prototype.slice.call(this);
    const len = arr.length;
    let res = [];
    for(let i = 0; i < len; i++) {
        if(i in arr) {
            let isTrue = func.call(thisValue, arr[i], i, arr);
            if(isTrue) {
                res.push(arr[i]);
            }
        }
    }
    return res;
}

如何实现轮询

前端怎样实现一个轮询

如何终止ajax请求

如何取消ajax请求

原生JS

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com');
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.response);
    }
    else {
        console.log(xhr.status);
    }
}
shr.abort();

jQuery

let jq = $.ajax({
    type: 'get',
    url: 'https://api.github.com/',
    dateType: 'json',
    success(data) {},
    errot(err) {}.
});
jq.abort();

取消ajax之后，jQuery封装的ajax对象就会执行error对应的函数

axios

let CancelToken = axios.CancelToken;
let source = CancelToken.source();
axios({
    method: 'GET',
    url: 'https://api.github.com/',
    cancelToken: source.token
}).then(res => {
    console.log(res.data);
}).catch(err => {
    console.log(err);
});
source.cancel('Operation canceled by the user.');

let custom = CancelToken.source();
axios({
    method: 'GET',
    url: 'https://api.github.com/',
    cancelToken: source.token
}).then(res => {
    console.log(res.data);
}).catch(err => {
    console.log(err);
});
custom.cancel('Operation canceled by the user222.');