Skip to main content

http

低代码和微前端有了解吗?

微前端是一种架构风格,旨在将前端应用程序拆分为更小的、可独立开发和部署的微服务单元。这些微服务单元可以是独立的应用程序、模块或组件,它们可以合并在一起以构建复杂的前端应用。

请求参数如何防算改

  1. 使用HTTPS: 使用 HTTPS 来加密请求和响应,确保数据在传输过程中不会被篡改。HTTPS 使用 SSL/TLS 协议来加密通信,因此更难被中间人攻击窃听或篡改。
  2. 防 CSRF 攻击: 使用 CSRF(跨站请求伪造)令牌来防止跨站请求伪造攻击。这些令牌需要在每个请求中包含,并在服务端验证。
  3. 不信任用户输入: 避免将未经处理的用户输入直接插入到请求参数中。对用户输入进行验证和清理,以防止 SQL 注入、XSS 和其他安全漏洞。
  4. 验证请求来源: 在服务端,验证请求的来源是否合法。可以使用一些方式来验证,如白名单、IP 地址限制、或 OAuth2 验证。
  5. 签名请求: 在请求中包含一个签名,用于验证请求的完整性。签名通常使用加密算法(如HMAC)生成,使用密钥来进行签名和验证。服务端可以验证签名以确保请求未被篡改。
  6. 使用JWT(JSON Web Tokens): JWT 是一种令牌,可以在请求中包含用户信息或其他数据。JWT 包含签名,以确保令牌的完整性。JWT 可以在服务端验证以确保它没有被篡改。
  7. 数据加密: 对于敏感数据,可以在请求中加密数据。前端可以使用公共密钥加密数据,服务端使用私钥来解密和验证数据完整性。
  8. 安全头部和CORS设置: 使用安全的 HTTP 头部和 CORS(跨源资源共享)设置来限制请求的来源和行为。

localStorage如何跨域获取

  1. 使用代理页面:可以创建一个中间代理页面,该页面和目标域名同源,然后在代理页面中通过脚本访问 localStorage 数据,然后将这些数据传递给原始页面。这可以通过浏览器中的iframe或window.postMessage等方式来实现。

  2. CORS(跨域资源共享):如果目标域名支持CORS,你可以在发送请求时包含跨域请求头(如Access-Control-Allow-Origin),从而允许其他域名的页面访问 localStorage 数据。目标域名的服务器需要进行相应的CORS配置。

http缓存有哪些

HTTP 缓存是一种通过在客户端和服务器之间存储响应的技术,以减少请求响应的加载时间和减轻服务器负担的方式。HTTP 缓存通常依赖于 HTTP 标头来定义缓存策略。以下是一些常见的 HTTP 缓存机制和相关的 HTTP 标头:

  1. 浏览器缓存:

    • 强缓存:浏览器在请求资源时,首先检查是否有缓存,如果有并且未过期,浏览器会直接使用缓存,不发送请求到服务器。强缓存可以通过 Cache-ControlExpires 标头来定义。
      • Cache-Control: max-age=3600:设置缓存有效期为 3600 秒。
      • Expires:指定缓存过期的绝对时间,已经不再推荐使用。
    • 协商缓存:如果强缓存失效,浏览器会发送一个请求到服务器,服务器会检查资源的最后修改时间或内容摘要(如 ETag)来确定是否需要返回新的资源。协商缓存可以通过 If-Modified-SinceIf-None-Match 标头来定义。
      • If-Modified-Since:如果资源在指定日期后有更新,返回新的资源。
      • If-None-Match:如果资源的 ETag 与指定的不匹配,返回新的资源。
  2. CDN 缓存:内容分发网络(CDN)通常会缓存静态资源,以加速资源的分发。CDN 可以配置缓存策略,类似于浏览器缓存策略。

  3. 代理服务器缓存:代理服务器(如反向代理、负载均衡器)可以缓存响应,以减轻后端服务器负担,提高性能。代理服务器可以配置缓存策略。

  4. 服务端缓存:后端服务器也可以缓存响应,以避免重复生成动态内容。这通常是通过服务器端缓存中间件(如 Redis、Memcached)来实现的。

HTTP 缓存是一种重要的性能优化技术,可以显著减少网络流量、加速页面加载速度,并降低服务器负载。不同的缓存策略适用于不同的应用场景,具体的缓存配置取决于你的应用需求和性能目标。

websocket的底层协议

