高频面试总结

不那么厉害的程序媛

已于 2022-04-20 16:30:34 修改

阅读量107

点赞数

文章标签：前端

于 2022-04-20 16:29:26 首次发布

本文链接：https://blog.csdn.net/weixin_46481305/article/details/124300956

版权

垂直居中DIV

<div class="father">
    <div class="son">我是垂直居中的div</div>
</div>

1.绝对定位（盒子宽高已知）

.father {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: red;
    }
    
    .son {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;（-盒子一半宽度）
        margin-top: -150px;（-盒子一半高度） 
        width: 300px;
        height:300px;
        background-color: blue;
    }

2.绝对定位（宽高已知）

.father {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: red;
    }
    
    .son{
        position:absolute;
        margin:auto;
        top:0; left:0; bottom:0;right:0;
        width: 300px;
        height:300px;
        background-color: blue;
    }

3.定位（宽高未知）

    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: blue;
    }

4.flex布局（父元素设置）

    .father {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 500px;
        height: 500px;
        background-color: red;
    }

两栏布局左边固定右边自适应

    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>

1.float布局

        .left {
            width: 200px;
            height: 200px;
            float: left;
            background-color: blue;
        }
        .right {
            margin-left: 200px;
            height: 200px;
            background-color: red;
        }

2.绝对定位

        .father {
            position: relative;
            height: 200px;
        }
        
        .left {
            position:absolute;
            width: 200px;
            height: 100%;
            float: left;
            background-color: blue;
        }

        .right {
            position:absolute;
            height: 100%;
            left:200px;
            right: 0;
            background-color: red;
        }

3.flex布局

        .father {
            height: 300px;
            width: 100%;
            display: flex;
        }

        .left {
            width: 300px;
            height: 100%;
            background-color: blue;
        }

        .right {
            flex: 1;
            height: 100%;
            background-color: red;
        }

三栏布局左右固定中自适应

    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"> </div>
    </div>

1.float布局

    .father{
        height: 50px;
         div{
            height: 100%;
        }
    }

    .left {
        width: 200px;
        float: left;
        background-color: red
    }

    .main {
        margin-left: 200px;
        margin-right: 200px;
        background-color: blue
    }

    .right {
        float: right;
        width: 200px;
        background-color: yellow
    }

2.绝对定位

    .father{
        position: relative;
        height: 50px;
          div{
            position: absolute;
            height: 100%;
        }
    }

    .left {
        left: 0;
        width: 200px;
        background-color: red
    }

    .main {
        left: 200px;
        right: 200px;
        background-color: blue
    }

    .right {
        right: 0;
        width: 200px;
        background-color: yellow
    }

3.flex布局

    .father {
        display: flex;
        height: 50px;
         div{
            height: 100%;
        }
    }

    .left {
        width: 200px;
        background-color: red
    }

    .main {
        flex: 1;
        background-color: blue
    }

    .right {
        width: 200px;
        background-color: yellow
    }

介绍一下盒模型

1.盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成

2.盒模型分为IE盒模型和W3C标准盒模型。

3.W3C标准盒模型又叫content-box，元素宽度/高度由border+padding+content组成。

4.IE盒模型又叫border-box，元素宽度/高度由content组成。

原型，原型链、构造函数

原型：JS中的对象都包含了一个prototype的内部属性，这个属性所对应的就是该对象的原型。

构造函数：原型对象包含一个constructor属性，对应创建所有指向该原型的实例的构造函数。

原型链：原型链是是有一些用来继承和共享属性的对象组成的对象链。并且原型链的长度是有限的，

原型链其实就是继承链，首先在这个对象的自身查找，如果没有该属性，就在其原型链上一层一层向上查找，如果查到原型链的顶端也没有该属性，那么就返回undefined。

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

常用的es6的功能？

1.let、const
let定义变量，可以被重新赋值；const定义常量，不能被重新赋值
2.解构赋值
按照一定的模式从数组或者对象中取值，对变量进行赋值的过程
3.模板字符串 ‘’
4.块级作用域
5.箭头函数

this指向？

1.普通函数胡它还会this指向window
2.构造函数this指向实例对象
3.调用方法this指向改方法所属的对象
4.定时器this指向window

改变this指向的方法？

1.call（）
2.apply（）
3.bind（）

数组去重？

IndexOf()
双重for循环
es6的 […new Set()]
filter()
sort()

1.Set去重
var arr = [1,1,8,8,12,12,15,15,16,16];
function unique (arr) {
return Array.from(new Set(arr))
}

console.log(unique(arr)) //1,8,12,15,16

闭包的理解

