四种居中的方式

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

尺寸单位

rem

rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。

px

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

一般电脑的分辨率有{1920*1024}等不同的分辨率

1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

如何画一条高度为0.5px的直线

使用transform

height: 1px;
transform: scale(0.5);

CORS

CORS是一种新的w3c标准，相当于ajax的补充，用于执行跨域ajax请求。是jsonp的替代者。

event对象中target和currentTarget的区别

currentTarget当前所绑定事件的元素
target当前被点击的元素

宏任务和微任务？

宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。
微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。
宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

get请求和post请求的区别

1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内

2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制

3.get后退不会有影响，post后退会重新进行提交

4.get请求可以被缓存，post不可以被缓存

5.get请求只URL编码，post支持多种编码方式

6.get请求的记录会留在历史记录中，post请求不会留在历史记录

7.get只支持ASCII字符，post没有字符类型限制

HTTP状态码

1xx(临时响应) 100: 请求者应当继续提出请求。 101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。 2xx(成功) 200：正确的请求返回正确的结果 201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。 202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。 3xx(已重定向) 300：请求成功，但结果有多种选择。 301：请求成功，但是资源被永久转移。 303：使用 GET 来访问新的地址来获取资源。 304：请求的资源并没有被修改过 4xx(请求错误) 400：请求出现错误，比如请求头不对等。 401：没有提供认证信息。请求的时候没有带上 Token 等。 402：为以后需要所保留的状态码。 403：请求的资源不允许访问。就是说没有权限。 404：请求的内容不存在。 5xx(服务器错误) 500：服务器错误。 501：请求还没有被实现。

清除浮动的方法

在浮动元素后面添加一个空的清除浮动的div

<div style="clear:both;"></div>

使用css :after伪类这种方法是最好的，它不需要更改HTML，只更改样式即可。

.content:after{
     content:".";
     display:block;
     height:0;
     visibility:hidden;
     clear:both;
 }

v8引擎

V8引擎是一个JavaScript引擎实现，最初由一些语言方面专家设计，后被谷歌收购，随后谷歌对其进行了开源。 V8使用C++开发，在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。有了这些功能，JavaScript程序在V8引擎下的运行速度媲美二进制程序。 V8支持众多操作系统，如windows、linux、android等，也支持其他硬件架构，如IA32,X64,ARM等，具有很好的可移植和跨平台特性。

防抖和节流

防抖：连续点击推迟事件执行。连续点击多次的时候只有最后一次点击生效。

function debounce(func, wait) {
    var timeout = null;
    var context = this;
    var args = arguments;
    return function () {
        if (timeout) clearTimeout(timeout);
        var callNow = !timeout;
        timeout = setTimeout(function () {
            timeout = null;
        }, wait)
        if (callNow) func.apply(context, args)
    }
}

节流：连续点击单位时间执行一次。

function throttle(func, wait) {
    var previous = 0;
    return function () {
        var now = Date.now();
        var context = this;
        var args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

手写new

要求： (1) 创建一个新对象； (2) 将构造函数中的this指向该对象 (3) 执行构造函数中的代码（为这个新对象添加属性）； (4) 返回新对象。

function _new(obj, ...rest){
    // 基于obj的原型创建一个新的对象
    const newObj = Object.create(obj.prototype);

    // 添加属性到新创建的newObj上, 并获取obj函数执行的结果.
    const result = obj.apply(newObj, rest);

    // 如果执行结果有返回值并且是一个对象, 返回执行的结果, 否则, 返回新创建的对象
    return typeof result === 'object' ? result : newObj;
}

手写event类

class Event {
    constructor() {
        this.handlers = {}
    }

    on(eventName, cb) {
        const eventCallbackStack = this._getHandler(eventName).callbackStack
        eventCallbackStack.push(cb)
    }

    emit(eventName, ...args) {
        if(this.handlers[eventName]) {
            this.handlers[eventName].callbackStack.forEach(cb => {
                // 修正this指向
                cb.call(cb, ...args)
            })
            // 移除once事件
            if(this.handlers[eventName].isOnce) {
                this.off(eventName)
            }
        }
    }

    off(eventName) {
        this.handlers[eventName] && delete this.handlers[eventName]
    }

    once(eventName, cb) {
        const eventCallbackStack = this._getHandler(eventName, true).callbackStack
        eventCallbackStack.push(cb)
    }

    /**
     * 根据事件名获取事件对象
     * @param eventName
     * @param isOnce  // 是否为once事件
     */
    _getHandler(eventName, isOnce = false){
        if(!this.handlers[eventName]) {
            this.handlers[eventName] = {
                isOnce,
                callbackStack: [],
            }
        }
        return this.handlers[eventName]
    }
}

原型的终点

null

function和object的关系

Function.prototype.__proto__ === Object.prototype;//true
Object.__proto__ === Function.prototype;//true

CSS3新特性

css3新特性新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

旋转 transform: rotate（20deg）；

倾斜 transform: skew（150deg, -10deg）；

位移 transform:translate（20px, 20px）；

缩放 transform: scale(.5)；

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

CSS动画

在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。 transition的作用在于，指定状态变化所需要的时间。

transition-delay

完成动画的时间，可以加上css属性表明只有某个部分增加动画

img{
    transition: 1s height;
}

我们还可以指定transition适用的属性，比如只适用于height。

transition-timing-function

状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease。除了ease以外，其他模式还包括

linear：匀速
ease-in：加速
ease-out：减速
cubic-bezier函数：自定义速度模式

animation

CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称

div:hover {
    animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframes rainbow {
    0% { background: #c00; }
    50% { background: orange; }
    100% { background: yellowgreen; }
}

css权重

第零等：!important，大过了其它任何设置。第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。第四等：代表类型选择器和伪元素选择器，如div p::after，权值为0001。第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。第六等：继承的样式没有权值。

实现宽高等比矩形

css实现宽高等比的矩形：用一个div包住一个div，子div设置width:100%, height: 0, padding-bottom: 对应比例，因为padding是根据宽度计算的，外层的div用来控制具体的i宽高是多少

inline和inline-block

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 inline-block简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

BFC

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)

0 display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

clientHeight, scrollHeight, offsetHeight ,scrollTop和offsetTop的区别

clientHeight 客户端高度，即视口高度，屏幕中的可视高度

scrollHeight dom的完整高度，也就是它的可滚动高度，包括没显示在当前屏幕内的部分

offsetHeight 在clientHeight的基础上加上滚动栏的高度

scrollTop 当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值.

offsetTop 当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值.

CSS渲染规则

css的渲染规则，是从上到下，从右到左渲染的。例如：

.main h4 a { font-size: 14px; } 渲染过程是这样的：首先先找到所有的 a，沿着 a 的父元素查找h4，然后再沿着 h4，查找.main。中途找到了符合匹配规则的节点就加入结果集。如果找到根元素的 html 都没有匹配，则这条路径不再遍历。下一个 a 开始重复这个查找匹配，直至没有a继续查找。

浏览器的这种查找规则是为了尽早过滤掉一些无关的样式规则和元素。

vue3哪些方面变快了

diff方法优化vue2.x中的虚拟dom是进行全量的对比。而vue3.0新增了静态标记。在与上次虚拟节点进行对比的时候，只对比带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容。 hoistStatic（静态提升）:vue2.x中无论元素是否参与更新，每次都会重新创建，然后再渲染。vue3.0中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可。 cacheHandlers（事件侦听器缓存）:默认情况下，如onClick事件会被视为动态绑定，所以每次都会追踪它的变化，但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可。

面试