QSL

1. macOS结构

Mac OS X 包含两个主要部分：以 FreeBSD 源代码 和 Mach 微核心为基础的 XUN 混合内核，并在 XNU 上构建的 Darwin 核心系统；及一个由苹果开发，称为 Aqua 的闭源、独占版权的图形用户界面。细分的看，Mac OS X 系统可以分成五层结构，每一层有其代表性技术。

1. 大纲

1.1 线程优化

JS是单线程，不能block它，也不适合做CPU密集型工作。如果有可能尽量使用native模块或多线程技术负担JS线程工作。

1.2 渲染优化

1.2.1 React渲染

• 减少渲染次数， 比如shoudComponentUpdate, PureComponent
• 避免不可见内容的渲染，比如控制render的返回内容
• 长列表的优化

1.2.2 Native渲染

• Android上RecycleView2的使用

1.3 框架优化

1.3.1 通讯方法

• JS Bridge的通讯的payload是JSON字符串，而且所有通讯都是占用JS Bridge，所以一方面会出现阻塞，比如滑动事件，另一方面JSON字符串的解析也会消耗计算。所以尽量不要在JS Bridge上发太多消息。随着JSI的发布，可以使用JSI代替JS Bridge, 它不需要再通过JSON字符串通讯，而是使用了共享内存通讯，而且是同步方式，效率更高。跟之前相比，需要写C++代码，但是有自动化工具可以帮助完成，比如CodeGen。
• Bundel拆包，按需加载，和提前加载，提升页面首次渲染的性能。
• 体积优化，使用混淆工具减少包体积。

1. Limits

资源限制内部机制使用的是cgroup类型
目录： /sys/fs/cgroup/systemd

k8s采用request和limit两种限制类型来对资源进行分配

request(资源需求)：即运行pod的节点必须满足运行pod的最基本需求才能运行pod。
limit(资源限制)：即运行pod期间，可能内存使用量会增加，那最多能使用多少内存，这就是资源限额。
资源类型：

CPU的单位是核心数，内存的单位是字节。
一个容器申请0.5各CPU，就相当于申请1个CPU的一半，可以加个后缀m表示千分之一的概念。比如说100m的CPU，100豪的CPU和0.1个CPU都是一样的。
内存单位：

K，M，G，T，P，E #通常是以1000为换算标准的。
Ki，Mi，Gi，Ti，Pi，Ei #通常是以1024为换算标准的。

1. TLS

TLS现在的版本是1.2，下一个版本1.3也快普及。
Android开始支持TLS v1.2从Android 4.1开始
iOS开始支持TLS v1.2从iOS 5开始
Browser开始支持TLS v1.2: Chrome version 29(2013), Safari version 7(2013)

通常TLS是应用协议，HTTP on SSL，所以一般情况下不需要应用程序去指定TLS版本，交给系统或浏览器就行。

ref:
Android
iOS
Browser

1. Heap

Heap 分为young generation, old generation.

• young generation, 采用清除算法，分为from, to两个区域。当需要GC时，会检测分配的对象的有效性，如果从这次GC中存活，会标记，然后copy到to 区域，清空from区，然后交换from, to的命名。当有对象在2次GC都存活了，那么会移动到old generation.这个也被称为minor GC.
• old generation, 采用mark-sweep方法, old generation中allocate分配容易，清理难。这个也被称为major GC。这里的GC也有两种可能，一种是内存充裕时使用mark-sweep, 另一种是内存不充足时内存压塑，移动内存，释放内存碎片。

Usually, ~20% of the Young Generation survives into the Old Generation. Collection in the Old Space will only commence once it is getting exhausted. To do so the V8 engine uses two different collection algorithms:

• Scavenge collection, which is fast and runs on the Young Generation,
• Mark-Sweep collection, which is slower and runs on the Old Generation.

node GC时会stop the world，代表主线程被暂停了。

1. ADBlock Plus

对于国内广告有时不work，那么就需要设置下语言。这个语言按照需要，设多了会影响ADBlock Plus的速度。所以我只需要设两个Chian+English.

1. Redux

Redux createStore三个主要的属性和方法是{store, getState, dispatch}。createStore是创建一个Redux Store, store是这个Redux Store的引用，getState是返回全局的State, dispatch是发送一个Action. 这个全局State对于JS来说是plain object，每次dispatch都会创建一个新的object，而redux-immutable会使用原来的Immutale Map引用。

