熊敬之

概述

直接打开Chrome Dev，Application与前端存储相关。

Cookie

最大能存4k，全是字符串，在HTTP协议中，服务费通过Set-Cookie也能设置。

http协议设置

在Set-Cookie中比浏览器多的属性有

• HttpOnly，只能通过http协议来设置，不让前端处理

• SameSite=Strict|Lax|None，在chrome2020年底之前，默认全是Lax，之后是None，如果是None的话，必须设置secure。为Strict时，从A页面对B页面进行跨页面，不会带上A页面Cookie，为了防止CSRF。具体规则如下表：

• 

• 

• 一个set-Cookie字段只能设置一个cookie，当你要想设置多个 cookie，需要添加同样多的set-Cookie字段。

• 服务端可以设置cookie 的所有选项：expires、domain、path、secure、HttpOnly 、sfads

前端设置

document.cookie 获取全部cookie值
document.cookie = newCookie, 只能设置/更新一个cookie，附加属性用分号;风格。
document.cookie = encodeURIComponent(“hello=world;path=/;domain=.example.com;expires=Wed, 14 Jun 2017 07:00:00 GMT;secure”)

附加属性

• ;path=path，默认是/（/的子路径都可以访问），使用/bar的话，只有/bar, /bar/11这些的子域名能访问。
• ;domain=domain，设置的域名包含其子域名，example.com，包含了则aaa.example.com，可以用来cookie共享。
• ;max-age=max-age-in-seconds, 设置cookie过期时间，单位为秒数。（365 24 60 * 60）一年。在除了老版本的IE浏览器中，max-age的优先级大于expires。ie6、ie7 和 ie8不支持max-age
• ;expires=_date-in-GMTString-format，设置过期日期，格式为_toUTCString格式，如Wed, 14 Jun 2017 07:00:00 GMT。
• ;secure，只要存有这个字段，即设置协议只能通过https协议。
• 设置值字符串时为了保证字符串不包含逗号，分号，空格，需要转义encodeURIComponent()。
• 删除一个cookie 也挺简单，也是重新赋值，只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。

SessionStorage

生命周期只是对话通信中，浏览器中两个Tab不会贡献，重新加载或恢复页面会恢复SessionStorage，只有关闭Tab或者window会清除。
实例方法：setItem(name)，getItem(name)，

LocalStorage

2.5MB，5MB，无限

IndexedDB

事实上前端数据库标准，类似mongoDB，非关系性数据库。一般是250M，甚至无上限。可以与web worker整合。
适合存储大量结构化数据。

特点

• 键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以”键值对”的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
• 异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
• 支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
• 同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
• 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
• 支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
• 需要手动更新或者手动删除

前端设置

window.indexedDB.open(‘DatabaseName’, Versions ) //创建数据库
window.indexedDB.deleteDatabase(‘DatabaseName’) //删除数据库

Web SQL

类似MySQL这中关系型数据库。
规范未得到维护,最后的更新时间是2010年，已经舍弃了Web SQL database草案，大概率以后不会成为标准。

Vue3.0 新语法

冯诺依曼计算机组成结构

0. input device + (CPU(control unit + arithmetic logic unit) + memory unit) + output device
1. 算术逻辑单元（Arithmetic Logic Unit，ALU）和处理器寄存器（Processor Register）的处理器单元（Processing Unit）
2. 包含指令寄存器（Instruction Reigster）和程序计数器（Program Counter）的控制器单元（Control Unit/CU）
3. 运算器 和 控制器组成了 CPU
4. 存储数据（Data）和指令（Instruction）的内存(memory unit)。以及更大容量的外部存储

指令和运算

0. objdump -d -M inter -S test.o 展示文件disassemble, inter model, source信息. clang -> compile -> assemby language(ASM) -> assemble -> machine code
1. cpu instruct set分类: 1. 算术类指令:加减乘除等 2. 数据传输类指令: 变量赋值, 内存里读写数据 3. 逻辑类指令: 与或非等 4. 条件分支类指令: if/else 等 5. 无条件跳转指令: 函数或者方法调用等
2. cpu如何执行指令? cpu有多种不同功能的寄存器, 三种特殊: PC 寄存器（Program Counter Register）：存放下一条需要执行的计算机指令的内存地址；指令寄存器（Instruction Register）：存放当前正在执行的指令；条件码寄存器（Status Register）：一个一个标记位（Flag），存放 CPU 进行算术或者逻辑计算的结果。
3. 一个程序执行的时候，CPU 会根据 PC 寄存器里的地址，从内存里面把需要执行的指令读取到指令寄存器里面执行，然后根据指令长度自增，开始顺序读取下一条指令。类似图灵机的运行。

理论点

1. 英语大致日耳曼语和拉丁语来源3: 7, 而日耳曼语词根多是独立使用的自由词根(free root)，古典语源（拉丁）词根都是不能独立使用的粘附词根(bound root)。
2. 以词素划分如下
   
