前端网络面试题

我不是女神ヾ 2022-05-10 03:10 229阅读 0赞

1、常见的HTTP状态码你了解多少？描述一下以下状态码  
（1）200 ,请求成功，一切正常，数据成功返回  
（2）301,永久性重定向，是指所请求的文档在别的地方;文档新的URL会在定位响应头信息中给出。浏览器会自动连接到新的URL。  
（3）302,临时重定向，该状态码表示请求的资源已被分配了新的URI，希望用户（本次）能使用新的URI访问。  
（4）303，该状态码表示由于请求对应的资源存在着另一个URI，应使用GET方法定向获取请求的资源  
（5）403，Foribidden 服务器端理解本次请求，但是拒绝执行任务，没有权限访问  
（6）404,NOT,found 请求的资源，网页无法找到，不存在  
（7）503，服务器端无法响应，服务器由于在维护或已经超载而无法响应  
2、什么情况下会遇到跨域，描述一下前端常见处理跨域的几种方式。并封装一个jsonp原理  
浏览器最核心，最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式，当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。  
（1）Jsonp：原理就是利用了script标签不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去。  
（2）CORS：(跨域资源共享)是一种允许当前域的资源被其他域的脚本请求访问的机制。  
当使用XMLHttpRequest发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地址，浏览器得到响应会进行判断Access-Control-Allow-Origin的值是否和当前的地址相同，只有匹配成功后才进行响应处理。  
现代浏览器中和移动端都支持CORS，IE下需要8+  
（3）服务器跨域，服务器中转代理  
前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端。  
3、Web前端应该从哪些方面来优化网站性能  
（1）减少页面体积，提升网络加载  
静态资源压缩合并，（JS/css代码压缩合并，雪碧图）  
静态资源缓存  
使用CDN（内容分发网络）加载资源更快  
（2）优化页面渲染  
css放在前面，js放后面  
懒加载  
减少dom操作  
4、浏览器端存储有哪些，并描述他们的区别。  
cookie localStorage sessionStorage ，他们都是保存在浏览器端，且同源的。  
区别：  
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。  
2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。  
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。  
4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。  
5、说说get和post请求  
1.如果不设定请求方式，默认是get方式  
2.GET请求只能进行url编码，而POST支持多种编码方式。  
3.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。  
4.GET请求在URL中传送的参数是有长度限制的，而POST没有。  
5.对参数的数据类型，GET只接受ASCII字符，而POST没有限制。  
6.安全性，GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。GET参数通过URL传递，POST放在Request body中。  
7.GET产生一个TCP数据包；POST产生两个TCP数据包。（对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据））

6、 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情？  
加载过程：  
浏览器根据 DNS 服务器解析得到域名的 IP 地址  
向这个 IP 的机器发送 HTTP 请求  
服务器收到、处理并返回 HTTP 请求  
浏览器得到返回内容  
渲染过程：  
根据 HTML 结构生成 DOM 树  
根据 CSS 生成 CSSOM  
将 DOM 和 CSSOM整合形成 RenderTree  
根据 RenderTree 开始渲染和展示  
遇到

7、实现你知道的数组去重方法，（最少三种）  
（1）set

function handle() { return Array.from(new Set(arr)); }

(2)indexOf

Var out = []; arr.forEach(function(ele) { if(out.indexOf(ele) == -1) { out.push(ele); } })

(3)利用对象的属性不能相同的特点进行去重

Var out = { }; Var outArr = []; for(var i = 0; i < arr.length; i++) { if(!out[arr[i]]) { out[arr[i]] = 1; outArr.push(arr[i]) } }

(4)使用splice

var len = arr.length for(var i = 0; i < len; i++) { for(var j = i + 1; j < len; j++) { if(arr[i] == arr[j]) { arr.splice(j,1); len--; j--; } } }

8、实现一个深拷贝  
（1）

function deepClone() { return JSON.parse(JSON.stringify(arr)); }

（2）

