hero image

biubiubiu

辩证法,碎大石。

呜呜呜伙伴呢,我的伙伴呢
评论。这里是friend...但是我先放一个打包后就失效的评论区链接。github评论因为抽风还有注册账号有点难用...
小游戏
meow meow meow
好玩的
bulabula
辩证法,碎大石
La dialectique peut casser des briques!
必然失败
biubiubiu
我
美少女
二极管二极管二极管
二极管二极管二极管
美少女
Nickel_Angel
Nickel_Angel
美少女
开端。

开端。

高中课本上有的一段,也许是调侃黑格尔的哲学,说他是密涅瓦的猫头鹰:猫头鹰在傍晚起飞掠过草原,便可知道白天发生的一切。但,人类、哲学从来都是这样,也只能在傍晚起飞,在一切结束之后才知道发生了什么。

咳咳,由于我水平有限,就不卖弄了,这一块我会列出一堆我看过的,喜欢的小故事。

我还是喜欢把这个放第一个。 从高中的一篇作文开始。有关从“火”的使用到审美与实用。

简单点,你不能指望一堆原始人明白火能驱赶野兽、能烤熟食物帮助杀菌、更好消化、能取暖御寒、能bulabulabula…在清楚明白的这一串科学道理之后才去主动地去找“火”这种玩意;它们当初可能真的就是脑子一抽突然觉得好看好玩才跟火发生了关系,才发现了之后的火的那一系列作用。


花木瑞开端大约 8 分钟
前端'基础'

这里会贴一下...前端面试常见的一些问题的自己的总结,背 api 的就不放了,找的是那种可能要讲一小段的那种。

浏览器地址栏输入 URL 后发生了什么

首先 URL 由 协议 + 域名 + 端口 ++ 路径 + 查询参数 + 锚点 组成。

  • 网络传输
    输入 URL 后,浏览器通过 DNS 解析域名,找到对应的服务器 IP 地址,建立 TCP 连接

    • DNS
    • TCP 发送 HTTP 协议发送请求,服务器接收到请求后,通过 HTTP 协议返回响应
    • cdn
      • cdn 来处理一些常用资源,cdn 服务会根据用户的地理位置,选择离用户最近的服务器,加速资源的加载。
    • http 缓存
      • 常见的做法是将主页 index.html 做协商缓存,其他静态资源文件名打包加 hash 后做强缓存。
      • 强缓存是指浏览器直接从本地缓存中读取资源,不需要发送请求到服务器。可以通过设置响应头中的 Cache-Control 和 Expires 来设置强缓存。
      • 协商缓存是指浏览器发送请求到服务器,服务器根据请求头中的 If-None-Match 和 If-Modified-Since 来判断是否命中缓存。可以通过设置响应头中的 ETag 和 Last-Modified 来设置协商缓存。304 意味着命中缓存。
  • 渲染
    浏览器接收到响应后,通过 HTML 解析出 DOM 树,然后通过 CSS 解析出 CSSOM 树,然后通过 DOM 树和 CSSOM 树合成渲染树, 然后通过渲染树和布局树合成布局树,然后通过布局树和绘制树合成绘制树,然后通过绘制树绘制到屏幕上。

    • 其中有两个比较重要的概念是,重排和重绘。
    • 重排是指改变了 DOM 结构或文档流布局,需要重新计算布局,比较耗费性能。
    • 重绘是指改变了元素的样式,但是没有改变布局,只需要重新绘制,而不需要重新计算布局,性能开销较小。

花木瑞八股前端记录面试大约 8 分钟
状态

状态——这是个很棒的概念,因为这个概念什么都不是,所以你几乎可以把任何东西填进去,把这里作为一个知识库各种玩意的一个中继点。就像 js 原型链最头头上是个 null。

“状态”

相比 Expressions,Statements 远没有那么天经地义,还有很多名词都能让我想到这个东西...状态机,寄存器,记忆,temp,channel...嗯。经典的定义与赋值就属于Statements。编程里的单等号不是数学表示相等的等号而是“赋值”。


我又在react文档看到了这部分... useState 弄出的东西被叫做组件的记忆,而为了代码的健壮,通常,我们要谨慎的设计、控制、最小化这一部分。


状态机。程序,计算机提供的所以服务都能被看作是,状态机。
从编程角度来讲,在以 C 语言为代表的高级语言的控制流出现之前,在编程还是直接在内存里到处 jump 的年代,就已经有状态这个概念了,在那时也确实会需要流程图这种玩意——全是 goto,不画个图代码可能是真的没法看,而这里画的这个图,就可以看做一种状态机(代码如果看得懂的话也是)。


