班启的备忘录

Git 的 diff 算法

2021-09-23T00:00:00+00:00

参考链接

https://segmentfault.com/p/1210000009610313/read https://blog.jcoglan.com/2017/02/12/the-myers-diff-algorithm-part-1/

DNS 解析过程

2021-09-16T00:00:00+00:00

DNS解析过程

三次握手，四次挥手

2021-09-16T00:00:00+00:00

参考链接

https://zhuanlan.zhihu.com/p/53374516

动态规划解题思维

2021-09-15T00:00:00+00:00

一句话总结：动态规划问题的一般形式就是求最值，而求最值必须要穷举，所以求解过程中最大的问题是如何穷举；动态规划的穷举有个特点，会存在重叠子问题，并且一定具备最优子结构；但是题目千变万化，只有列出正确的状态转移方程才能正确地穷举

辅助思考状态转移方程的思维框架

明确状态 -> 定义 dp 数组/函数的含义 -> 明确选择 -> 明确 base case

明确变量 -> 定义 dp 函数 -> 明确子问题 -> 明确退出边界

解法要点

备忘录
dp 数组

例子1：斐波那契数列

参考链接

https://mp.weixin.qq.com/s?__biz=MzAxODQxMDM0Mw==&mid=2247484731&idx=1&sn=f1db6dee2c8e70c42240aead9fd224e6&chksm=9bd7fb33aca07225bee0b23a911c30295e0b90f393af75eca377caa4598ffb203549e1768336&scene=21#wechat_redirect

浏览器缓存策略

2021-09-15T00:00:00+00:00

一句话总结：使用 header 中的字段来控制缓存的使用；老字段是 Expires 记录绝对时间，新字段 Cache-Control 配合各种选项，记录的是相对值；协商缓存是本地缓存文件没有过期就用缓存的，缓存过期了就带着缓存标识询问服务器有没有过期，过期了就重新请求，没过期就用缓存的

HTTP缓存流程图

参考链接

https://juejin.cn/post/6844903593275817998 https://segmentfault.com/a/1190000021716418

网站性能优化

2021-09-15T00:00:00+00:00

一些基础优化

图片的压缩和合并
代码压缩（混淆、去掉调试代码）
减少 HTTP 请求
样式表放页头、脚本放底部
避免过大 DOM

进阶优化

静态资源存 CDN
TTL 优化
异步脚本
css 预加载
TTFB 优化

参考链接

https://segmentfault.com/a/1190000021098540 https://csspod.com/frontend-performance-best-practices/#javascript-bottom

公平洗牌算法（Knuth-Shuffle）

2021-09-14T00:00:00+00:00

问：设计一个公平的洗牌算法

一、洗牌

随机抽取数组中的一个元素，放入另一个数组即可

function shuffle (arr) {
    const ret = []
    while (arr.length > 0) {
        const r = parseInt(Math.random() * arr.length)
        ret.push(arr.splice(r, 1)[0])
    }
    return ret
}

shuffle([1, 2, 3])

二、Sort 洗牌

利用 Array 的 sort 方法，对交换函数进行改造，每次有 1/2 的机会交换位置，来实现随机

const shuffle = arr => arr.sort(() => 0.5 - Math.random())

shuffle([1, 2, 3, 4, 5]) // [1, 2, 5, 3, 4]

三、公平洗牌（Knuth-Shuffle）

从数组最后一位向第一位循环，每次随机取一个当前位置及之前的项，与当前位置的项替换

这样相当于每个项被放到每个位置上的概率都为 1/n ，以实现公平

var shuffle = function(arr) {
    var n = arr.length;
    for (let i = n-1; i > 0; i--) {
        var r = parseInt(Math.random() * (i + 1));
        [arr[r], arr[i]] = [arr[i], arr[r]];
    }
    return arr;
}
shuffle([1, 2, 3, 4, 6])

参考链接

https://cloud.tencent.com/developer/article/1462951
http://www.xiongdalin.com/2021/01/25/array-shuffle/

函数防抖与节流（debounce and throttle）

2021-09-14T00:00:00+00:00

debounce 特点

函数多次发起执行，只接受执行最后一次发起

throttle 特点

函数多次发起执行，只在第一次执行完成后才接受再次发起执行

参考链接

https://www.jianshu.com/p/c9fe37cdf200

for…in 和 for…of 的用法与区别

2021-09-14T00:00:00+00:00

一句话总结：for…in 循环对象的 key，for…of 调用对象的迭代器方法循环对象的 value

原理

JS 中 new 的原理以及实现

2021-09-14T00:00:00+00:00

一句话总结：执行 new 关键词后，总是返回一个对象，要么是构造函数加空对象原型生成的对象，要么是构造函数 return 的对象

原理

在内存中创建一个新对象
这个新对象内部的[[Prototype]]特性被赋值为构造函数的 prototype 属性。
构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)
执行构造函数内部的代码(给新对象添加属性)
如果构造函数返回非空对象，则返回该对象;否则，返回刚创建的新对象

实现

const _new = function (fn, ...regs) {
  const o = {};
  o.__proto__ - fn.prototype
  fn = fn.bind(o)
  const res fn(...regs)
  return (typeof res === 'object') ? res : o
}

简便实现

const _new = function (fn, ...regs) {
  const o = Object.create(fn.prototype);
  const res = fn.call(obj, ...regs);
  return (typeof res === 'object') ? res : o;
};

参考链接

https://cloud.tencent.com/developer/article/1526901 https://juejin.cn/post/7006232342398238733 https://juejin.cn/post/6844904082310692872