3. 和词缀相对: 自由词根上: 一类派生词缀un-, -er, -ly, -ing等; 一类曲折词缀表示语法关系, -ing, -ed, -s等，称之为派生词缀(derivational affix)。外来语,形成词缀称之为 原生词缀(primitive affix),只能与粘附词根结合。
4. 产生词语的派生法

• 无词缀构词: 粘附词根构词、自由词根构词
• 词根加词缀: 生成派生词，粘附词根 + 原生词缀 = 原生词(primary derivate)，自由词根 + 派生词缀 = 二级派生词(secondary derivative)
  

vim model

1. normal model: 普通模式
2. insert model: 插入模式
3. visual model: 视图模式

vim grammar

1. Nearly all commands can be preceded by a number for a repeat count: 量词 + 命令
2. <Esc> gets you out of any mode and back to command mode: escape 到normal模式
3. Commands preceded by : are executed on the command line at the bottom of the screen: 通过: 运行命令
4. :help help with any command: 获取命令帮助

navigation

1. Cursor movement: ←h ↓j ↑k l→ : 光标移动
2. Words: w (by punctuation)(下个单词头): 通过标点; W (by spaces): 通过空格; b(单词头); B; e(单词末); E;
3. Line: 0 start(本行头); ^ first non-whitespace(第一个非空字符); $ end of line(本行末); - first non-whitespace of upper line(上一行第一非空字符); + first non-whitespace of lower line(下一行第一非空字符);
4. Paragraph: { previous blank line; } next blank line: 上下一个空格行
5. File: gg G 100G: (G end of file, gg start of file, number G absolute line)
6. Marks: mx (set mark x); ‘x go to mark; :marks view marks; ‘. go to position of last edit; ‘’ go back to last point before jump.
7. Scroll: Ctrl+F, Ctrl+B full screen; Ctrl+D, Ctrl+U half screen; Ctrt+E, Ctrl+Y scroll one line; zz zt zb screen postion;

Edit

1. u undo; Ctrl+r;
2. i insert text at cursor; I insert text at start of line;
3. a append text after cursor; A end of line;
4. o open new line below; O above;
5. r replace single character; R multiple;
6. cw change word; C change to end of line; cc change whole line;
7. ci (inside parentheses); eg: ci’ ci) ci

todo

线程与进程

1. 进程：CPU资源分配的最小单位(独立内存)
2. 线程：CPU调度的最小单位(共享进程的内存, 实际执行)

Chrome

• process
  • Browser主进程: 浏览器界面, tab页面的管理, 绘制Renderer进程的bitmap, 网络资源的管理、下载
  • 每个tab(优化合并)的Render进程
  • 第三方插件进程
  • GPU进程
• thread
  每个Render进程
  • GUI 渲染线程
    • 负责渲染浏览器界面, 解析HTML, CSS, 构建DOM树和RenderObject树, 布局和绘制等
    • 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时, 该线程就会执行
    • GUI渲染线程与JS引擎线程是互斥的, 当JS引擎执行时GUI线程会被挂起（相当于被冻结了）, GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行
  • JS引擎线程
    • 负责解析Javascript代码
    • JS引擎一直等待着任务队列中任务的到来, 然后加以处理, 一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
    • 如果JS执行的时间过长, 这样就会造成页面的渲染不连贯, 导致页面渲染加载阻塞
  • 事件触发线程
  • 与js引擎线程独立, 用来控制事件循环

Hackintosh

Hackintosh, 与Macintosh相对；黑与白。

引导方式

通电开机, 主板上ROM芯片的BIOS(Basic Input/Output System), 开始运行.

• 第一阶段：BIOS

  1. 硬件自检. POST(Power-On Self-Test). catch err: 不同含义的蜂鸣.
  2. BIOS把控制权转交给下一阶段的启动程序. Boot Sequence

• 第二阶段：主引导记录

  1. 计算机读取排在第一位的储存设备的第一个扇区, 也就是读取最前面的512个字节, 即主引导记录MBR(Master boot record).
  2. 主引导记录的结构: 机器码, 分区表, 主引导记录签名(0x55和0xAA)
  3. 分区表: 64个字节，里面又分成四项，每项16个字节, 由6个部分组成.

• 第三阶段：硬盘启动

• 第四阶段：操作系统

  • 以老的Linux系统为例, 先载入/boot目录下面的kernel. /sbin/init. pid进程编号为1
  • 新的Linux系统, Systemd 代替了init

• BIOS和UEFI

  1. BIOS是引导MBR, 把它读出来交给CPU执行，做MBR做想做的事.
  2. UEFI是引导是启动到文件, 查找磁盘里的\efi\boot\*.efi文件, 启动这个可执行程序, 让这程序做想做的事.

• 分类
  1. BIOS+MBR分区
  2. UEFI+GPT分区

WebSockets

ws 协议

解决问题

• 解决问题：因为HTTP协议是一个client->请求->响应->client协议，所以原有实现，实时聊天，多人在线等即时通讯只能hack：Ajax短轮询或者Comet。