一个人能能走的多远不在于他在顺境时能走的多快,而在于他在逆境时多久能找到曾经的自己。——KMP/动态规划。


前端的一些“状态管理”的库或者说方案,还有那个有名的RxJS... Promise, 甚至上升到一些编程范式设计模式,比如各种“生命周期”...


编译原理中的一些。


甚至在狭义的编程之外,一些素材比如图像处理之类的,会用各种线把各种模块连在一起搞出一个...流水线一样东西。


花木瑞挖坑大约 8 分钟
编译原理

说真的这挺折磨的,学校不知道为什么在大三下开了这门课还搞成必修,我因为乱七八糟的事根本没心思听课...然后课上作业搞的一团乱...

但是我还是不想用听的来学,我... 所以打算自己先过一遍。

基础 基础2


花木瑞基础大约 3 分钟
反应式编程

kriskowal/gtor

反应式宣言

嗯...但在此之前,想先看看防抖节流,锁,事务一致性,以及js 的 Promise。

stupid!

debounce & throttle

react 文档里有说过,不要信任用户的操作,用户根本不知道自己的操作到底在干嘛也不需要去知道,收到的所有的操作都要加一个 handler, debounce & throttle 就是两种最常见的 handler。

difference-between-throttling-and-debouncing-a-function

debounce 的意思是,如果用户在短时间内多次触发了事件,那么只有最后一次事件会被处理,前面的事件都会被忽略。

常见场景是,用户在输入框中输入内容,如果每次输入都触发事件,那么就会导致事件处理函数被频繁调用,这样会影响性能进而可能影响体验,所以一般会使用 debounce 来处理这种场景,只有用户输入完毕后,才会触发事件。不仅仅是文字输入,鼠标移动,窗口大小改变等等都可以使用 debounce 来处理一下。

throttle 的意思是,如果用户在短时间内多次触发了事件,那么只有每隔一段时间的事件会被处理,前面的事件都会被忽略。

这里,主要,更多的保护的可能不是用户体验了,这里更多的是保护服务器,主要是在用户明确的点击、提交行为时,防止用户在短时间内多次点击、提交,导致服务器压力过大,或者重复提交数据错误一类的问题。


redis 实现 throttle,节流。

keys *
set key
get key
del key [key ...]
expire key seconds ttl key

mset/mget/msetnx/mgetnx
bitop/bitcount/bitpos/bitfield // 位操作, 有人玩的特别花

hset/hget/hdel/hexists/hgetall/hkeys/hvals/hincrby/hincrbyfloat/hstrlen/hscan // hash
lpush/lpop/rpush/rpop/lrange/ltrim/lindex/lset/lrem/linsert/llen/lpushx/rpushx/lpop/rpop/lpop/rpoplpush/blpop/brpop/brpoplpush // list

sadd/srem/sismember/smembers // 集合
zadd/zrem/zrange/zrangebyscore/zrevrangebyscore/zrank/zrevrank/zscore/zcard/zcount/zscan/zremrangebyrank/zremrangebyscore // 有序集合,为什么‘z’开头?redis开发者也觉得牵强。。


如要限制每分钟每个用户最多只能访问100个页面,思路是对每个用户使用一个名为 rate.limiting:用户 IP的字符串类型键,每次用户访问则使用 INCR命令递增该键的键值,如果递增后的值是1(第一次访问页面),则同时还要设置该键的过期时间为1分钟。这样每次用户访问页面时都读取该键的键值,如果超过了100就表明该用户的访问频率超过了限制,需要提示用户稍后访问。该键每分钟会自动被删除,所以下一分钟用户的访问次数又会重新计算,也就达到了限制访问频率的目的。

这里存在一个不太明显的问题:假如程序执行了但没执行完,中途突然因为某种原因退出了,没能够为该键设置过期时间,那么该键会永久存在,导致使用对应的IP的用户在管理员手动删除该键前最多只能访问100次博客,这是一个很严重的问题。为了保证建立键和为键设置过期时间一起执行,可以使用上节学习的事务功能.

事实上,仍然有个问题:如果一个用户在一分钟的第一秒访问了一次博客,在同一分钟的最后一秒访问了9次,又在下一分钟的第一秒访问了10次,这样的访问是可以通过现在的访问频率限制的,但实际上该用户在2秒内访问了19次博客,这与每个用户每分钟只能访问10次的限制差距较大。尽管这种情况比较极端,但是在一些场合中还是需要粒度更小的控制方案。如果要精确地保证每分钟最多访问10次,需要记录下用户每次访问的时间。因此对每个用户,我们使用一个列表类型的键来记录他最近10次访问博客的时间。一旦键中的元素超过 10 个,就判断时间最早的元素距现在的时间是否小于 1分钟。如果是则表示用户最近1分钟的访问次数超过了10次;如果不是就将现在的时间加入到列表中,同时把最早的元素删除。