理解：主要是为了设计私有的方法和变量。
优点：可以避免全局变量造成污染。
缺点：闭包会常驻内存，增加内存使用量，使用不当会造成内存泄漏。
特征：（1）函数嵌套函数。（2）在函数内部可以引用外部的参数和变量。（3）参数和变量不会以垃圾回收机制回收。

Promise

异步编程的一种解决方案，用来解决回调地狱

三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）（Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。）

resolved函数作用：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved）。
reject函数的作用：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected）。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then: Promise 实例添加状态改变时的回调函数。可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。

缺点：无法取消Promise，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

说一下宏任务和微任务？

JS是单线程，代码自上而下执行；
宏任务：当前调用栈中执行的代码成为宏任务（定时器）
微任务：当前宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为事件的回调（promise.then/proness.nextTick）

宏任务与微任务执行顺序：

script代码为第一层宏任务，如果有setTimeout，setInterval，则他们的回调函数会成为第二层的宏任务，
promise.then()和process.nextTick()是微任务，在执行完该一层的宏任务后执行，且process.nextTick()优先于promise.then();

数组一些常用的方法(es5+es6)

1.添加（push与unshift）
2.删除(pop与shift)
3.从数组中连续删除、插入数据：splice()
4.数组串联：join()
5.数组排序：sort()
6.数组颠倒：reverse()
7.数组抽取：slice()
8.数组合并：concat()
9.数组转为字符串：toString()
(ES5中数组常用方法)
1.forEach()
2.map(映射)
3.filtter(过滤)
4.every(所有)和some(存在)
5.reduce()和reduceRight()
6.indexOf()和lastIndexOf()

对象一些常用的方法

1、Object.keys( ) 对象不具有length属性，因此，你也可以通过Object.keys( )用来获取对象的长度

2、Object.freeze( ) 防止对象中的数据突变

3、Object.seal( ) 它可以防止向对象添加新属性，但是可以更改和更新现有属性

4、Object.values( )允许你将对象内的所有值作为数组获取

5、Object.entries( ) 它允许你同时获取对象的键和值，并返回一个多维数组，该多维数组包含每个键和值的其他数组。

6、Object.create( ) 用于从另一个现有对象的原型创建一个新对象。

页面渲染html的过程？

1.用户输入url地址，浏览器根据域名寻找IP地址
2.浏览器向服务器发送http请求，
3.服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
4.浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

TCP三次握手和四次挥手

三次握手：

第一次：客户端请求建立链接
第二次：服务器端针对客户端的SYN的确认应答并建立链接
第三次：客户端针对服务器端的SYN的确认应答
完成三次握手，随后客户端与服务器端之间可以开始传输数据了

四次挥手：

第一次：客户端请求断开链接
第二次：服务器端针对客户端的FIN的确认应答
第三次：服务器端请求断开链接
第四次：客户端针对服务器端的FIN的确认应答
服务器收到客户端的确认后，就关闭链接，此刻客户端等待一段时间后没有收到回复，就已经证明服务器端已经关闭，这时候客户端也可以关闭链接了

HTTP与HTTPS

HTTP：客户端与服务器之间数据传输的格式规范，表示“超文本传输协议”。
HTTPS：在HTTP与TCP之间添加的安全协议层。
默认端口号：HTTP：80，HTTPS：443。
传输方式：http是明文传输，https则是具有安全性的ssl加密传输协议。
连接方式：http的是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

TCP与UDP的区别

TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接。
TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的
每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信
TCP首部开销20字节;UDP的首部开销小，只有8个字节。
TCP提供可靠的服务。UDP适用于一次只传少量数据、对可靠要求不高的环境。

GET和POST的区别

后退/刷新：GET无害，POST数据会被重新提交。
书签：GET产生的URL地址可以被收藏为书签，而POST不可以。
数据：GET一般是用来获取数据，POST提交数据。
数据类型：GET只允许ASCII字符,POST无限制。
数据大小：GET大小有限制（一般来说1024字节）,POST理论上来说没有大小限制。
安全性：GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
可见性：GET参数通过URL传递对所有人可见，POST数据不可见。
历史保留：GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

如何解决跨域

什么是跨域？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域

常见的：

1、JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    
// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
document.head.appendChild(script);

// 回调执行函数
function handleCallback(res) {
    alert(JSON.stringify(res));
}
 </script>

2、跨域资源共享（CORS）

3、nginx代理

4、WebSocket协议跨域

对MVC和MVVM的理解

M:model(数据模型)，V：view(视图)，C：controller(逻辑处理)，VM：(连接model和view)
MVC:单向通信。必须通过controller来承上启下。
MVVM：数据双向绑定，数据改变视图，视图改变数据。

深拷贝，浅拷贝

浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象