WebSocket 是一种基于 TCP 的通信协议,用于实现双向实时通信。它是一种轻量级、低延迟的协议,允许客户端和服务器之间建立持久的双向连接,以便实时交换数据。WebSocket 协议的底层通信采用以下特点:

  1. 基于 TCP:WebSocket 使用基于 TCP 的底层协议。TCP 是一种可靠的协议,确保数据可靠传输,但会引入一些额外的开销。

  2. 双向通信:WebSocket 允许客户端和服务器之间进行全双工通信,客户端和服务器都可以随时向对方发送消息,而不需要等待请求-响应周期。这使得实时的双向通信变得更加容易。

  3. 持久连接:WebSocket 连接是持久的,一旦建立连接,它可以一直保持打开状态,而不需要不断地建立和断开连接,减少了连接建立和维护的开销。

  4. 低延迟:相对于一些传统的轮询技术(如长轮询或短轮询),WebSocket 提供了更低的延迟,因为它不需要频繁地重新建立连接。

  5. 头部开销小:WebSocket 的协议头部相对较小,占用较少的带宽,使通信更高效。

  6. 支持二进制和文本数据:WebSocket 支持发送文本和二进制数据,因此适用于各种用途,包括实时聊天、在线游戏、实时通知等。

WebSocket 协议的通信过程通常涉及三个阶段:

  1. 握手阶段:客户端发送 WebSocket 握手请求,服务器响应并握手成功,建立连接。这个握手阶段通常使用 HTTP 协议来完成。

  2. 数据传输阶段:一旦握手成功,客户端和服务器可以相互发送数据帧,包括文本和二进制数据。

  3. 关闭阶段:要关闭连接,客户端或服务器可以发送关闭帧,以正常关闭连接。这可以由任一方发起。

为什么要减少http的请求

减少 HTTP 请求是网页性能优化的关键策略之一,主要基于以下原因:

  1. 加速页面加载速度:HTTP 请求的数量直接影响网页加载时间。每个 HTTP 请求都需要建立连接、传输数据、接收响应等步骤,这些步骤会增加页面加载时间。通过减少请求的数量,可以显著提高页面加载速度,提供更好的用户体验。

  2. 提高性能:过多的 HTTP 请求可能导致页面加载时浏览器的性能下降,尤其在移动设备上更为明显。减少请求可以减轻浏览器的负担,提高性能。

为了减少 HTTP 请求,可以采用以下一些常见的策略:

  • 合并文件:合并多个 CSS 和 JavaScript 文件,以减少文件数量。
  • 使用 CSS 精灵图:将多个小图片合并成一个精灵图,以减少图片请求。
  • 延迟加载资源:将不是首次加载必需的资源(如图片、脚本)标记为延迟加载,以在页面加载后再加载它们。
  • 使用字体图标:代替小图标图片,使用字体图标(icon fonts)。
  • 使用 HTTP/2 协议:HTTP/2 支持多路复用,可以更有效地处理多个请求。
  • 优化图片:使用适当的图片格式、压缩和缩放图片以减少文件大小。

单点登录(Single Sign-On,简称 SSO)是一种身份验证和授权机制,

实现 SSO 需要根据具体的身份验证协议(如OAuth2、OpenID Connect、SAML等)和技术(如SSO库或中间件)来配置认证中心和服务提供者之间的集成。这些协议和技术提供了安全的身份验证和授权机制,以确保用户的身份得到保护。

单点登录是一种提供更好的用户体验和安全性的身份验证机制,可以减少用户的登录繁琐,同时提供了更好的身份管理和控制。

允许用户在多个应用程序或服务之间只需一次登录,然后可以无需重新输入凭证就能访问其他受信任的应用程序。SSO 的实现通常涉及以下关键步骤和组件:

  1. 认证中心(Identity Provider,IdP):认证中心是实现 SSO 的关键组件。它是负责验证用户身份的服务器,管理用户帐户和身份信息,以及颁发令牌的地方。常见的 IdP 包括微软的Azure AD、Okta、Auth0、以及开源解决方案如Keycloak。

  2. 服务提供者(Service Provider,SP):服务提供者是依赖 SSO 的应用程序或服务。SP 是受信任的应用,它允许用户通过认证中心登录。SP 需要与认证中心进行配置和集成,以允许 SSO。

  3. 令牌(Token):令牌是包含用户身份信息的安全凭证,它由认证中心颁发。常见的令牌类型包括 JSON Web Token (JWT) 和 Security Assertion Markup Language (SAML) 令牌。

实现单点登录的典型流程如下:

  1. 用户尝试访问一个需要认证的服务提供者(SP)应用程序,但尚未登录。

  2. SP 将用户重定向到认证中心(IdP)的登录页面。

  3. 用户在 IdP 的登录页面上输入凭证(例如用户名和密码)。

  4. IdP 验证用户凭证,成功后颁发一个令牌(通常是JWT或SAML令牌)。

  5. 用户的浏览器将令牌返回给 SP。

  6. SP 验证令牌的有效性,如果令牌有效,SP 将用户登录到应用程序。

  7. 用户现在已经登录到 SP 应用程序,然后可以访问其他受信任的应用程序,而无需重新输入凭证。