2333... 真是麻烦又折磨,书的作者最后也推荐使用另外的脚本来实现节流。

那,来个 js 版本的。

JS 有两个时间的函数 setTimeout 是到了之后调一次也只调一次,setInterval 是每隔一段时间调用一次一直搞下去。
但 debounce 和 throttle 都是在一定条件下调用一次,(不停的操作是用户已经在做的了)所以,这里,我们用 setTimeout 来做这两个函数。

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}
function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    }
  }
}

transaction & lock

事务的ACID,原子性,一致性,隔离性,持久性。 如果要挑重要的,那就是原子与隔离。——原子性表示不可分;隔离性类似解耦。

Promise

callback


我还是不想进入正题

通信,信号处理...

socket && publish & subscribe && message queue

cluster

Reactivity

functional programming ? reactive programming??

....RxJS


花木瑞指南大约 8 分钟
工程化

2023-02-23

嗯...是让我比较郁闷、羞耻的一个东西。

郁闷是老是搞不对搞不通,羞耻是看着自己以前弄得那几个玩意...怎么说呢,像那种过家家的,p 用没有,形式都不对,根本没进到门槛但是又做样子... ——杀了我吧.jpg

我会把 iief 和 commonjs 的一些小的片段改成 esmodule ,会拆分一些代码;但是真的面对那些工具的时候...还是很懵。

vite 打包,用 pnpm 做 monorepo,还有当我遇到今天的 bug 的时候...我发我连最简单的 js 脚本引入都没了解全。(还有少不了的日常把 src 写成 scr)


花木瑞记录日记大约 2 分钟
“我”的他者之维

20码麻布=1件上衣

交换价值、商品价值的神奇之处就是,它们只在交换中,在与同自己相异的东西交换中,才能显现出来————说20码麻布=20码麻布毫无意义,但在说20码麻布=1件上衣时,似乎有一种神奇的,出离于麻布、上衣本身的东西出现了,让原本根本不能画上等号的东西强行相等了起来。交换价值并非原本就存在的玩意,它需要靠交换这一行为、运动才能显现出来。

只有在他者眼中,才能看见自己的存在与意义。只有原本的伯牙和千里马还不够,还要有钟子期和伯乐,那些价值才能被映现出来,像镜子一样。推广一下,人的本质并不存在,存在的是社会关系,是关系的运动产生了各异的人,“人的本质是社会关系的总和”像是另一种“王侯将相宁有种乎”,国王资本家并非本身有什么神秘才智,无产者也并非就是流氓,这些位置的产生并不是有意识、有依据进行的,那是股他们看不见的、出离于他们的东西运动的结果。


花木瑞mirror大约 6 分钟
SPA SSR SSG

大概不是我第一次看着这些词,但是在我思考字符串,还有游戏的客户端和服务端的时候...虽然我还啥都没做出来,但是有了些理解。

在最古早的 php jsp 时代,使用的就是 SSR ,但这时的 SSR 十分...简陋,只是单纯的内容的单向展示,而没有多少交互。而之后,web 2.0 以 ajax 的出现作为代表,网页、网站的功能开始变得丰富,就像一个应用 SPA,要用户进行更多交互,让用户有更多操作,CSR 也就不可避免。

SSR 与 CSR 都各有优缺点,在具体 bb 那些有的没的之前,要提醒一下,这两者也并不冲突,十分常见的一种做法是,首屏加载使用 SSR ,而之后有后续操作再去搞 CSR,这被叫做同构渲染。SSR 在展示静态文本的速度与搜索引擎 SEO 上的优势,CSR 在提供更多动态交互与复杂操作上的优化,是可以全都要的,只不过可能要多学点东西。


花木瑞前端基础日记大约 14 分钟
碰碰球

我在github上翻到了小时候喜欢玩的一个游戏的一部分代码
……感觉有些,不知道怎么说的感觉。那个游戏在我初中的时候停更,高中的时候关服...
它所依赖的技术也都过时了
一门半死不活的语言ActionScript,还有一个被现在大多数浏览器抛弃的平台Adobe Flash
十年前…
那时候我还能一玩一整天…
可是直到它关服我甚至都还不会按F12,也许早点知道的话能看到更多...

所以为什么是碰碰球?因为它简单啊...其实有想过贪吃蛇...但感觉有点麻烦,玩家之间交互麻烦...。主要大概也不是canvas...而是,我想做成一个在浏览器里能玩的,在线的,简单的多人游戏。


花木瑞日记game记录大约 27 分钟
2
3
4
5
6