HTTPS 理解关键问题

Photo by stefan moertl on Unsplash

防止中间人攻击

为了防止中间人拦截攻击,对于采用证书机构来加密服务器端公钥。这样中间人假如拦截了 HTTPS 流量,并且使用自己生成公私钥对,使用自己的私钥加密数据发给客户端,那么客户端无法使用机构提供的服务器公钥对密文进行解密,从而导致协议出错。

防止中间人窥探

由于在握手阶段是协议出一个双方都可以对称密钥,客户端采用机构认证的服务器公钥对协商好的对称密钥进行加密。这样即使中间人劫持到,由于没有服务器私钥所以无法对这段密文进行解密。

证书防篡改

证书颁发机构将服务器公钥等一系列信息首先做摘要算法,然后使用 CA 机构的私钥(非服务器公钥)对服务器公钥信息进行加密,作为数字签名,在客户端需要使用机构的公钥对证书内容进行解密。

继续阅读HTTPS 理解关键问题

z-index 层叠的一些细节

最近要把一个筛选的功能做组件化,涉及到了z-index 和定位的一些细节。z-index 的最大特点是它只有作用于定位的组件之上才有效果,比如 relative,absolute 或者 fixed。

其中 relative 很特殊,它不会脱离文档流,因此一旦 relative 定位的组件被渲染,会把父结点撑开,然后不管你怎么移动 transform 那个坑都会在。

相反 absolute 和 fixed 都脱离了文档流,因此它不会把父组件撑开,也不会留一个空白坑。其中 fixed 和 fixed 的图层处于同一维度。同一维度意味着父组件的范围可以限制子组件的表示范围,假如父组件写了 overflow:hidden,那么子组件也不会显示出来。

absolute 和其最近定位的父结点处于同一维度。同一纬度在上一段落已经得到解释。

最后,微信小程序组件中使用 fixed 定位很奇怪,模拟器可以但是 IOS 端不行。

Throttle 与 Debounce 使用场景

Photo by Cristina Gottardi on Unsplash

不管什么技术概念,都要落到实际使用场景比较容易理解。Throttle 和 Debounce 也是一样,这里我分别解释一下。

单位时间只做一次使用 Throttle

单位时间只做一次使用 Throttle。PC 上有些操作在小程序真机上延迟特别明显,比如点击按钮展开菜单的动画,假如用户点击频率过高就会导致小程序显示异常。为了解决这个问题,需要在单位时间比如 500ms 之内对用户点击只响应一次,这样可以减少动画调用的频率。

等待操作不再发生使用 Debounce

等待操作不再发生使用 Debounce。比如我们搜索根据关键词从实时后台拿到商品名称,我们不知道用户什么时候结束输入。假如每监听一个关键字就去后台拿数据会导致后端压力比较大。那么再前端就可以做一个 Debounce。当用户键入一个关键字后等待 500ms,若这 500ms 之内没有新的输入,当作用户结束输入,然后再去后台请求数据,可以减轻后端压力。