https为什么比http更安全

数据加密:HTTPS 使用安全套接字层(SSL)或传输层安全(TLS)协议来加密数据传输。这意味着在数据从客户端传输到服务器或从服务器传输到客户端的过程中,数据会被加密,使黑客难以窃取或窥视数据。对于敏感数据(如登录凭证、支付信息等),加密对抗中间人攻击非常重要。

身份验证:HTTPS 使用数字证书来验证服务器的身份。这意味着用户可以确信他们正在连接到预期的服务器,而不是恶意伪装的服务器。数字证书由可信赖的证书颁发机构(Certificate Authorities,CAs)颁发,以确认服务器的身份。这有助于防止钓鱼攻击和其他欺诈行为。

完整性验证:HTTPS通过使用消息认证码(MAC)来验证数据的完整性。这意味着数据在传输过程中不会被篡改,否则接收方会注意到数据已被修改。

https和http的区别

HTTP(Hypertext Transfer Protocol)和HTTPS(Hypertext Transfer Protocol Secure)是两种不同的协议,它们在数据传输和安全性方面有很大的区别。

HTTP(Hypertext Transfer Protocol):

  1. 未加密:HTTP 是一种明文协议,数据传输是未加密的,这意味着敏感数据(如登录凭证、个人信息等)在传输过程中容易被拦截和窥视。

  2. 安全性较低:HTTP 不提供数据完整性验证,也不提供服务器身份验证,因此容易受到中间人攻击和伪装攻击的威胁。

  3. 默认端口为80:HTTP 默认使用端口80进行通信。

  4. 速度相对较快:由于不涉及加密和安全性验证,HTTP 的传输速度相对较快,适用于一些不涉及敏感信息的场景。

HTTPS(Hypertext Transfer Protocol Secure):

  1. 加密传输:HTTPS 使用安全套接字层(SSL)或传输层安全(TLS)协议来加密数据传输,确保数据在传输过程中是加密的,防止数据被拦截和窥视。

  2. 高安全性:HTTPS 提供了数据完整性验证和服务器身份验证,确保数据在传输过程中不会被篡改,同时用户可以信任连接的服务器。

  3. 默认端口为443:HTTPS 默认使用端口443进行通信。

  4. 速度相对较慢:由于加密和安全性验证的开销,HTTPS 的传输速度相对较慢。然而,现代的HTTPS协议已经优化,使速度降低的影响最小化。

内存泄露是什么,怎么导致的

前端页面内存泄漏指的是在 web 应用程序中,浏览器分配的内存无法被正确释放和回收,导致页面占用的内存持续增加,最终可能导致页面性能下降、响应变慢,甚至浏览器崩溃。前端页面内存泄漏通常是由以下原因导致的:

  1. 未销毁的引用:当页面中的对象(如 DOM 元素、JavaScript 对象、事件监听器等)仍然被其他对象引用,即使你不再需要这些对象时,它们也无法被垃圾收集器回收。

  2. 闭包:在 JavaScript 中,如果函数中引用了外部的变量,该函数形成了闭包,这些引用的变量不会被销毁,从而导致内存泄漏。

  3. 未解绑事件监听器:如果你在 DOM 元素上绑定了事件监听器,但在元素被销毁之前忘记解绑,这将导致事件监听器持续存在,即使元素已被销毁。

  4. 定时器未清除:如果你使用 setTimeoutsetInterval 创建定时器,但忘记清除它们,定时器将继续运行并保留对相关函数的引用,导致内存泄漏。

  5. 大型数据结构:如果你创建了大型数据结构(如数组或对象),但忘记在不再需要它们时将其清空或销毁,这些数据结构会一直占用内存。

  6. 循环引用:当两个或多个对象相互引用时,垃圾收集器无法识别不再被引用的对象,导致它们不会被释放。

  7. 缓存:在某些情况下,缓存数据可能长时间保留在内存中,即使在后续操作中不再需要。

为了避免前端页面内存泄漏,开发者需要仔细管理对象的生命周期,确保在不再需要时正确销毁对象、解绑事件监听器、清除定时器和及时释放内存。使用浏览器的开发工具(如 Chrome DevTools)可以帮助识别和解决内存泄漏问题。

跨域是什么?怎么解决?jsonp方式是如何做的

nginx有了解吗,如何用nginx做重定向

你可以使用 Nginx 来设置重定向规则以将请求从一个 URL 重定向到另一个 URL。下面是一个示例,展示如何使用 Nginx 来进行不同类型的重定向。

1. 301 永久重定向: 这种重定向会告诉浏览器和搜索引擎,原始 URL 已永久更改到新的 URL。这对于 SEO 和用户体验非常重要。

server {
listen 80;
server_name example.com;

location /old-url {
return 301 http://example.com/new-url;
}

# 其他配置...
}

