前端网络面试题

1、Http和Https的区别Http协议运行在TCP之上,明文传输,客户端与服务器端都无法验证对方的身份;Https是身披SSL(Secure Socket Layer)外壳的Http,运行于SSL上,SSL运行于TCP之上,是添加了加密和认证机制的HTTP。二者之间存在如下不同:端口不同:Http与Http使用不同的连接方式,用的端口也不一样,前者是80,后者是443;资源消耗:和HT...
摘要由CSDN通过智能技术生成

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
  • 2
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值