视频大文件的块数据传输
大文件例如视频的读取，不能像单张图片那样，等到完全读取完毕，才把数据给到前端。此时，就需要部分、部分的返回数据。
本文将尽可能详细的介绍，为了实现这个需求，前后端的都应该怎么搞
后端配置
var fs = require('fs');
function readBigFileEntry(filename, response) {
path.exists(filename, function(exists) {
if (!filename || !exists) {
response.writeHead(404);
response.end();
return;
}
var readStream = fs.ReadStream(filename);
var contentType = 'none';
var ext = path.e ...
Eventloop事件循环，到底是个啥？
本文介绍所谓EventLoop相关内容在具体讲这个话题前，我强烈推荐大家去看一篇文章，就是朴灵对阮一峰讲解的eventloop文章的注解，很有意思。对于操作系统和硬件层面的内容有过学习的同学，看完之后的感觉相信跟我是一样的，高下立判。类比有时候是需要的，但类比终究是类比，他会丧失很多细节。最严重的，类比到了最后，就变成了胡扯。
https://www.cnblogs.com/simonbaker/p/5715393.html
首先思考：为什么说js是单线程语言？
专业点讲，js是一门非阻塞的单进程单线程语言，就是说，不存在并行代码，只能一行一行的执行。应用场景决定了语言特性。js起家就是用于操作dom。倘若js是多线程。目下有两个线程，其中一个改了节点内容，另一个删除了节点，执行哪个？注意：线程的执行是并行的。所以，可以姑且认为现在是单线程，今后至少在相当长的时间内，依旧会是单线程。
那么一个显然的问题就来了，我们经常听到的js中的异步请求是什么鬼？不是说是单线程吗？异步任务是谁在执行？是跑js的那个环境，需要严重分清一个概念，循环队列这种规则机制，不是js的运行机制，而是跑j ...
视频文件读取问题
在利用electron+react开发视频播放器的过程中遇到了一些有令人疑惑得问题：
读取文件给到前端，发现只有音频没有画面
针对大视频文件，如何实现块数据读取？因为倘若每次读取都是一整个文件，大文件情况下，响应缓慢。
针对第一个问题，目测时文件格式导致的。但是同样都是mp4文件格式，为什么有的没问题，有的就会出现有声音没画面的情况呢？
后端读取逻辑：
fs.readFile(path, (err: Error, data: any) => {
console.log('读取文件内容>>>', data)
event.sender.send('getVideoContent_back', {
name: message.data.name,
file: data
})
})
前端处理逻辑
window.Main.on('getVideoContent_back', (data: any) => {
const blob = new Blob([data.file], { type: ...
仿生学应用：电子蝌蚪(二)
本文中，我们继续讲解，怎么让蝌蚪军团，一个个的逼真的动起来的。前面简单介绍了小蝌蚪这个类的基本变量，及蝌蚪实例化及绘制出来的方法，实现了基本绘制的功能。动起来实际很简单，无非就是每次执行run的时候，给当前蝌蚪实例移动到一个新的位置，然后重绘即可。那么问题是，这个新的位置，我们该如何确定。
最简单粗暴的方式，就是随便去一个随机向量，用该向量，去更新实例坐标。
updateVector () {
this.vector = paper.Point.random()
}
updatePosition () {
const newP = this.position.add(this.vector)
this.position = newP.clone()
}
moveHead () {
this.head.position = this.position
}
run (boids: Array<Boid>) {
// this.flock(boids)
this.updateVector( ...
仿生学应用：电子蝌蚪(一)
前面介绍了一些基础概念和示例，本篇开始进入正题，目标是实现一个电子化蝌蚪的小项目首先再来回看一下我们想要做出的最终效果：
界面中的每一个小蝌蚪，彷佛有生命般的在”自由“运动，他们长得一样，身体的结构都是由一个头，一个颈部和一个尾巴组成，但是各自都有各自的运动方向，及运动速度,同时还添加了类似碰撞检测的机制。这模仿的效果，相当的惊艳。以上的描述，实际上就是我们本次任务的需求，那么废话不多说，让我们钻进代码的世界中，用代码，“创造虚拟生命”吧。本项目是基于vue2框架开发。
执行逻辑：在mounted生命周期中，依次调用了三个函数mounted() {
this.init()
this.drawLovePath()
this.drawTadpole()
},
首先，我们需要利用paperjs，我们需要初始化世界。
initWorld() {
console.log("$-_------------初始化世界---------------$-_-");
const canvas = this.$refs.tadpole;
// can ...
CSS系列：基础内容
页面视图相关网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： document.body.scrollTop网页被卷去的左： document.body.scrollLeft网页正文部分上： window.screenTop网页正文部分左： window.screenLeft屏幕物理分辨率的高： window.screen.height屏幕物理分辨率的宽： window.screen.width屏幕可用工作区高度： window.screen.availHeight屏幕可用工作区宽度： window.screen.availWidth屏幕缩放因子：window.device ...
算法：贪心算法
本文主要介绍贪心算法及一些经典场景案例
算法核心：每次寻求最优解，直到满足最终需求。只看目前，不虑未来。又名：鼠目寸光
1. 分饼干
假设你是一位很棒的家长，想要给你的孩子们一些小饼干。但是，每个孩子最多只能给一块饼干。对每个孩子 i，都有一个胃口值 g[i]，这是能让孩子们满足胃口的饼干的最小尺寸；并且每块饼干 j，都有一个尺寸 s[j] 。如果 s[j] >= g[i]，我们可以将这个饼干 j 分配给孩子 i ，这个孩子会得到满足。你的目标是尽可能满足越多数量的孩子，并输出这个最大数值。示例 1:输入: g = [1,2,3], s = [1,1]输出: 1解释:你有三个孩子和两块小饼干，3个孩子的胃口值分别是：1,2,3。虽然你有两块小饼干，由于他们的尺寸都是1，你只能让胃口值是1的孩子满足。所以你应该输出1。
此题第一次做还想复杂了，每个孩子最多只能给一块饼干这句话没注意到…如果每个孩子顶多一块，那就很简单了。思路：我们的目标是为了尽可能多的喂饱孩子，数量最大，那么就应该按照孩子们的胃口排个序，优先满足胃口小的，同时应该用最小的饼干。我们 ...
DNS杂谈
本文主要介绍dns的解析流程在浏览器的地址栏中，我们呢可以输入的信息大体分了域名、ip及任意随机内容三种。
输入的随机内容。浏览器的搜索引擎负责处理。
输入ip。浏览器的额网络进程负责处理，通过路由器存储转发找到目标ip服务器建立连接。
输入域名。就得先通过dns域名解析查找到对应的ip，再执行第二种情况的操作。
DNS解析大体有本地解析和互联网域名解析两种，但其中还有诸多的情况需要具体分析。
本地解析。
1.1 浏览器缓存查找。浏览器本身会维护一个dns域名ip的表数据，用来缓存之前解析的结果。所以第一步会尝试着去该表中查找是否有对应的ip。找到，结束。未找到，下一步
1.2 系统缓存查找。找到了返回ip。没找到下一步
1.3 本地host文件。找到了返回ip。没找到，进入互联网域名解析阶段。
互联网域名解析阶段。 本地DNS服务器查找。这个本地跟你电脑无瓜。一般由离你最近的路由器或者运营商的服务器负责。找到返回，未找到，查找请求会到根服务器（中央服务器，全球九个吧貌似）。根服务器不负责查找，因为无法维护一个如此庞大的DNS。所以查找请求会被层层下发。域名如果是.com, ...
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 ...