1. 轮询：指浏览器通过JavaScript启动一个定时器，然后以固定的间隔给服务器发AJax请求，询问服务器有没有新消息。
2. comet: Comet本质上也是轮询，但是在没有消息的情况下，服务器先拖一段时间，等到有消息了再回复。
   • 基于Ajax的长轮询（long-polling）方式：
     浏览器发出XMLHttpRequest 请求，服务器端接收到请求后，会阻塞请求直到有数据或者超时才返回，浏览器JS在处理请求返回信息（超时或有效数据）后再次发出请求，重新建立连接。在此期间服务器端可能已经有新的数据到达，服务器会选择把数据保存，直到重新建立连接，浏览器会把所有数据一次性取回
   • 基于 Iframe 及 htmlfile 的流（http streaming）方式
     Iframe是html标记，这个标记的src属性会保持对指定服务器的长连接请求，服务器端则可以不停地返回数据，相对于第一种方式，这种方式跟传统的服务器推则更接近

• WebSockets用途：它可以在用户的浏览器和服务器之间打开交互式通信会话。

API实现

socket client端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const socket = new WebSocket('ws://localhost:3000/path/any')
// Connection opened
socket.addEventListener('open', function (event) {
  // send data
  socket.send('Hello Server!')
})
// Listen for messages
socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data)
})
// connection close
WebSocket.close([code[, reason]])
WebSocket.addEventListener('close', function (event) {

})

1. new WebSocket 建立链接
2. open之后send发送数据
3. addEventListener('message')用于指定当从服务器接受到信息时的回调函数
4. 可以手动关闭close addEventListener('close') 处理关闭的回调函数

node端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const WebSocket = require('ws')

const WebSocketServer = WebSocket.Server

// 实例化:
const wss = new WebSocketServer({
  port: 3000
})

wss.on('connection', function(ws) {
  console.log(`[SERVER] connection()`)
  ws.on('message', function(message) {
    console.log(`[SERVER] Received: ${message}`)
    ws.send(`ECHO: ${message}`, (err) => {
      if (err) {
        console.log(`[SERVER] error: ${err}`)
      }
    })
  })
})

0. wx
1. 使用ws的WebSocketServer, 建立服务监控
2. connection -> message
3. ws.send(data), 发送数据

SEE(Server-Sent Event)

• SSE能在现有的HTTP/HTTPS协议上运作，所以它能直接运行于现有的代理服务器和认证技术。
• SSE服务器向客户端声明，接下来要发送的是流信息。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。

API实现

client端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 判断是否支持
if ('EventSource' in window) {
  // 建立链接, 跨域带凭证
  var source = new EventSource(url[, withCredentials: true])
  
  var div = document.getElementById('example')
  
  source.onopen = function (event) {
    div.innerHTML += '<p>Connection open ...</p>'
  }
  
  source.onerror = function (event) {
    div.innerHTML += '<p>Connection close.</p>'
  }
  
  source.addEventListener('connecttime', function (event) {
    div.innerHTML += ('<p>Start time: ' + event.data + '</p>')
  }, false)
  
  source.onmessage = function (event) {
    div.innerHTML += ('<p>Ping: ' + event.data + '</p>')
  }
}

node端

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

var http = require("http");

http.createServer(function (req, res) {
  var fileName = "." + req.url;

  if (fileName === "./stream") {
    res.writeHead(200, {
      // 关键在这里，SSE声明
      "Content-Type":"text/event-stream",
      "Cache-Control":"no-cache",
      "Connection":"keep-alive",
      "Access-Control-Allow-Origin": '*',
    });
    res.write("retry: 10000\n");
    res.write("event: connecttime\n");
    res.write("data: " + (new Date()) + "\n\n");
    res.write("data: " + (new Date()) + "\n\n");

    interval = setInterval(function () {
      res.write("data: " + (new Date()) + "\n\n");
    }, 1000);

    req.connection.addListener("close", function () {
      clearInterval(interval);
    }, false);
  }
}).listen(8844, "127.0.0.1");

正则表达式

正则表达式是用来处理字符串的匹配字符串中字符组合的模式,
可以用 有限状态机 来表示， finite state machine。

1
2
3
4
5
6

graph LR
s0((s0))-->|a|s1((s1))
s1-->|b|s2((s2))
s2-->|b|s3((s3))
s3-->|b|s2((s2))
s3-->|a|s4((s4))

windows 环境

• AutoHotkey: 自己写ahk脚本，编译，开机启动
• shandowsock: 搭建开发环境， 服务器端配置, 开机启动
• chrome: 插件列表
• 火萤酱: everything 的封装
• CCleaner: 清理window注册表， 软件卸载，开机启动管理
• Snipaste: F1截屏软件, Ctrl+T 钉在desktop上
• Clover: 微软资源管理软件

浏览器插件

• Adblock Plus
• SimpleExtManager
• Tampermonkey
• 彩云小译
• github 系列
• vue 开发系列
• react 开发系列