其它一些辅助方法：
combineReducers(reducers), 这个是把reducersMap变成一个大reducer object.它接受一个Action和当前State, 然后遍历所有的reducer(这里可能会有性能问题，试想一千个reducer，会影响性能)。

• createStore的第一个参数就是combineReducers(reducers)返回的结果, 内部创建一个currentState, finalReducers, dispatch方法。State的key就是reducers的key, 在createStore内部，store创建好之后会dispatch 当ActionTypes.INIT，这个会在finalReducers里面运行一次，由于这个时候全局State是undefined，所以会使用reducers的defaultState，这里也就解释为什么reducers的defaultState要和reducers的key(reducers的name)一样。

Action是一个Object,它包含type, payload（自定义的负荷）. ActionTypes.INIT， 是Redux自带的Action，它的type其实是一个随机生成的字符串。我们不该针对这个ActionTypes.INIT写任何的reducer。

1
2
3
4
5

const ActionTypes = {
  INIT: `@@redux/INIT${/* #__PURE__ */ randomString()}`,
  REPLACE: `@@redux/REPLACE${/* #__PURE__ */ randomString()}`,
  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

return function combination(
    // dispatch 当ActionTypes.INIT 的时候，state是undefined, 所以这里使用了函数默认值{}.
    state: StateFromReducersMapObject<typeof reducers> = {},
    action: AnyAction
  ) {
   

    let hasChanged = false
    const nextState: StateFromReducersMapObject<typeof reducers> = {}
    // 遍历所有的Reducer
    for (let i = 0; i < finalReducerKeys.length; i++) {
      const key = finalReducerKeys[i]
      // 获取一个reducer方法
      const reducer = finalReducers[key]
      // 获取当前的shape (某个reducer key下面的值)
      const previousStateForKey = state[key]
      // reduxer都会运行一次, 除非报错
      // 当接受ActionTypes.INIT时，previousStateForKey是个undefined，所以reducer里面返回的是reducer的defaultState。 
      const nextStateForKey = reducer(previousStateForKey, action)
      
      if (typeof nextStateForKey === 'undefined') {
        const actionType = action && action.type
        throw new Error()
      }
      // 改写下个shape (某个reducer key下面的值)
      nextState[key] = nextStateForKey
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    // 监测至少有一次变化
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length
    return hasChanged ? nextState : state
  }

• createStore的第二个参数时initialState，它的值要和reducer的key一样。它会和Reducer产生的State做hydrate。

Redux中函数默认值的使用很广泛，第一重要的就是reducers中函数默认值defaultState的使用，然后是createStore中initialState的使用。createStore中初始化Reduxt的Gloabal State就是用到了上面两个函数默认值。

1. ngrok

内网穿透到internet, 方便本地调试，但同时也需要一个外网链接地址，比如调试webhook。这个外网链接地址支持HTTP与HTTPS。

1

brew install ngrok/ngrok/ngrok

Performance Metrics

• FPS
• Memory
• CPU
  Read more »

The current React Native Bridge architecture between Native and JS works asynchronously and transfer data in JSON only.

It produces next issues:

Async calls

Many threads and jumps across them: JS, Shadow, Main, Native…
JS and Main threads do not directly communicate (slow UI rendering)
JSON

No data sharing between JS and Native threads
Slow data transfer because of JSON serialisation (bottleneck)
You can make the bridge to any native code Java/Konlin, ObjC/Swift, C++ etc. but you always have the problems from above.

React Native JSI provides API to JS Runtime engine and allows to expose native functions and objects to JS directly - no bridge at all.

It provides next advantages:

Sync call from JS thread to Native and vice-versa
Fast rendering using direct call to UI Main thread
Data sharing between threads
You have to use C++ only to work with JSI because JS Runtime has C++ API but it is possible to make C++ layer between JSI and your existed Java or Swift code.

JSI is foundation for future new React Native architecture which includes: Fabric, TurboModules, CodeGen. Read more: https://github.com/react-native-community/discussions-and-proposals/issues/91

Share
reference:https://stackoverflow.com/questions/69501535/whats-the-difference-between-bridging-a-module-with-c-or-with-jsi-in-react-na