Webpack系列：第六回
本文浅谈webpack的热更新机制啥是热更新？当我们对已经在运行的程序代码做些许修改时，页面能够自动的局部刷新，这就是热更新机制
如何实现的？
初次打包： 编译打包，生成bundle.js，然后开启一个静态资源服务器，根据对应的地址打开页面
开启热更新时改动代码：webpack重新编译 > 根据变化的内容生成俩文件：manifest.js及chunk.js，通过HMRserver主动推送给浏览器（本质一个websocket通信），浏览器根据manifest.js文件获取变化的内容，重新render。
注： bundlejs中除了自己写的模块代码，还包含了HMR-runtime
坦克大战：第二回
本文介绍第一回中主要功能的具体实现坦克类坦克实例对象初始化时，会绘制自身躯体，由三部分组成：坦克底座（Path.Rectangle）、炮塔（Path.Circle）及炮管（Path）,具体代码如下：
init() {
this.path = new paper.Group({
children: [
// 炮身
new paper.Path.Rectangle({
name: 'base',
center: this.position,
size: new paper.Size(SIZE),
strokeColor: this.color
}),
// 炮管
new paper.Path({
name: 'turret',
segments: [this.position, this.position.add(this.direction)],
strok ...
坦克大战：第一回
本文简单介绍一个小游戏：坦克大战，基于paperjs开发
满满的压迫感。
目前该版本的基本功能：
按键控制坦克的移动，鼠标左键射击。
随机生成的NPC（enemy），自动定位player的位置，无限逼近。
炮塔能够随着鼠标方向转动。
地图边界限制，player不会越界。
效果如下：
初始化我们的坦克initRole() {
const position = new paper.Point(this.WIDTH / 2, this.HEIGHT / 2)
const end = new paper.Point(position.x, position.y - 50)
const direction = end.subtract(position)
this.tank = new Tank(position, 'white', direction)
},
Tank类的入参有三个，分别是随机位置，坦克颜色，以及当前随即方向。坦克类完整代码如下：
/*
* @Author: Hhvcg
* @Date: 2023-03-01 14 ...
性能的考量：NMS过滤算法
本文将详细的介绍一个算法思路NMS。详细的业务场景：
我们需要把后端返回的点数据，画到canvas中的大圆上。数据量较少的情况下比如几千个，那完全不需要用算法去做筛减。但是设想一下。后端返回了数万甚至是百万级别的点数据如何？在之前介绍浏览器图形化编程极限的时候，我们详细测试过，目下的谷歌浏览器，10000个图形绘制几近极限（注意,是需要支持拖拽缩放等操作时页面流畅的最大图形个数）。这个时候，我们就需要对点数据作筛减。
理由： 没必要显示那么多，同时目下浏览器也扛不住。
具体实现：
我们会给画布上图形个数，设定一个阈值K。将wh区域划分成一个个格子区域。为了最终限制在500，即wh / 500 = T，每个区域面积T中，最多输出1个。即可保证总输出的个数<= 500。
根据宽高数值，将画布按照一定的尺寸网格化，最后输出一个grid三维数组。分别表示行、列及各自一块区域内的所有缺陷得集合数组。
业务场景代码举例：
console.log('过滤前>>>', defects)
console.log('viewRange>>>', viewRange)
c ...
网络协议相关
UDP与TCP的区别到底是啥？说人话
二者都是传输层的协议，但是，后者提供的是面向连接的、可靠的传输服务。而前者提供的，是不可靠的服务。
为什么？
传输过程中出现丢包，UDP不负责重发
包的到达顺序出现乱序，没有纠错功能。
收到包原样发出去，即使网络拥堵也这德行。所以不支持流量控制。
双人打僵尸系列：第一回
本文开始，我们将尝试借助paperjs的能力，尽可能完善的写一个童年小游戏： “双人打僵尸”该游戏的名字听起来有点low，且功能不算复杂，但确实是我印象最为深刻的一款游戏，操作简单，很耐玩。归纳一下我们的需求：
按键控制角色移动。
角色可以切换枪械武器进行射击，枪械不同，打出的子弹及对应的伤害也不尽相同。
游戏为关卡制度，随着关卡级别越高，怪物的数量也会越多，同时还会出现血量值更高的boss怪。
怪物只能从地图的上下两个口出来，随机涌现普通怪及boss怪。
玩家能够放置油桶或者白块充当阻碍。其中油桶受到攻击会爆炸，白块会被损毁。
前端依赖包的种种往事
本文简单聊聊前端依赖管理器npm的大致逻辑npm基本上是目下的前端项目管理依赖的默认工具。一般项目工程中所涉及到的所有依赖包，均会记录在package.json文件中。去到公司，初次down下来的项目，需要我们通过命令npm install来安装所有依赖。那么承担依赖管理器的npm，具体是如何管理的呢？同时他跟其他的比如cnpm、yarn有什么区别呢？
一. 版本规则一般在package.json文件中，依赖的信息格式如下:
"dependencies": {
"antd": "3.1.2",
"react": "~16.0.1",
"redux": "^3.7.2",
"lodash": "*"
}
版本格式为：主版本号.次版本号.修订号版本号的递增规则如下：
主版本号：当你做了不兼容的 API 修改。大改，更新需谨慎。
次版本号：当你做了向下兼容的功能性新增。加功能的小改, 如antd新增了某些组件
修订号：当你做了向下兼容的问题修正。修复问题的版本
除了指定明确的版本号，也可以指定一个范围。
~：只升级修订号
^：升级 ...
屏幕刷新率的种种
本文简单聊聊显示器成像相关的点组内技术分享canvas的内容时，涉及到了屏幕刷新率的问题，感觉讲的还不是很全面，借此篇文章，好好总结一下。
古人云：耳听为虚，眼见为实。但这一套，显然已经不适用于当代, 因为眼见不一定为实。作为新时代的农民工，每天基本是对着两块显示屏度过的。在我们人眼看来，显示屏的画面就是静止的，但事实，并非如此。我们以为静止的显示器，实际上正以每秒至少60次的频率不断刷新着页面。学过图像的都知道，每秒24张图片的频率展示画面的时候，在人眼看来，就是连续着的动画。
每秒24张图片就是24HZ，当下的主流浏览器的屏幕刷新率都是60或者75hz。即：每秒钟切换了60次或者75次。基本就是16.6ms一帧的速度。在最近发布的iphone13系列的手机中，pro和promax版本最高能达到120hz的屏刷。自己稍微查了一下，公司的27英寸的三星显示器是主流的60hz，一般般。家里的34英寸的带鱼屏，屏刷高了一个档次，100hz。自己手头的那台macbook2019款，屏刷60hz。而自己一直心心念念的外星人显示器，没看错的话，全系列240起步。依稀记得之前某位大佬晒出的外星人显 ...
CSS系列：BFC
本文简单聊聊BFC(块级格式化上下文)1. 啥叫块级格式化上下文？具体指代的就是一个容器（如div等），这种容器具备的特性：
内部元素的任何样式改动，都不会影响到容器外的元素。
内部的浮动元素的高度也会计算在内
margin重叠
2. 触发场景
html根元素。毕竟他外头啥都没有。
浮动元素
overflow不为visible
position为absolute或者fixed
3. 应用场景
防止margin重叠。同一个BFC的元素标签内会出现margin重叠。因此BFC隔离开即可解决。
高度包含浮动元素。
不与浮动元素重叠