jankjn / notes Goto Github PK

process 通信模型: message receiving loop with state

defmodule Stack do
  def start(state \\ []) do
    spawn(__MODULE__, :loop, [state])
  end

  def loop(state) do
    receive do
      {:push, from, var} ->
        state = [var | state]
        send(from, {:ok, state})
        loop(state)
      {:pop, from} ->
        [var | state] = state
        send(from, {:ok, var})
        loop(state)
      _ ->
        loop(state)
    end
  end
end

Agent: 只维护状态, 不执行计算
Task: 只执行计算, 不维护状态。使用 Task.Supervisor 可以指定 task 恢复策略，保证 task 执行
GenServer: 维护状态并执行计算, 实现 GenServer behaviour 的模块可以类比面向对象语言中的类, 启动了的 GenServer 进程可以类比对象, 而且是原生并发安全的（基于消息传递, 显式通信, 隐式同步）
Supervisor: 当所管理的进程失败退出时按指定策略重启，保证应用高可用性, Supervisor Tree

相关链接：

• https://www.dailydrip.com/topics/elixir

高度被子元素动态决定的元素，不能用 css transition 加上 height 变换来实现。最终 height 是未知的，顺便设成 'auto' 也是没有用的。
正确的姿势应该是用 js 设置元素 display: block后，获取元素的 scrollHeight 设置为最终 height，再结合 css transition。(参考 element 树组件 collapse-transition 动画)

SO_REUSEADDR

1，若当前机器已有 bind 在 any host(0.0.0.0, ::, *)上的 socket, 设置了 SO_REUSEADDR 的新 socket 支持用相同端口绑定到一个本地 host

SO_REUSEADDR       socketA        socketB       Result
---------------------------------------------------------------------
  ON/OFF       192.168.0.1:21   192.168.0.1:21    Error (EADDRINUSE)
  ON/OFF       192.168.0.1:21      10.0.0.1:21    OK
  ON/OFF          10.0.0.1:21   192.168.0.1:21    OK
   OFF             0.0.0.0:21   192.168.1.0:21    Error (EADDRINUSE)
   OFF         192.168.1.0:21       0.0.0.0:21    Error (EADDRINUSE)
   ON              0.0.0.0:21   192.168.1.0:21    OK
   ON          192.168.1.0:21       0.0.0.0:21    OK
  ON/OFF           0.0.0.0:21       0.0.0.0:21    Error (EADDRINUSE)

2, 进程退出时，进程中未 close 的 socket 处于 TIME_WAIT 状态。新的 socket 无法 bind 相同地址，设置 SO_REUSEADDR 即可 bind。使用场景有服务器重启时，旧的 socket 存在 TIME_WAIT, 提示地址无法使用，可设置 SO_REUSEADDR 解决

SO_REUSEPORT

linux 3.9 以上版本允许指定了 SO_REUSEPORT 参数的多个 socket bind 相同的地址与端口, 操作系统在内核对请求负载均衡到各个 socket，避免了惊群效应, 且方便 rolling update

参考:

• https://blog.csdn.net/lyztyycode/article/details/78648798
• https://stackoverflow.com/questions/14388706/socket-options-so-reuseaddr-and-so-reuseport-how-do-they-differ-do-they-mean-t
• https://stackoverflow.com/questions/3229860/what-is-the-meaning-of-so-reuseaddr-setsockopt-option-linux

一般情况下的 tls 握手过程如下

1. 对称加密速度快，但是不能在网络上直接传递密钥。非对称加密相对慢很多，一般都用来做签名或者少量数据加密。所以可以用非对称加密传递对称加密密钥。

2. client random 与server random (它们也称为nonce)用来阻止中间人的 replay attack。

3. Diffie–Hellman 算法用于在不可信信道上达成密钥一致(key exchange)，并可通过 ephemeral 模式提供 forward secrecy(旧的通信数据不会因为私钥公开而解密)。普通的 RSA key exchange(直接用 server 提供的公钥加密随机生成的 pre-master secret 回传) 无法保证 forward secrecy, 已不推荐使用，在 tls 1.3 中废除

4. 为保证安全的连接，除了不能被第三方解密内容，还需验证数据包来源，需要证书机制。证书包含公钥，公钥签名，公钥描述，签名是签发方对此公钥的证明，由签发方对公钥摘要并用签发方的私钥加密获得, 若签发方被证明可信且签名校验一致，则签发方证明了此公钥的可信，签发方的证书又由其他签发方保证，直至被安装在系统中的根证书。证书签名算法需使用非对称算法，如 RSA。

参考
图解SSL/TLS协议
keyless-ssl-the-nitty-gritty-technical-details
stackexchange: how-does-ssl-tls-work

• -Xms, -Xmx: 初始堆，最大堆
• -XX:NewRatio: 老年代与新生代比例
• -XX:SurvivorRatio: Eden区与survivor区的比例，-XX:SurviorRatio=3时, eden: from: to = 3: 1: 1
• -XX:+UseConcMarkSweepGC: 并发标记清除，低停顿，GC时间可控
• -XX:+UseParallelGC: 并行GC, 最大吞吐量, 默认GC算法
• -XX:+PrintGCDetails: 打印GC日志
• -XX:+PrintGCTimeStamps和-XX:+PrintGCDateStamps: GC 日志的时间
• jmap -heap : 打印堆内存信息，包括使用的gc算法，各个区域大小和可用空间，相关配置

参考:

