Webpack系列：第五回(性能优化)
本文中，我们会借助一个项目，展示webpack的各个优化手段，对项目的优化效果代码分割🔴 优化前（单个 Bundle）bundle.js: 315 KB
总文件数: 1 个
首屏加载: 需要下载全部 315 KB
缓存效率: 低（任何代码变化都会重新下载整个文件）
🟢 优化后（代码分割）main.xxx.js: 71.8 KB (应用代码)
vendors.xxx.js: 552 KB (第三方库)
总文件数: 2 个
首屏加载: 只需下载 71.8 KB 的应用代码
缓存效率: 高（第三方库代码变化少，缓存效果好）
配置内容：optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
priority: 10,
}, ...
Vue.js系列：Diff（patch）算法
本文尝试尽可能详细的介绍Diff(patch)算法的核心原理首先我们要知道,diff用来干嘛的？比较新旧两节点的差异, 尽可能少的操作dom, 更新视图。
更新页面的策略有两种
其一：频繁操作dom
其二：将页面的所有节点，转化成AST，又称为虚拟dom表示，本质就是js的对象。然后通过一些算法，找出前后两者的差异，更新差异之后，再还原成真实的dom节点render。区别在于： 第一种，改数据，render，改数据，render….第二种，改数据，改数据，改数据，改数据，改数据，render。
代码举例验证一个事实：频繁的操作数据，远快于频繁的操作dom，因为后者会增加一个额外的开销：渲染
// 第一组
<script>
const div = document.getElementById('123')
console.time('1')
for (let i = 0; i < 100000; i++) {
div.innerHTML = i
}
console.timeEnd('1')
&l ...
无线电研究：第一回
由于个人近期的需要，准备着手研究一下无线电，所以就有了本系列，用于一些必要的记录。本文做一个开场热身。
谈及无线电就不得不提电磁波。世界是神奇的，我们都知道空气存在，但是不可见，无线电波亦是如此。任何高于绝对零度（零下273，15摄氏度）的物体，都在发射着电磁波，包括人。温度越高，波长越短。这就是测温枪的原理。想象一下，如果电磁波可见，那么这个世界会是什么样的盛况？我们看每一个人，都是大仙。电磁波的传播速度就是光的速度，30万公里/s，光也是一种电磁波。
无线电波分布在3Hz–3000GHz的频率范围内，被分成了12个波段，如下所示。
无线电特性
频率越低，波长越长，覆盖距离越远，绕射能力越强，穿透能力越低。反之亦反。这就是为什么，在城市中，常见的手持电台都是分米波，就是俗称的UV段中的U，见上图的UHF和VHF。不需要传输的有多远，但需要强悍的穿透力。但是在野外活动，基本就是V段。
电磁波的发射，需要有足够高的震荡频率。频率越高，发射电磁波的本领越大。
电磁波的接收。电磁波在空气中传播时，如果遇到导体，会让导体产生感应电流，感应电流的频率和激发他的电磁波频率一致。当接收 ...
Paperjs：view和tool事件注解
在前面介绍点类的时候，我们有提到过，tool类的实例有鼠标的各种事件，view类的实例也有相关的一些方法。但是，似乎又有些不同。本文将尽可能详细介绍
拿onMouseDown事件举例，我们分别绑定触发点击的函数事件，如下图所示：
从上图中我们能够嗅到一些信息，首先view的优先级高于tool的，且名称还是有点区别的，在view中叫做MouseEvent，而在tool中，叫做ToolEvent事件。其次，很明显，MouseEvent有的ToolEvent都有除了target，基本属于包含于的关系。下面，我们就一个个看这些属性，究竟能干嘛。
关于delta。在view的事件中delta为空，而在tool中是以一个各个属性值均为0的点实例，两者其实等价，那么这个属性是用来干嘛的？对于tool中的delta，官方解释：
The difference between the current position and the last position of the mouse when the event was fired. In case of the mouseup event, the ...
闭包详解
本文详细介绍闭包的概念、应用场景及一些坑首先搞明白什么是闭包简单说， 一个函数，能访问到它 “创建时” 所在作用域的变量，哪怕这个作用域已经执行结束，函数依然能 “抓着” 这些变量不放。react代码演示：
import { useEffect, useState } from "react";
export default function TestPage() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
const newVal = count + 1;
console.log("newVal", newVal);
setCount(newVal);
}, 2000);
return () => {
clearInterval(timer);
};
}, []); ...
Typescript备忘录
本文纯属ts的内容备忘录ts能干嘛？将弱类型的js，变为强类型的语言。举例:
const fn = (str: string) => {
console.log(str)
}
fn([1,2,3,4])
// err
示例代码中，我们声明的msg是一个数组，但是我们通过类型注解，规定fn的参数应该是一个字符串，配合一些插件工具，显示报错。
那么ts还有其他什么特性吗？
接口，一种声明的约束interface Role {
name: string,
blood: number
}
interface Role2 {
name: string,
old?: number,
readonly sex: string
}
const role: Role = {
name: 'hhvcg',
blood: 100
}
同一类似，如果role的某些字段，类型同接口定义的不一致，会报错。同时写代码的时候，有字段提示的功能。如果说需要某些字段是可选的，加？ ...
网络请求与远程资源：第一回
本系列文章主要用于介绍获取网络资源的三种方式：Ajax、Fetch和WebSocket1. Ajax（Asynchronous Javascript + XML），异步js和xml注：ajax基本被淘汰，现在基本是fetch或者axios曾经的页面及其简单。页面类似于公告栏，文字加图片。打开地址拿到资源展示即可。什么？你说你还想要点击交互？刷新页面吧。而作为上古技术的ajax的出现，第一次实现了无需刷新也能重新发送请求获取数据。提到ajax就一定会涉及到XHR（XMLHttpRequest）。下面时经典的ajax请求写法
const xhr = new XMLHttpRequest()
xhr.onreadystateChange = function() {
// 状态码4代表响应完成
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
...
工作者线程系列：第一回
本文介绍前端开发中，工作者线程相关的基础知识我们一直都说js是一个单线程语言，这话没错，但又不失完全正确。因为当今的js，已经有了开线程干活的概念。就是说，当某些运算我们呢觉得会耗时较长，严重影响应用性能时，这种操作完全可以开启一个完全独立的线程环境，扔给他一坨数据后转头执行后续任务，然后等到那坨数据被处理好后，拿到输出结果再做进一步的操作。注意：独立线程的处理和当前主线程的执行可以理解为并行的。
官方定义：使用工作者线程，浏览器可以在原始页面环境之外，再分配一个完全独立的二级子环境。这个子环境不能与依赖单线程交互的API互操作（如dom）。但可以与父环境并行执行代码。
工作者线程:目下包含了三种
专用工作者线程， web worker
共享工作者线程
服务工作者线程
专用工作者线程数据的传输有三种情况
结构化克隆算法。当我们用postMessage传输对象时，浏览器会遍历该对象，并在目标上下文生成一个他目标的副本，说白了深拷贝了一份数据。
可转移对象。主线程将对象给到线程后，主线程的该数据被清除，线程环境创建了一个该数据对象。说白了就是一份数据。
SharedArrayBuf ...
Paperjs：像素打印机
本文介绍一个像素打印机的小玩具就是要在画布中，从左上角开始绘制指定大小的像素方块。从左到右，到了边缘折回继续。思路：全局维护一个x，y，用来记录当前的位置，每帧的时候在该位置绘制方块，然后更新xy，直到到达画布的右下角。
效果如下：
动图懒得搞了，将就着看吧。。。完整vue2代码：
<!--
* @Author: Hhvcg
* @Date: 2022-02-20 15:26:48
* @LastEditors: -_-
* @Description:
-->
<template>
<div class="dashboard">
<div class="dashboard-text flex-cc">
<span>
像素打印机
</span>
</div>
<div class="dashboard-container pd10 flex-cc">
<canvas id="main_canvas" ref="main_canvas" resiz ...
Paperjs：先验内容
本文主要介绍一些paperjs的先验知识（当然英文可以的，你也可以选择直接阅读官方原版文档）。1. 关于paperjs中的图形(path)，官方定义如下：
In Paper.js, paths are represented by a sequence of segments that are connected by curves. A segment consists of a point and two handles, defining the location and direction of the curves.
在paperjs中，paths（路径，或者说是图形），是由一系列曲线(curves)连接的段(segments)，组成的。每个段segment都有一个点和两端的handler组成—->handleIn和handleOut（注意，这三个东西代码层面，都是一个东西，vector）。上图中0，1，2三个segment构成了当前的这个波浪path。handler的作用，用于定义两边的位置及方向。实质就是俩向量，确定该段的始端和末端。为了方便理解，可以直接先将 ...