防抖与节流

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
应用场景：
提交按钮、用户注册时候的手机号验证、邮箱验证、

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
应用场景：
window对象的resize、scroll事件
拖拽时候的mousemove
射击游戏中的mousedown、keydown事件
文字输入、自动完成的keyup事件性能优化

性能优化

减少http请求次数
减少DNS查找
避免重定向
使用Ajax缓存
少用全局变量、减少DOM操作的使用
优化图片大小，通过CSS Sprites（精灵图）优化图片，
将css放在顶部，将js放在底部

webpack是怎么打包的，babel又是什么

Webpack：把所有依赖打包成一个 bundle.js文件，通过代码分割成单元片段并按需加载。Webpack是以公共JS的形式来书写脚本的，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。
把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

babel 将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。

git 和 svn的区别

SVN是集中式版本控制系统，版本库是集中放在中央服务器的，首先要从中央服务器哪里得到最新的版本，干完活后，需要把自己做完的活推送到中央服务器。集中式版本控制系统是必须联网才能工作（如果在局域网还可以，带宽够大，速度够快，如果在互联网下，如果网速慢的话，就纳闷了）

Git是分布式版本控制系统，没有中央服务器的，每个人的电脑就是一个完整的版本库，这样，工作的时候就不需要联网了，因为版本都是在自己的电脑上。自己在电脑上改了文件A，其他人也在电脑上改了文件A，这时，只需把各自的修改推送给对方，就可以互相看到对方的修改了。

webSocket

webSocket：可以让服务器主动向客户端发送消息，适合开发聊天室，多人游戏等协作应用。

WebSocket协议是基于TCP的一种新的网络协议。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

Vue中双向数据绑定是如何实现的？

(答：通过数据劫持结合发布—订阅模式，通过Object.defineProperty()为各个属性定义get、set方法，在数据发生改变时给订阅者发布消息，触发相应的事件回调。)

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法

vue生命周期

概念：从创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，称为为Vue 实例的生命周期。

beforeCreate：创建前。此时，组件实例刚刚创建，还未进行数据观测和事件配置，拿不到任何数据。

created：创建完成。vue 实例已经完成了数据观测，属性和方法的计算(比如props、methods、data、computed和watch此时已经拿得到)，但尚未开始挂载。

beforeMount：挂载前。挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM）。编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
mounted：挂载完成。也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，不会触发附加地重渲染过程。
updated：更新后。在由于数据更改导致地虚拟DOM重新渲染和打补丁之后调用，
beforeDestroy;销毁前。在实例销毁之前调用，实例仍然完全可用。（一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件）
destroyed：销毁后。在实例销毁之后调用，调用后，vue实列指示的所有东西都会解绑，所有的事件监听器会被移除。
其他：
activated：在keep-alive组件激活时调用。
deactivated：在keep-alive组件停用时调用。

组件之间如何传值

一、Vue父子组件之间传值

子组件通过props来接受数据和通过$emit来触发父组件的自定义事件；
二、兄弟组件之间的传值

建一个公共组件bus.js.。传递方通过事件触发bus. $emit。接收方通过在mounted（）{}生命周期里触发bus.$ on。
三、可以通过Vuxe 来跨组件传参。路由之间如何传参

路由之间如何传参

跳转时使用push方法拼接携带参数**
```
 this.$router.push({
          path: `/getlist/${id}`,
        })
```
- 通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
          name: 'Getlist',
          params: {
            id: id
          }
        })

使用path来匹配路由，然后通过query来传递参数**

this.$router.push({
          path: '/getlist',
          query: {
            id: id
          }
        })

谈一谈VUEX

原理：Vuex是专门为vue.js应用程序设计的状态管理工具。
构成:

state:vuex的基本数据，用来存储变量。
mutations:提交更改数据，同步更新状态。
actions:提交mutations，可异步操作。
getters：是store的计算属性。
modules:模块，每个模块里面有四个属性。

watch和computed的区别

computed一定有返回值，而watch不需要返回值
computed是依赖的数据发生改变时重新调用, watch是监听的响应式数据发生改变时重新调用

watch和methods的区别

methods是每次调用都会执行函数
watch不需要调用,并且只有监听数据发生改变时才会重新调用

Route和router的区别

route:是路由信息对象，包括“path,parms,hash,name“等路由信息参数。
Router:是路由实例对象，包括了路由跳转方法，钩子函数等。

v-show和v-if的区别

v-if:组件的销毁和重建，更适合带有权限的操作，切换开大。如果开始条件为false则什么都不做，只有为true才会编译。
v-show:css切换，隐藏显示更适合频繁切换。在任何情况下都会被编译，然后被缓存，而且dom元素会被保留。

vue中data为什么是函数而不是对象？

在Vue中组件是可以被复用的，而当data是一个函数的时候，每一个实例的data都是独立的，不会相互影响了。

不那么厉害的程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