2. 302 临时重定向: 这种重定向会告诉浏览器,原始 URL 已暂时更改到新的 URL。

server {
listen 80;
server_name example.com;

location /temp-redirect {
return 302 http://example.com/temporary-url;
}

# 其他配置...
}

3. Rewrite 重定向: 使用 rewrite 指令,你可以实现更复杂的重定向逻辑。这里是一个使用 rewrite 的示例,将一个 URL 中的路径部分重定向到另一个 URL。

server {
listen 80;
server_name example.com;

location /old-path {
rewrite ^/old-path(.*)$ http://example.com/new-path$1 permanent;
}

# 其他配置...
}

这只是 Nginx 重定向的一些示例,你可以根据具体需求来设置不同类型的重定向规则。配置文件的位置和结构取决于你的服务器设置,所以确保根据实际情况进行配置。在修改 Nginx 配置文件后,需要重新加载或重启 Nginx 以使更改生效。

视频流

例子:声网

视频流大致分为三种:HLS,RTMP,RTSP:

  1. HLS主要以点播的技术实现了直播的体验的(由于基于点播技术,所以在传输的性能跟稳定性上比前两个弱点)

  2. RTMP是目前主流的流媒体传输协议,广泛用于直播领域,可以说市面上绝大多数的直播都采用了这个协议。(优点是主流CDN厂商都支持。缺点是价格相对昂贵,不支持浏览器推送,对网速要求较高等)。

  3. WebRTC主要应用于视频会议和连麦中。(优点是速度快,对网速要求相对宽容,支持浏览器推送,缺点是不支持某些传统CDN的服务)。

现在直播应用,采用RTMP协议居多,也有部分使用HLS协议

采用RTMP协议,就要看下它与流媒体服务器交互的过程,RTMP协议的默认端口是1935,采用TCP协议。并且需要了解FLV的封装格式。

采用HLS协议,因为涉及到切片,延时会比较大,需要了解TS流。

HLS(Http Live Streaming)

是一个由苹果公司提出的基于HTTP的流媒体网络传输协议,直接把流媒体切片成一段段,信息保存到m3u列表文件中, 可以将不同速率的版本切成相应的片;播放器可以直接使用http协议请求流数据。 优势:

  • 可以在不同速率的版本间自由切换,实现无缝播放
  • 省去使用其他协议的烦恼 劣势:
  • 延迟大小受切片大小影响,不适合直播,适合视频点播。
  • 文件碎片。特性的双刃剑,ts 切片较小,会造成海量小文件,对存储和缓存都有一定的挑战
  • 实时性差,延迟高。HLS 的延迟基本在 10s+ 以上

RTMP

RTMP(Real Time Message Protocol)由 Adobe 公司提出流媒体协议,并且是私有协议,未完全公开,用来解决多媒体数据传输流的多路复用(Multiplexing)和分包(packetizing)的问题,RTMP协议一般传输的是 flv,f4v 格式流。一般在 TCP 1个通道上传输命令和数据。 优势:

  • 在于低延迟,稳定性高,支持所有摄像头格式
  • 专为流媒体开发的协议,对底层的优化比其它协议更加优秀 劣势:
  • 浏览器需要加载 flash插件才能播放。
  • RTMP 为 Adobe 私有协议,很多设备无法播放,特别是在 iOS 端,需要使用第三方解码器才能播放
  • 基于 TCP 传输,非公共端口,可能会被防火墙阻拦

RTSP

RTSP(Real-Time Stream Protocol)由Real Networks 和Netscape共同提出的流媒体协议,RTSP协议是共有协议,并有专门机构做维护。是TCP/IP协议体系中的一个应用层协议. RTSP协议一般传输的是 ts、mp4 格式的流,RTSP传输一般需要 2-3 个通道,命令和数据通道分离。基于文本的多媒体播放控制协议. RTSP定义流格式,流数据经由RTP传输; 优势:

  1. RTSP实时效果非常好,适合视频聊天,视频监控等方向。 劣势:
  2. 浏览器不能直接播放,只能通过插件或者转码

ajax原理是什么

Async Javascript and XML,通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面

实现 Ajax异步交互需要服务器逻辑进行配合,需要完成以下步骤:

  1. 创建 Ajax的核心对象 XMLHttpRequest对象

  2. 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接

  3. 构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端

  4. 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态

  5. 接受并处理服务端向客户端响应的数据结果

  6. 将处理结果更新到 HTML页面中

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
if(request.readyState === 4){ // 整个请求过程完毕
if(request.status >= 200 && request.status <= 300){
console.log(request.responseText) // 服务端返回的结果
}else if(request.status >=400){
console.log("错误信息:" + request.status)
}
}
}

request.open('POST','http://xxxx')
request.send()