kevinxft / notebook Goto Github PK

0.0 0.0 0.0 114 KB

个人笔记本

css javascript nodejs

notebook's Introduction

🐱 My GitHub Data

📦 113.8 kB Used in GitHub's Storage

🏆 325 Contributions in the Year 2024

🚫 Not Opted to Hire

📜 23 Public Repositories

🔑 7 Private Repositories

I'm an Early 🐤

🌞 Morning                320 commits         ███░░░░░░░░░░░░░░░░░░░░░░   11.94 % 
🌆 Daytime                1277 commits        ████████████░░░░░░░░░░░░░   47.65 % 
🌃 Evening                1034 commits        ██████████░░░░░░░░░░░░░░░   38.58 % 
🌙 Night                  49 commits          ░░░░░░░░░░░░░░░░░░░░░░░░░   01.83 %

📅 I'm Most Productive on Thursday

Monday                   402 commits         ████░░░░░░░░░░░░░░░░░░░░░   15.00 % 
Tuesday                  402 commits         ████░░░░░░░░░░░░░░░░░░░░░   15.00 % 
Wednesday                368 commits         ███░░░░░░░░░░░░░░░░░░░░░░   13.73 % 
Thursday                 439 commits         ████░░░░░░░░░░░░░░░░░░░░░   16.38 % 
Friday                   376 commits         ████░░░░░░░░░░░░░░░░░░░░░   14.03 % 
Saturday                 387 commits         ████░░░░░░░░░░░░░░░░░░░░░   14.44 % 
Sunday                   306 commits         ███░░░░░░░░░░░░░░░░░░░░░░   11.42 %

📊 This Week I Spent My Time On

🕑︎ Time Zone: Asia/Shanghai

💬 Programming Languages: 
TypeScript               12 hrs 54 mins      ███████████░░░░░░░░░░░░░░   44.12 % 
ExtendTypeScript         11 hrs 36 mins      ██████████░░░░░░░░░░░░░░░   39.69 % 
Markdown                 2 hrs 26 mins       ██░░░░░░░░░░░░░░░░░░░░░░░   08.38 % 
Other                    1 hr 2 mins         █░░░░░░░░░░░░░░░░░░░░░░░░   03.58 % 
Text                     33 mins             ░░░░░░░░░░░░░░░░░░░░░░░░░   01.90 % 

🔥 Editors: 
Devecostudio             18 hrs 13 mins      ████████████████░░░░░░░░░   62.33 % 
VS Code                  8 hrs 34 mins       ███████░░░░░░░░░░░░░░░░░░   29.30 % 
Obsidian                 2 hrs 26 mins       ██░░░░░░░░░░░░░░░░░░░░░░░   08.38 % 

🐱‍💻 Projects: 
harmony-project          18 hrs 28 mins      ████████████████░░░░░░░░░   63.15 % 
files-organizer          7 hrs 25 mins       ██████░░░░░░░░░░░░░░░░░░░   25.37 % 
Notes                    2 hrs 26 mins       ██░░░░░░░░░░░░░░░░░░░░░░░   08.38 % 
Unknown Project          54 mins             █░░░░░░░░░░░░░░░░░░░░░░░░   03.11 % 

💻 Operating System: 
Mac                      29 hrs 14 mins      █████████████████████████   100.00 %

I Mostly Code in TypeScript

TypeScript               8 repos             ███████████░░░░░░░░░░░░░░   42.11 % 
JavaScript               5 repos             ███████░░░░░░░░░░░░░░░░░░   26.32 % 
Vue                      2 repos             ███░░░░░░░░░░░░░░░░░░░░░░   10.53 % 
C                        1 repo              █░░░░░░░░░░░░░░░░░░░░░░░░   05.26 % 
Java                     1 repo              █░░░░░░░░░░░░░░░░░░░░░░░░   05.26 %

Last Updated on 09/08/2024 04:19:31 UTC

github contribution grid snake animation

notebook's People

Contributors

notebook's Issues

透视HTTP协议笔记之破冰

前世今生

HTTP/0.9

这时候只支持GET

三个关键技术

