一年经验前端 杭州几家二线厂面试题梳理

交代下背景

在掘金群比较活跃的群友应该都认识我，我就是那个天天吹水的管理员，最近遇上秋招之际，毕业刚满一年，就打算试下杭州的几家厂，由于自己也是二线厂出身，因此投的也都是二线厂以上，拿到的offer也还ok，如今仍是找工做的状态，若是有杭、沪有理想有技术氛围不修福报固然福利待遇不能太差的团队能够联系我，P5等级。 下面是我遇到的面试题汇总，因为问题实在太多了，只简述思路和答案。

面试问题总结

http方面

如今发现愈来愈多的公司喜欢问前端http的基础，我以为无可厚非，前端人员自己就要了解很杂的东西，http跟咱们的性能优化息息相关。

描述网页从输入url到渲染的过程

1.首先获取url 解析出ip地址 若是本地hosts中有配置优先取出配置  若没有则进行dns解析
2.tcp 三次挥手 创建链接
3.客户端发送http请求
4.服务器处理请求并响应
5.浏览器处理资源文件进行渲染
6.tcp的四次挥手
复制代码

简述三次握手和四次挥手

下面符号的含义 SYN(联机) ACK(确认) FIN(结束)

三次握手

第一次握手：客户端采用TCP协议将带有SYN标志的数据包发送给服务器，等待服务器的确认。

第二次握手：服务器端在收到SYN的数据包后，必须确认SYN，并发送的ACK标志，同时，本身也将会向客户端发送一个SYN标志。

第三次握手：客户端在接收到服务器段的SYN+ACK包后，本身会向服务器发送ACK包，完成三次握手。那么客户端和服务器正式创建了链接，开始传输数据。
复制代码

四次挥手

1. 当客户端的数据传输到尾部时，客户端向服务器发送带有FIN标志的数据包，使其明白本身准备断开通讯了。 TCP规定，FIN报文段即便不携带数据，也要消耗一个序号。

2. 由于TCP的通讯是使用全双工通讯的，因此在断开链接的时候也应该是双向的；当服务器收到带有FIN标志的数据包时，
   其必不会直接发送FIN标志断开通讯的请求，而是先发送一个带有ACK标志的应答信息，使客户端明白服务器还有数据要进行发送。
   
3. 服务器的数据发送完成后，向客户端发送带有FIN标志的数据包，通知客户端断开链接。

4. 当客户端收到FIN后，担忧某些不可控制的因素致使服务器不知道他要断开链接，会发送ACK进行确认，同时把本身设置成TIME_WAIT状态并启动定时器，在TCP的定时器到达后客户端并无接收到请求，会从新发送；当服务器收到请求后就断开链接；当客户端等待2MLS（两倍报文最大生存时间）后，没有收到请求重传的请求后，客户端这边就断开链接，整个TCP通讯就结束了。
复制代码

为何握手是三次，挥手是四次

由于当Server端收到Client端的SYN链接请求报文后，能够直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。
可是关闭链接时，当Server端收到FIN报文时，极可能并不会当即关闭SOCKET，因此只能先回复一个ACK报文。
只有等到我Server端全部的报文都发送完了，才能发送FIN报文，所以不能一块儿发送。故须要四步握手。
复制代码

为何不能进行两次握手连接

若是是两次握手，在第二次结束后，服务器并不能保证客户端已经收到了第二次的请求，如此一来的话，服务器会一直保存着这个通讯过程，
由于TCP通讯都是要占用端口的，形成了必定的资源浪费。因此，就必定要让客户端来发送ACK的确认请求。
复制代码

https的传输过程

1.在服务器端存在一个公钥及私钥

2.客户端从服务器取得这个公钥

3.客户端产生一个随机的密钥

4.客户端经过公钥对密钥加密（非对称加密）

5.客户端发送到服务器端

6.服务器端接受这个密钥而且之后的服务器端和客户端的数据所有经过这个密钥加密
复制代码

https和http的区别

1.https须要证书。
2.http是超文本传输协议，是明文传输，https则是具备安全性的ssl加密传输协议。
3.http和https使用的端口不一样，前者是80，后者是443。
4.http的链接很简单，无状态；HTTPS是由SSL+HTTP构建的可进行加密传输、身份认证的网络协议，比http协议安全。
复制代码