9、TCP三次握手与四次挥手？  
A对B说：我的序号是x，我要向你请求连接；（第一次握手，发送SYN包，然后进入SYN-SEND状态）  
B听到之后对A说：我的序号是y，期待你下一句序号是x+1的话（意思就是收到了序号为x的话，即ack=x+1），同意建立连接。（第二次握手，发送ACK-SYN包，然后进入SYN-RCVD状态）  
A听到B说同意建立连接之后，对A说：与确认你同意与我连接（ack=y+1,ACK=1,seq=x+1）。（第三次握手，A已进入ESTABLISHED状态）  
B听到A的确认之后，也进入ESTABLISHED状态。  
三次握手的原因是：TCP的三次握手最主要是防止已过期的连接再次传到被连接的主机。  
![在这里插入图片描述][70]  
描述四次挥手就是：  
1.A与B交谈结束之后，A要结束此次会话，对B说：我要关闭连接了（seq=u,FIN=1）。（第一次挥手，A进入FIN-WAIT-1）  
2.B收到A的消息后说：确认，你要关闭连接了。（seq=v,ack=u+1,ACK=1）（第二次挥手，B进入CLOSE-WAIT）  
3.A收到B的确认后,等了一段时间，因为B可能还有话要对他说。（此时A进入FIN-WAIT-2）  
4.B说完了他要说的话（只是可能还有话说）之后，对A说，我要关闭连接了。（seq=w, ack=u+1,FIN=1，ACK=1）(第三次挥手)  
5.A收到B要结束连接的消息后说：已收到你要关闭连接的消息。（seq=u+1,ack=w+1,ACK=1）(第四次挥手，然后A进入CLOSED)6.B收到A的确认后，也进入

![在这里插入图片描述][70 1]  
10、TCP与UDP的区别

> 1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接  
> 2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付  
> 3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的，  
> 4、UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）  
> 5、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信  
> 6、TCP首部开销20字节;UDP的首部开销小，只有8个字节  
> 7、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

11、http是什么?  
　　HTTP是hypertext transfer protocol（超文本传输协议）的简写，它是TCP/IP协议的一个应用层协议，用于定义WEB浏览器与WEB服务器之间交换数据的过程。客户端连上web服务器后，若想获得web服务器中的某个web资源，需遵守一定的通讯格式，HTTP协议用于定义客户端与web服务器通迅的格式。  
12、实现元素的垂直水平居中方式  
(1) 设置定位，margin为自身的的一半，top：50%，left：50%；position：absolute

.wrapper { width: 500px; height: 500px; border: 1px solid #ccc; position: relative; } .wrapper .box { position: absolute; top:50%; left: 50%; margin: -50px -50px; width: 100px; height: 100px; background-color: blueviolet; }

(2) transform:translate(-50%,-50%)  
(3)flex布局 justify-center：center；align-items：center

.wrapper { width: 500px; height: 500px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; } .wrapper .box { width: 100px; height: 100px; background-color: blueviolet; }

(4)margin:auto;position:absolute;left:0;top:0;right:0;bottom:0

.wrapper { width: 500px; height: 500px; position: relative; border: 1px solid #ccc; } .wrapper .box { position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto; width: 100px; height: 100px; background-color: blueviolet; }

13、http与https的区别  
为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。  
http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。  
http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

14、对于模块化的理解以及怎么在书写代码中体现

15、重排（回流）和重绘是什么?什么情况下会触发重排和重绘。  
重绘：浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。  
回流：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。  
回流触发的情况：页面首次渲染；浏览器窗口大小发生改变；元素尺寸或位置发生改变；元素内容变化（文字数量或图片大小等等）；元素字体大小变化；添加或者删除可见的DOM元素；触发display：none ->  
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。  
避免频繁的样式操作，最好一次性重写style,或者一次性更改class,避免频繁操作dom,对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

16、浏览器执行时间线：  
根据js执行那一刻开始的执行顺序 浏览器加载的时间线  
1.创建document对象，开始解析web页面 这时document.readyState 等于’loading’  
2.遇到link标签（外部引用css）创建线程加载，并继续解析文档， 即异步加载  
3.遇到非异步的script标签，浏览器加载并阻塞，等待js加载完成  
4.遇到异步的script标签，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行；对于defer属性的脚本，脚本等到页面加载完之后再执行（异步禁止使用document.write）  
5.遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档  
6.当文档解析完成之后（即renderTree构建完成之后， 此时还未下载完对吧），document.readyState=‘interative’。活跃的 动态的  
7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。  
8.文档解析完成之后 页面会触发document上的一个DOMContentLoad事件  
9.当页面所有部分都执行完成之后 document.readyState == ‘complete’ 之后就可以执行window.onload事件了  
17、异步加载js  
javascript 异步加载 的 三种方案  
1.defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。  
2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。 （1.2 执行时也不阻塞页面）  
3.创建script，插入到DOM中，加载完毕后callBack，

[70]: /images/20220510/e4a90a3660da4b0da5535a3a31773694.png
[70 1]: /images/20220510/07053220ec134905ae4a9c4821618d67.png