URI：即统一资源标识符，作为互联网上资源的唯一身份；
HTML：即超文本标记语言，描述超文本文档；
HTTP：即超文本传输协议，用来传输超文本。

HTTP/1.0

和现在已经区别不大了

增加了 HEAD、POST 等新方法；
增加了响应状态码，标记可能的错误原因；
引入了协议版本号概念；
引入了 HTTP Header（头部）的概念，让 HTTP 处理请求和响应更加灵活；
传输的数据不再仅限于文本。

HTTP/1.1

增加了 PUT、DELETE 等新的方法；
增加了缓存管理和控制；
明确了连接管理，允许持久连接；
允许响应数据分块（chunked），利于传输大文件；
强制要求 Host 头，让互联网主机托管成为可能。

HTTP/2

二进制协议，不再是纯文本；
可发起多个请求，废弃了 1.1 里的管道；
使用专用算法压缩头部，减少数据传输量；
允许服务器主动向客户端推送数据；
增强了安全性，“事实上”要求加密通信。

HTTP/3

Ngnix 一些配置

配置

server {
 listen 443; #端口
 server_name localhost; #域名
 ssl on;
 root html;
 index index.html index.htm;
 ssl_certificate   cert/a.pem; # 这里需要根据下载证书该名称，证书放在nginx的安装目录下
 ssl_certificate_key  cert/a.key; # 同上
 ssl_session_timeout 5m;
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 ssl_prefer_server_ciphers on;
 location / {
     root   /usr/share/nginx/html; # 默认目录
     index index.html index.htm;
 }
}

Webpack并行构建方案

HappyPack

多进程方式运行资源加载(Loader)逻辑

Thread-loader

Webpack 官方出品，同样以多进程方式运行资源加载逻辑

Parallel-Webpack

多进程方式运行多个 Webpack 构建实例

TerserWebpackPlugin

支持多进程方式执行代码压缩、uglify 功能

这些方案的核心设计都很类似：针对某种计算任务创建子进程，之后将运行所需参数通过 IPC 传递到子进程并启动计算操作，计算完毕后子进程再将结果通过 IPC 传递回主进程，寄宿在主进程的组件实例，再将结果提交给 Webpack。

Linux常用命令汇总

scp 文件传输命令

# 下载文件
scp [email protected]:home/pi/test.txct . 

# 上传文件
scp test.txt [email protected]:home/pi

# 下载目录
scp -r [email protected]:home/pi .

# 上传目录
scp -r folder [email protected]:home/pi

HTTP一些常见题

在浏览器里点击页面链接后发生了哪些事情？

参考

浏览器判断是不是ip地址，不是就进行域名解析，依次通过浏览器缓存，系统缓存，host文件，还是没找到的请求DNS服务器获取IP解析(解析失败的浏览器尝试换别的DNS服务器，最终失败的进入错误页面)，有可能获取到CDN服务器IP地址，访问CDN时先看是否缓存了，缓存了响应用户，无法缓存，缓存失效或者无缓存，回源到服务器。经过防火墙外网网管路由到nginx接入层。ng缓存中存在的直接放回，不存在的负载到web服务器。web服务器接受到请后处理，路径不存在404。存在的返回结果(服务器中也会有redis,ehcache(堆内外缓存)，disk等缓存策略)。原路返回，CDN加入缓存响应用户。
如果域名不是ip，需要走域名解析成ip的逻辑，优先级顺序为: 1 浏览器缓存 > 2 本地hosts > 3 系统缓存 > 4 根域名 > 5 顶级dns服务器(如 com) > 6 二级dns服务器(baidu.com) > 7 三级dns服务器(www.baidu.com)，如果客户端指向的dns服务器为非官方的如 8.8.8.8，那在第4步之前可能还有一层cache,当然最后解析的ip有可能是cdn的，如果cdn失效了就直接穿透到源ip，当然这个服务器这一部分可能做了四层负载均衡的设置，所以有可能每次获取的服务器ip都不一祥，也有可能到了服务器ngx层做了七层转发，所以虽然获得的ip一样，但是内部可能转发给了很多内网服务器