如何肯定服务端开启了gzip

一、客户端请求中增长Accept-Encoding: gzip表示客户端支持gzip；

二、服务端接收到请求后，将结果经过gzip压缩后返回给客户端并在响应头中增长Content-Encoding:gzip 表示响应数据已被压缩

三、客户端接收请求，响应头中有Content-Encodin:gzip表示数据需解压处理
复制代码

为何要用缓存

缓存减小了数据传输，对服务器压力减少，提高前端页面性能。
复制代码

强制缓存和协商缓存

强制缓存是咱们在第一次请求资源时在http响应头设置一个过时时间，在时效内都将直接从浏览器进行获取，
常见的http响应头字段如Cache-Control 和 Expires

协商缓存是咱们经过http响应头字段etag或者Last-Modified等判断服务器上资源是否修改，
若是修改则从服务器从新获取，若是未修改则304指向浏览器缓存中进行获取。
复制代码

css方面

不知宽高的垂直水平居中

1.transform
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
2.flex
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
3. table
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
4.write-mode
    .wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}
5.grid
    .wp {
        display: grid;
    }
    .box {
        align-self: center;
        justify-self: center;
    }
复制代码

若是在图片上面打码

主要经过canvas的合成属性  https://blog.csdn.net/qq_37467034/article/details/92690690 这篇文章上有很好的解释
复制代码

盒模型

标准盒模型的宽高只是内容（content）的宽高，

而在怪异模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高

咱们能够经过 box-sizing进行设置 content-box 和 border-box 尤为注意的是padding-box这个属性，width和height属性包括padding的大小，不包括border和margin
复制代码

flex布局

flex布局实现中间自适应  主要考察对flex里的属性的一些了解。flex-grow就能够。
复制代码

重绘和回流

因为节点的几何属性发生改变或者因为样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, 
color、background-color等，重绘的代价是高昂的，由于浏览器必须验证DOM树上其余节点元素的可见性。


回流是布局或者几何属性须要改变就称为回流。回流是影响浏览器性能的关键因素，由于其变化涉及到部分页面（或是整个页面）的布局更新。
一个元素的回流可能会致使了其全部子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
复制代码

vue方面

vue data格式

vue中使用return语句返回并不使用{}的缘由 是由于 因为组件的复用性，咱们并不能把全部组件的属性指向一个地址，而return能够解决掉这个问题。
复制代码

vue中数据监听

1.咱们都知道object.defineProperty()能够实现以个对象的get和set监听，那若是对象里是多重对象 深度对象的时候呢，
这个时候咱们将经过遍历对象监听的方式 实现对立面每个子对象的监听
2.vue当前版本的数据监听是由问题的 没法对直接操做数组下标值进行监听
3.因此在vue3中 改用proxy取代了object.defineProperty
复制代码

前端安全方面

xss攻击原理

第1、XSS反射型攻击，恶意代码并无保存在目标网站，经过引诱用户点击一个连接到目标网站的恶意连接来实施攻击的。

第2、XSS存储型攻击，恶意代码被保存到目标网站的服务器中，这种攻击具备较强的稳定性和持久性。

解决方案
    1. url过滤
    2.提交的符号如<>（尖括号）、”（引号）、 ‘（单引号）、%（百分比符号）、;
    （分号）、()（括号）、&（& 符号）、+（加号）等转义。严格控制输出
复制代码

crsf

CSRF 跨站请求伪造.CSRF指的是攻击者盗用了你的身份,以你的名义发送恶意的请求,给你形成我的隐私泄露及财产安全.一般指携带你的ck进行请求一些连接。
 
 解决方案
 
 添加refer 改用token
复制代码

js方面

this的指向问题

哪一个对象调用函数，函数里面的this指向哪一个对象。箭头函数没有this，箭头函数的this是引用箭头函数这层的this。
复制代码

bind apply call区别

bind apply call虽然都是改变this 指向， 可是首先bind返回的是一个函数，须要执行。而call和apply会自动执行。以后apply接受的参数为一个数组。
复制代码

原型漏洞问题

这个问题主要考察的是一层object.freeze(),经过object的冻结来实现对象的没法修改。因为以前jquery和lodash都爆发了相关漏洞。
复制代码

