Skip to main content

8 posts tagged with "阿里巴巴"

View All Tags

GET 和 POST 到底有什么区别

getpost 本质上就是 TCP 连接,并无差别,但由于 HTTP 的规定和浏览器、服务器的限制,导致它

们在应用过程中有一些不同:

  • get 参数通过 URL 传递;post 放在 request body

  • get 请求在 URL 中传递的参数有长度限制;post 没有(HTTP 协议未规定,是因为浏览器和服务器的限制)

  • get 请求只能进行 URL 编码;post 请求有多种编码方式

  • get 请求参数会被完整保留在浏览历史记录里;post 中的参数不会被保留

  • get 产生一个 TCP 数据包;post 产生两个 TCP 数据包

  • 对于 get 请求,浏览器将 http headerdata 一并发送,服务器响应 200 OK;对于 post 请求,

浏览器先发送 header,服务器响应 100 Continue,浏览器再发送 data,服务器响应 200 OK

  • 缓存方面:get 请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以

可以使用缓存;post 请求一般做的是修改和删除工作,必须与数据库交互,所以不能使用缓存

http2 和 http1 的区别

  • 二进制分帧

  • 头部压缩:使用 HPACKHTTP/2 头部压缩

  • 服务器推送

  • 多路复用:最重要的特点,(MultiPlexing),即连接共享,即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id,这样一个连接上可以有多个 request,每个连接的 request 可以随机的混杂在一起,接收方可以根据 requestidrequest 再归属到各自不同的服务端请求里面。

    多个请求可同时在一个连接上并行执行(由于支持二进制的格式,可以无序)某个请求任务耗时严重,不会影响到其它连接的正常执行

更多请见:HTTP 的前世今生

什么是跨域 ?

跨域指的是非同源的资源之间尝试着进行交互通信,而由于受浏览器同源策略的限制,无法正常进行交互通信。

浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 JavaScript 实施的安全限制。无法跨域是浏览器对于用户安全的考虑,同源策略限制了一下行为:CookiesLocalStorageIndexDB 无法读取 DOMJS 对象无法获取,Ajax 请求发送不出去。

箭头函数和普通函数的区别

主要区别在于箭头函数没有 thisargument

没有 this 的话

  • 不能作为构造函数

  • 没有原型

  • 无法通过 callbindapply 改变 this 指向

  • 它的 this 永远指向 它定义时所处的全局执行环境

虚拟 DOM

虚拟 DOM#

Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。

当你在渲染一个 div 时,其实例属性可多达 298 个(Chrome 下,每个浏览器实现不同),没有 VIrtual DOM,我们每次进行视图更新时,将旧 dom 元素移除,挂载新 dom 元素,这会导致我们消耗大量的内存和 CPU 资源。而 VIrtual dom 的存在则是为了帮助我们只针对修改的部分进行渲染,这也同样使得我们可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

VIrtual DOM 具体表现形式,其实就是通过 JavaScript 来描述 DOM 结构,本质即通过 JavaScript 做了一层 DOM 映射

更多请见 Virtual DOM 概念

具体映射方式请查看 Virtual DOM映射方式

说一下减少 Dom 数量的办法?一次加载大量 Dom 怎么优化

减少 DOM 数量的方法

  • 使用伪元素,阴影实现的内容尽量不使用 DOM 实现,如清除浮动、样式实现。
  • 按需加载,减少不必要渲染
  • 使用合理的结构,语义化标签

一次性加载大量 DOM 优化

这个问题可以借鉴各个框架是怎么干的:

  • 虚拟 DOM ,直接操作 JS 对象开销更少且高效
  • 缓存 DOM 对象,将一些不需要循环遍历的 DOM 节点先缓存,在循环中直接引用
  • 如果 DOM 只是换了个位置,不需要删除后在另一个位置重建,可以直接将整个 DOM 换个位置即可(这个地方需要算法遍历优化)

有哪几种解决跨域的方法,各自优劣性?

  1. 通过 jsonp 跨域:可以通过动态创建 script,再请求一个带参网址实现跨域通信。缺点:只能实现 get 一种请求。

  2. document.domain + iframe 跨域:两个页面都通过 js 强制设置 document.domain 为基础主域,就实现了同域。此方案仅限主域相同,子域不同的跨域应用场景。

  3. location.hash + iframea 欲与 b 跨域相互通信,通过中间页 c 来实现。 三个页面,不同域之间利用 iframelocation.hash 传值,相同域之间直接 js 访问来通信。

  4. window.name + iframe 跨域:通过 iframesrc 属性由外域转向本地域,跨域数据即由 iframewindow.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

  5. postMessage 跨域:postMessageHTML5 XMLHttpRequest Level 2 中的 API,且是为数不多可以跨域操作的 window 属性之一

    它可用于解决以下方面的问题:

    • 页面和其打开的新窗口的数据传递

    • 多窗口之间消息传递

    • 页面与嵌套的 iframe 消息传递上面三个场景的跨域数据传递

      用法:

    • postMessage(data,origin)方法接受两个参数

    • data:html5 规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用 JSON.stringify() 序列化。

    • origin:协议+主机+端口号,也可以设置为 "*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

  6. 跨域资源共享(CORS):只服务端设置 Access-Control-Allow-Origin 即可,前端无须设置,若要带 cookie 请求:前后端都需要设置。

  7. nginx 代理跨域:

  • nginx 配置解决 iconfont 跨域

  • nginx 反向代理接口跨域

  • 跨域原理: 同源策略是浏览器的安全策略,不是 HTTP 协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议,不会执行 JS 脚本,不需要同源策略,也就不存在跨越问题。

  • 实现思路:通过 nginx 配置一个代理服务器(域名与 domain1 相同,端口不同)做跳板机,反向代理访问 domain2 接口,并且可以顺便修改 cookiedomain 信息,方便当前域 cookie 写入,实现跨域登录。

  1. node.js 中间件代理跨域:node 中间件实现跨域代理,原理大致与 nginx 相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中域名,实现当前域的 cookie 写入,方便接口登录认证。

  2. WebSocket 协议跨域:WebSocket protocolHTML5 一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是 server push 技术的一种很好的实现。原生 WebSocket API 使用起来不太方便,我们使用 Socket.io,它很好地封装了 webSocket 接口,提供了更简单、灵活的接口,也对不支持 webSocket 的浏览器提供了向下兼容。

详情请见:九种跨域方式实现原理(完整版)