MongoDB学习笔记

第一章

面向文档
方便扩展
多台机器进行数据分隔(横向扩展)
索引，聚合，特殊的集合类型，文件存储(大文件，元数据)

Webpack构建性能优化技巧

使用最新版本的webpack

v3 到 v4 重写了Chunk依赖逻辑
v4 到 v5 映入cache，支持将模块、模块关系图、产物等核心要素持久化缓存到硬盘，减少重复工作。

使用lazyCompilation

Webpack5.17.0后引入，按需编译。试想一个场景，你的项目中有一个入口（entry）文件及若干按路由划分的异步模块，Webpack 启动后会立即将这些入口与异步模块全部一次性构建好 —— 即使页面启动后实际上只是访问了其中一两个异步模块，这些花在异步模块构建的时间着实是一种浪费！

约束 Loader 执行范围

配置 exclude: /node_modules/ 属性后，Webpack 在处理 node_modules 中的 js 文件时会直接跳过这个 rule 项，不会为这些文件执行 Loader 逻辑。

使用 noParse 跳过文件编译

有不少 NPM 库已经提前做好打包处理（文件合并、Polyfill、ESM 转 CJS 等），不需要二次编译就可以直接放在浏览器上运行，例如：

Vue2 的 node_modules/vue/dist/vue.runtime.esm.js 文件；
React 的 node_modules/react/umd/react.production.min.js 文件；
Lodash 的 node_modules/lodash/lodash.js 文件。

// webpack.config.js
module.exports = {
  //...
  module: {
    noParse: /lodash|react/,
  },
};

需要注意

因为跳过了AST分析，需要自己确保noParse的文件的正确性
也不能在文件中引入其他文件的依赖
无法tree shaking

开发模式禁用产物优化

Tree-Shaking、SplitChunks、Minimizer 等

module.exports = {
  // ...
  mode: "development",
  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false,
    minimize: false,
    concatenateModules: false,
    usedExports: false,
  },
};

最小化 watch 监控范围

// webpack.config.js
module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/
  },
};

跳过TS类型检查

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.ts$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            // 设置为“仅编译”，关闭类型检查
            transpileOnly: true
          }
        }
      ],
    }],
  }
};

其他检查的方案

可以借助编辑器的 TypeScript 插件实现代码检查；
使用 fork-ts-checker-webpack-plugin 插件将类型检查能力剥离到子进程执行，例如：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.ts$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true
          }
        }
      ],
    }, ],
  },
  plugins:[
    // fork 出子进程，专门用于执行类型检查
    new ForkTsCheckerWebpackPlugin()
  ]
};

优化eslint性能

使用新版本组件 eslint-webpack-plugin 替代旧版 eslint-loader

const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

source-map

针对 source-map 功能，Webpack 提供了 devtool 选项，可以配置 eval、source-map、cheap-source-map 等值，不考虑其它因素的情况下，最佳实践：

开发环境使用 eval ，确保最佳编译速度；
生产环境使用 source-map，获取最高质量。

设置 resolve 缩小搜索范围

Webpack 默认提供了一套同时兼容 CMD、AMD、ESM 等模块化方案的资源搜索规则 —— enhanced-resolve，它能将各种模块导入语句准确定位到模块对应的物理资源路径。例如：

import 'lodash' 这一类引入 NPM 包的语句会被 enhanced-resolve 定位到对应包体文件路径 node_modules/lodash/index.js ；
import './a' 这类不带文件后缀名的语句，则可能被定位到 ./a.js 文件；
import '@/a' 这类化名路径的引用，则可能被定位到 $PROJECT_ROOT/src/a.js 文件。

resolve.extensions 配置:

默认值为 ['.js', '.json', '.wasm'] ，这意味着 Webpack 在针对不带后缀名的引入语句时，可能需要执行三次判断逻辑才能完成文件搜索,优化措施

修改 resolve.extensions 配置项，减少匹配次数；
代码中尽量补齐文件后缀名；
设置 resolve.enforceExtension = true ，强制要求开发者提供明确的模块后缀名，不过这种做法侵入性太强，不太推荐。