• http://ifeve.com/useful-jvm-flags/
• JVM 各类 GC 日志剖析

晚点填坑
https://blog.helong.info/blog/2015/03/13/jump_consistent_hash/

• sass 功能多且写法一致，项目转交的成本低，postcss 虽然可以通过插件支持但写法各异
• postcss is babel for css 的说法并不大对，babel 转译的一般是未来标准代码，而且标准化的时间可预期，postcss 很多插件都是自定义语法，虽然有cssnext，但是css的标准不像 ecmascript 的标准迭代那么快，新 feature 落地时间不可预期，而且一些 feature 没法通过转译到css实现，需要 js 的支持
• sass 免配置
• sass 有 map, postcss 暂时还找不到对应的支持，没法一次性写出 bootstrap 里的 margin，padding helper

mysql 区分为 快照读 和 当前读
快照读: 普通的 select, 基于 mvcc 机制实现的可重复读，始终读取transaction 版本对应的数据
当前读: select for update, select * lock in share mode, update, delete, insert, 基于锁机制实现的可重复读，获取读取行的读锁，除此之外对于当前读 mysql innodb 还会增加 gap 锁，可以在 rr 级别防止幻读

两个快照读的坑:

• rr级别 mysql 先 select 后用结果 update 可能会出现更新丢失, 需要使用当前读加悲观锁，或使用 rc 级别 + 乐观锁
• 仅当前读会增加 gap 锁防止幻读，快照读不会，比如 a 事务快照读，b事务插入一条记录，a事务再进行快照读读取数量不变，但对插入的对应记录进行一次当前读，如update，再次进行快照读就会读到b事务插入的记录(应该是当前读会更新快照读的数据)

postgres
只有快照读，但读取时会记录读取的快照版本，可重复读
更新时会比对读取的版本和最新版本，若冲突则失败，是自带的乐观锁机制 🆒
更新仅更新读取版本行，其他事务插入的新行不会被更新，重新查询也不会看到新行，避免了幻读 🍻

总结: 对于更新冲突的控制 mysql 倾向于默认悲观锁，用户自行实现乐观锁。pg 是默认乐观锁，可显式指定悲观锁(select for share/update)。个人觉得乐观锁带来的好处更多些，本来 mvcc 就是为了最小化锁冲突提高并发能力。基于悲观锁的当前读和 mvcc 搭起来就比较违和。。

参考

• https://ruby-china.org/topics/19499
• https://www.postgresql.org/docs/current/static/transaction-iso.html

Jumping Scrollbar

在页面中水平居中一个元素我们往往会使用 margin: 0 auto; 的方式。如果页面存在高度变化(eg. 点击加载更多, 模态框 etc)导致滚动条显隐, 居中元素的横向位置就会变化, 影响用户体验。
点击查看示例

最简单的办法

html {
    overflow-y: scroll;
}

保持滚动条始终显示, 缺点是浪费空间，多余元素影响观感。

margin-left

元素位置抖动的原因是页面右侧出现滚动条占用了宽度，只要在左侧也撑起相同宽度，即可保持居中位置。

/* 或者 padding-left */
.wrapper {
    margin-left: calc(100vw - 100%);
}

fixed width

与两边减去相同宽度的方式不同，保持居中容器的宽度和相对位置不变也是一种做法。

html {
    width:100vw;
    overflow-x:hidden;
}

缺点是影响整个页面, 右侧可能会有元素被滚动条遮住

ps: 还有张鑫旭菊苣在博客中提到的 "终极解决方案"，也属于最后一种固定宽度的方式，不过应该是涉及了兼容性处理 fallback 的一些东西，有的地方不是很理解，先记录在这里。

html {
  overflow-y: scroll;
}

/*
:root 根元素选择器在 html 中即指 `<html>` 元素 (css 标准不止适用于 html),
且作为伪类选择器，优先级高于 html tag 选择器
*/
:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}

参考资料:

• Fix 'jumping scrollbar' issue using only CSS
• 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动

用于判断集合连通性
一般用树结构实现, 用array 或 hash 保存父节点引用
提供两个操作:

• Find(x)：确定元素属于哪一个子集。它可以被用来确定两个元素是否属于同一子集。
  返回元素所在树的根节点(代表所在子集)，两个元素返回的根节点相同即处于同一子集
• Union(x,y)：将两个子集合并成同一个集合。
  先通过Find 获取两个子集的根节点，若不同，将其中一个根节点添加到另一个根节点下，即代表合并

优化方式:

• 路径压缩: 在 Find 过程中进行路径压缩

           a                                  a
         /                                   /  \
        b             ->                    b    c
       /
      c

def find(n)
    father[n] = find(father[n]) if father[n] != n
    father[n]
end

• 按秩合并: 将深度低的集合合并到深度深的集合, 增加一个保存各集合秩的变量

顾名思义，请求下一帧动画帧, 即在下一帧绘制发生前执行回调函数。

优点：

• 按屏幕刷新率触发，且浏览器空闲时才触发，不会有等待绘制的帧
• 仅绘制用户可见区域，节能环保♻️
• 同一页面的多个使用 requestAnimationFrame 的动画会合并渲染

参考:

• https://developers.google.com/web/fundamentals/performance/rendering/optimize-javascript-execution#requestanimationframe
• http://blog.csdn.net/milado_nju/article/details/8101188
• http://caniuse.com/#search=requestAnimationFrame

相关词条: requestIdleCallback

• https://developers.google.com/web/updates/2015/08/using-requestidlecallback