async和await

主要考察宏任务和微任务 搭配promise 询问一些输出的顺序 木易杨大佬的100道题有很好的解释。
async和await  用了同步的方式去作异步  async定义的函数的返回值都是promise  await后面的函数会先执行一遍，而后就会跳出整个async函数来执行后面js栈的代码
复制代码

手写promise

这里不举例了 掘金上有不少很好的手写promise的文章。
复制代码

script标签里 defer和async的区别

defer和async虽然都是异步加载js  可是async是加载完js后立马执行 而defer要等待以前所有渲染完再去进行执行。
复制代码

手写深度遍历节点

function traverseDF(node,nodeList){
    if(node){
    nodeList.push(node);
        for(var i=0;i<node.children.length;i++){
            traverseDF(node.children[i],nodeList);
        } 
    }
}
复制代码

主要考察的是对递归和高阶函数的一个应用。官方概念是“变量能够指向函数，函数的参数能接收变量，那么一个函数就能够接收另外一个函数做为参数，这种函数就称之为高阶函数” 常见的map reduce等等就是高阶函数。

简介下promise.all

下面这些拷贝自木易杨大佬的github

Promise.all()方法将多个Promise实例包装成一个Promise对象（p），接受一个数组（p1,p2,p3）做为参数，
数组中不必定须要都是Promise对象，可是必定具备Iterator接口，
若是不是的话，就会调用Promise.resolve将其转化为Promise对象以后再进行处理。
使用Promise.all()生成的Promise对象（p）的状态是由数组中的Promise对象（p1,p2,p3）决定的；

一、若是全部的Promise对象（p1,p2,p3）都变成fullfilled状态的话，生成的Promise对象（p）也会变成fullfilled状态，
p1,p2,p3三个Promise对象产生的结果会组成一个数组返回给传递给p的回调函数；
二、若是p1,p2,p3中有一个Promise对象变为rejected状态的话，p也会变成rejected状态，第一个被rejected的对象的返回值会传递给p的回调函数。
Promise.all()方法生成的Promise对象也会有一个catch方法来捕获错误处理，可是若是数组中的Promise对象变成rejected状态时，
而且这个对象还定义了catch的方法，那么rejected的对象会执行本身的catch方法。
而且返回一个状态为fullfilled的Promise对象，Promise.all()生成的对象会接受这个Promise对象，不会返回rejected状态。
复制代码

es6 class和构造函数的区别

1.class 声明会提高，但不会初始化赋值。Foo 进入暂时性死区，相似于 let、const 声明变量。
2.class 声明内部会启用严格模式。
3.class 的全部方法（包括静态方法和实例方法）都是不可枚举的。
4.class 的全部方法（包括静态方法和实例方法）都没有原型对象 prototype，因此也没有[[construct]]，不能使用 new 来调用。
5.必须使用 new 调用 class。
6.class 内部没法重写类名。
7.ES5 和 ES6 子类 this 生成顺序不一样。ES5 的继承先生成了子类实例，再调用父类的构造函数修饰子类实例，ES6 的继承先生成父类实例，再调用子类的构造函数修饰父类实例。这个差异使得 ES6 能够继承内置对象。
复制代码

性能优化方面

webpack优化

1.外部引入模块(CDN)
2.按需引入
3.tree-shaking
4.开启gzip
复制代码

其他的优化

1.前面提到的强制缓存与协商缓存
2.减小没必要要的http请求 对资源进行合并
3.使用骨架屏提高用户体验
4.前面提到的defer延迟加载
5.懒加载(项目中没用到 因此面试的时候我不多被问到这个)
复制代码

总结

不管什么公司，面试都是按照你的简从来的，简历上写了什么就会被问到什么这是必然的，好的前端基础+优秀的项目经验 会对面试有很大的提高。其次，面试的时候必定要保持自信，不要被面试官的 “你肯定么”这种话语左右，你越不自信，印象分会越差，会就是会，不会也不要不懂装懂。但愿即将秋招的各位一块儿共勉。

最后感谢掘金给我分配了一个可爱的女友，顺便帮刚毕业的女友发个求职吧，上海有招刚毕业的应届生的团队请联系我。