resolve.modules 配置：

类似于 Node 模块搜索逻辑，当 Webpack 遇到 import 'lodash' 这样的 npm 包导入语句时，会先尝试在当前项目 node_modules 目录搜索资源，如果找不到，则按目录层级尝试逐级向上查找 node_modules 目录，如果依然找不到，则最终尝试在全局 node_modules 中搜索。

开发者可以通过修改 resolve.modules 配置项，主动关闭逐层搜索功能，例如：

// webpack.config.js
const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules')],
  },
};

resolve.mainFiles 配置：

与 resolve.extensions 类似，resolve.mainFiles 配置项用于定义文件夹默认文件名，例如对于 import './dir' 请求，假设 resolve.mainFiles = ['index', 'home'] ，Webpack 会按依次测试 ./dir/index 与 ./dir/home 文件是否存在。

因此，实际项目中应控制 resolve.mainFiles 数组数量，减少匹配次数。

小程序的一些配置记录

window:{
     enablePullDownRefresh: true, // 可以下拉刷新
     backgroundTextStyle: 'dark',  // 三个小点变成灰色，不然背景白色的时候不可见
}

组合继承

function Sup(name){
  this.name = name
  this.colors = ['red','blue','green']
}

Sup.prototype.sayName = function() {
  console.log(this.name)
}

function Sub(name, age) {
  Sup.call(this)
 this.age = age
}

Sub.prototype = Object.create(Sup.prototype)
Sub.prototype.constructor = Sub

一道递归，做个记录，感觉还需要优化

const data = [
  {
    name: '商品信息',
    action: 'goods',
    class_icon: 'member',
    children: [
      {
        name: '商品列表',
        action: 'goods_list',
        children: [
          {
            action: 'add'
          },
          {
            action: 'delete'
          }
        ]
      },
      {
        name: '商品审核',
        action: 'goods_examine'
      }
    ]
  },
  {
    name: '模板管理',
    action: 'template',
    class_icon: 'member',
    children: [
      {
        name: '新增模板',
        action: 'create_template'
      },
      {
        name: '模板列表',
        action: 'template_list'
      }
    ]
  },
  {
    name: '分析报表',
    action: 'report',
    class_icon: 'member',
    children: [
      {
        name: '统计分析',
        action: 'report_analysis'
      }
    ]
  },
  {
    name: '账号管理',
    action: 'account',
    class_icon: 'member',
    children: [
      {
        name: '新增账号',
        action: 'create_member'
      },
      {
        name: '账号列表',
        action: 'member_list'
      },
      {
        name: '账号权限',
        action: 'member_power'
      },
      {
        name: '修改密码',
        action: 'upd_password'
      }
    ]
  },
  {
    name: '系统操作',
    action: 'system',
    class_icon: 'member',
    children: [
      {
        name: '操作日志',
        action: 'logs',
        children: [
          {
            action: 'hollyShit',
            say: 'shit',
            children: [
              {
                action: 'kevin',
                say: '尼玛坤，就问你服不服?'
              }
            ]
          }
        ]
      },
      {
        name: '回收站',
        action: 'recycle_bin'
      }
    ]
  }
]

const findChild = (data, action) => {
  let res = null
  const find = (data, action) => {
    for (let item of data) {
      if (item.action === action) {
        return (res = item)
      } else {
        item.children && find(item.children, action)
      }
    }
  }
  find(data, action)
  return res
}

console.log(findChild(data, 'kevin'))

Flutter入门学习笔记之Dart语言

字符串

{} 需要用在双引号中，单引号可以不使用{}

'my name is  $name'

"my name is ${name}"

集合

定义

var points = [];
var address = {};
/// 定义空的数组类型的,List和Map省略
var points = <Point>[];
var addresses = <String,Address>{};

判断集合是否为空

Webpack分析工具

Webpack Analysis

