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)
function deepClone(obj) {
var newObj = obj instanceof Array ? [] : {};
if(typeof obj != 'object') return obj;
for(var prop in obj) {
newObj[prop] = typeof obj[prop] == 'object' ? deepClone(obj[prop]) : obj[prop]
}
return newObj;
}
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的三次握手最主要是防止已过期的连接再次传到被连接的主机。
描述四次挥手就是:
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的确认后,也进入
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,