Webpack Analysis 是 webpack 官方提供的可视化分析工具，相比于其它工具，它提供的视图更全，功能更强大，能够通过创建依赖关系图对你的包进行更彻底的检查。
Webpack Analysis 提供了非常齐全的分析视角，信息几乎没有失真，但上手难度稍高，信息噪音比较多，所以社区还提供了一个简化版 webpack-deps-tree，功能相似但用法更简单、信息更简洁，大家可以根据实际需要交叉使用。

Statoscope

有两种用法，一是将 stats 数据导入到 Statoscope 在线页面；二是使用 @statoscope/webpack-plugin 插件

完整的依赖关系视图，涵盖 modules/chunks/assets/entrypoints/packages 维度；
entrypoints/chunks/packages/module 体积分析；
重复包检测；
多份 stats 数据对比；

Webpack Bundle Analyzer

Webpack-bundle-analyzer 是一个非常有名的性能分析插件，只需要一些简单配置就可以在 Webpack 构建结束后生成 Tree Map 形态的模块分布统计图，用户可以通过对比 Tree Map 内容推断各模块的体积占比，是否包含重复模块、不必要的模块等

Webpack Dashboard

webpack-dashboard 是一个命令行可视化工具，能够在编译过程中实时展示编译进度、模块分布、产物信息等

Speed Measure Plugin

SpeedMeasureWebpackPlugin 插件能够统计出各个 Loader、插件的处理耗时，开发者可以根据这些数据分析出哪些类型的文件处理更耗时间

UnusedWebpackPlugin

能够根据 webpack 统计信息，反向查找出工程项目里哪些文件没有被用到。

vim学习笔记

hjkl 四个方向移动
i进入insert模式
esc，ctrl+[退出insert模式

操作

d 删除
c 删除字符并进入insert模式,需要配合范围使用
C 从光标删除到末尾并进入insert模式，这个不用，直接可以用
y 复制
x 删除光标所在的字符
X 删除光标前的字符
s 删除当前光标的字符并进入insert模式
S 删除当前光标所在行并进入insert模式
r 替换一个字符
R 替换多个字符
u undo (进入进入插入模式后，到返回普通模式之间的输入或删除都被当成一次修改)
C-r redo
a 光标后添加
A 行为添加
gh hover
guiw 小写
gUiw 大写
可视化模式下，u 小写
可视化模式下，U大写
gc 单行注释 normal和visual 通用需要配合范围使用
gC 多行注释normal和visual 通用需要配合范围使用
zc 折叠代码
zC 折叠代码，不过嵌套的代码也会被折叠
zo 打开折叠
zO 全部折叠都打开，包括嵌套的

移动

0 行首
^ 移动到第一个不是blank的位置，这个改建成为H，大写的H
& 行尾
g_ 移动到最后一个不是blank的位置，改建为L，和上面同理
e 移动到单词的结尾
b 移动到上一个单词的开头
w 移动到单词的开头
ge 移动到上一个单词的结尾
gg 文件首
G 文件尾
跳到指定行行数+ gg or G

配置更方便的滚动（normal，visual）

shift+k 上移动5行
shift+j 下移动5行

一些实用的组合

cw 修改当前单词
ea 在当前单词结尾添加
d3w 删除三个单词
2f+2个字符

. 点命令

重复上一次操作，记录离开插入模式的全部动作

引申，删除一个单词

bde
dbx
diw 只有这个是可以被点操作重复的，建议用这个

尾部加分号

j A；

屏幕滚动

ctrl+f 向下个滚动一屏
ctrl+b 向上滚动一屏
ctrl+d 向下滚动半屏
ctrl+u 向上滚动半屏
ctrl+e 向下滚动一行
ctrl+y 向上滚动一行
zz 当前行置于屏幕中
zt(top) 当前行置于屏幕顶部
zb(bottom) 当前行置于屏幕底部

插入

I 行首
A 行尾
O 行前
o 行后

复制

yy 复制到当前行
p 粘贴
dd 删除当前行到寄存器内

可视化模式（可以配合上面的移动，还可以配合插入操作，例如A）

v 字符
V 行
C-v 块
o 切换可视化区域的光标位置，例如从尾部跳到头部
gv 回到上一次选择的区域

文本对象（i 内部，a 外部）

w 一个单词
( or ) or b一对()
[ or ] 一对 []
{ or } or B 一对 {}
< or > 一对 <>
t XML 标签
‘ 一对 ‘’
“ 一对 ”“
` 一对 ``
s 一个句子
S 一个段落

插件

vim-textobj-aruments (主要是修改函数参数)

ia 不含分隔符
aa 包含分隔符
daa 删除一个参数
cia 修改一个参数

vim-textobj-entire

dae 删除当前文本全部内容
die 同上，只是不包含前面和后面的空格

webpack笔记

涉及的东西

babel

ssh的config文件

阿里云拉取不了github的代码
今天ssh登录阿里云服务器，想拉取自己的代码，发现提示超时，将代码仓库的remote 改为git的方式也是不行，这里给出解决方法。

测试能否SSH连接github

$ ssh -T [email protected]

如果出现超时的情况，那么可以进入下一步

$ cd ~/.ssh
$ vi config

往config文件写入配置，User填你的github账号

Host github.com
User [email protected]
Hostname ssh.github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
Port 443

id_rsa是通过ssh-keygen生成的，命令如下

$ ssh-keygen -t rsa -C "你的github登录邮箱"

还有可能在你拉取代码的时候，有个警告，解决方法如下

$ vi /etc/hosts
写入
192.30.252.128 github.com

:wq 保存退出 OR shift+zz保存退出

Docker常用命令

常用命令

docker

run -t -i --name 容器名 ubuntu /bin/bash (创建容器)
start {id}
stop {id}
restart {id}
ps
- -a: 显示所有容器
- -l: 显示最近创建的容器
- -n: 列出最近创建的n个容器
exec (从容器启动bash)
- -t -i 容器名 /bin/bash
rm (容器名或者ID)
-sudo docker ps -a -q (删除全部容器)
images
pull (镜像)
search
commit -m "" -a "user" ID username/name:tag
rmi (删除本地镜像)

centos笔记

环境：Centos 7.4 64位

安装Nginx

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim

查看是否已经安装nginx

yum list | grep nginx

vi etc/yum.repos.d/软件名称.repo

配置nginx的源

vi /etc/yum.repos.d/nginx.repo
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/
gpgcheck=0
enabled=1

配置mongodb的源

这里需要写成mongodb-pro 不然按安装的时候还是会跑到现有的源上去
centos就用rehat的
$basearch其实就是个yum里面的变量，这个$basearch等于x86_64
etc/yum.conf 可以找到这些变量的值

vi /etc/yum.repos.d/mongo.repo
[mongodb-org-4.0]
name=mongodb repo
baseurl=https://repo.mongodb.org/yum/redhat/7/mongodb-org/4.0/$basearch/
gpgcheck=0
enabled=1

js基础部分一览

基本类型六种： null，undefined, boolean, number,sring, symbol

git alias config

git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.st status
git config --global alias.ci commit
git config --global alias.co checkout

git别名配置

常用别名做个记录

前端面试指南（难点记录）

== 操作符号

x == y

x为NaN，返回false，反之亦然
x为+0，y为-0，返回true，反之亦然
x为null，y为undefined，返回true，反之亦然
x为Number，y为String，返回comparison x == ToNumber(y)的结果，反之亦然
x为Boolean，返回ToNumber(x) == y的结果，反之亦然
x为Object，y为String或者Number，返回ToPrimitive(x) == y的结果，反之亦然

总结

1.判断两个类型是否相同，相同比大小
2.类型不同就会进行类型转换
1. null和undefined 直接返回true
1. 判断两者是否为string和number，是的话将字符串转为number
1. 判断其中一个是否为boolean值，是的话boolean转为number再判断
1. 判断一方为object，另一方为string、number或者symbol，是的话将object转为基本类型

JS事件循环

引用地址，根据该地址内容做的笔记： https://juejin.im/post/5c337ae06fb9a049bc4cd218?utm_source=gold_browser_extension

一、线程与进程

概念

进程是 CPU资源分配的最小单位；线程是 CPU调度的最小单位。(官方说辞)
进程对照工厂，有独立的资源
线程对照工厂里面的工人，工厂与工人对应关系是1：n
一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线
一个进程的内存空间是共享的，每个线程都可用这些共享内存。
工厂之间独立存在

多进程和多线程

多进程：可以同一个时间里，不同进程运行不同的任务
多线程：程度中的执行流，单个程序创建多个并行执行的线程来完成各自的任务

Chrome浏览器，一个tab一个进程，一个进程中会有多个线程，（渲染线程，js引擎线程，http请求线程）

好文好书收藏

书

解决键盘弹出后挡表单的问题

window.addEventListener('resize', function() {
      if(
        document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'
      ) {
        window.setTimeout(function() {
          if('scrollIntoView' in document.activeElement) {
            document.activeElement.scrollIntoView();
          } else {
            document.activeElement.scrollIntoViewIfNeeded();
          }
        }, 0);
      }
    });

Webpack 之 SplitChunksPlugin

Webpack 默认会将尽可能多的模块代码打包在一起，优点是能减少最终页面的 HTTP 请求数，但缺点也很明显：
页面初始代码包过大，影响首屏渲染性能；
无法有效应用浏览器缓存，特别对于 NPM 包这类变动较少的代码，业务代码哪怕改了一行都会导致 NPM 包缓存失效。

深入理解Chunk

Chunk 是 Webpack 内部一个非常重要的底层设计，用于组织、管理、优化最终产物，在构建流程进入生成(Seal)阶段后：

Webpack 首先根据 entry 配置创建若干 Chunk 对象；
遍历构建(Make)阶段找到的所有 Module 对象，同一 Entry 下的模块分配到 Entry 对应的 Chunk 中；
遇到异步模块则创建新的 Chunk 对象，并将异步模块放入该 Chunk；
分配完毕后，根据 SplitChunksPlugin 的启发式算法进一步对这些 Chunk 执行裁剪、拆分、合并、代码调优，最终调整成运行性能(可能)更优的形态；
最后，将这些 Chunk 一个个输出成最终的产物(Asset)文件，编译工作到此结束。

明显的问题

模块重复打包，解决：将被多个 Chunk 依赖的包分离成独立 Chunk，防止资源重复；
资源冗余 & 低效缓存，node_modules 中的资源通常变动较少，可以抽成一个独立的包，业务代码的频繁变动不会导致这部分第三方库资源缓存失效，被无意义地重复加载。

SplitChunksPlugin 简介

Webpack4后内置实现最新分包的方案，用法比较抽象，算上是webpack的一个难点，主要能力：

SplitChunksPlugin 支持根据 Module 路径、Module 被引用次数、Chunk 大小、Chunk 请求数等决定是否对 Chunk 做进一步拆解，这些决策都可以通过 optimization.splitChunks 相应配置项调整定制，基于这些能力我们可以实现：
- 单独打包某些特定路径的内容，例如 node_modules 打包为 vendors；
- 单独打包使用频率较高的文件；
SplitChunksPlugin 还提供了 optimization.splitChunks.cacheGroup 概念，用于对不同特点的资源做分组处理，并为这些分组设置更有针对性的分包规则；
SplitChunksPlugin 还内置了 default 与 defaultVendors 两个 cacheGroup，提供一些开箱即用的分包特性：
- node_modules 资源会命中 defaultVendors 规则，并被单独打包；
- 只有包体超过 20kb 的 Chunk 才会被单独打包；
- 加载 Async Chunk 所需请求数不得超过 30；
- 加载 Initial Chunk 所需请求数不得超过 30。

提示：这里所说的请求数不能等价对标到 http 资源请求数

第一篇文章

随便写一些平时遇到的难点，写出来，增加自己的认识。

以下是近期计划

学习Koa，搭建一套API。
深入学习webpack，达到独立搭建的程度。
学习React，写个小demo。

Docker容器内部访问宿主接口简便方法

docker run -d --name nginx --network host nginx

当容器使用 host 网络时，容器与宿主共用网络，这样就能在容器中访问宿主机网络，那么容器的 localhost 就是宿主机的 localhost