WebSalon

年前一周无心工作，办公室好多人都请假5+2，然而我请假不知道干啥，于是乎——摸鱼！摸鱼做点啥好呢？
水群的时候，都在聊到游戏公司又是年后又是抽奖的，眼馋坏了(今年年终都没有，还裁了好几个hxd， o(╥﹏╥)o)
说到游戏，我曾经也是做了一个web的贪吃蛇，纯js操作dom(毕竟那会儿刚学校前端开发)，当时做碰撞的逻辑做了好久呢。现在看来就是写的一坨大便。。。源码在此，在线体验(ps: 方向键进行控制, 肉眼可见的丢帧)。
步入正题，这次想做的是一个可以操控人物打怪的小游戏。网上查询了一番，考虑库的更新情况，现有文档及中文文档，以及大佬们开贴记录的问题及实现的demo情况，最终选择了PixiJS，来进行开发。
游戏基本操作及逻辑已经完成，可以在线体验， 诸多不足，还请指正。

nginx负载均衡

什么是负载均衡

负载均衡（Load Balance），它在网络现有结构之上可以提供一种廉价、有效、透明的方法来扩展网络设备和服务器的带宽，并可以在一定程度上增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性等。用官网的话说，它充当着网络流中“交通指挥官”的角色，“站在”服务器前处理所有服务器端和客户端之间的请求，从而最大程度地提高响应速率和容量利用率，同时确保任何服务器都没有超负荷工作。如果单个服务器出现故障，负载均衡的方法会将流量重定向到其余的集群服务器，以保证服务的稳定性。当新的服务器添加到服务器组后，也可通过负载均衡的方法使其开始自动处理客户端发来的请求。（详情可参考：What Is Load Balancing?）
简言之，负载均衡实际上就是将大量请求进行分布式处理的策略。

JS代码压缩

内置了uglifyjs-webpack-plugin

什么是文件指纹？

打包输出的文件名的后缀。可以用来做版本管理。

文件监听

文件监听是在发现源码发生变化时，自动构建出新的输出文件
webpack开启监听模式，有两种方式：

• 启动webpack命令时， 带上 –watch 参数
• 在配置webpack.config.js中设置 watch: true

缺陷： 每次需要手动刷新浏览器

资源解析： 解析ES6与react jsx语法

使用babel-loader。babel的配置文件是：.babelrc

entry

entry用来指定webpack打包入口
单入口：entry是一个字符串。适合SPA，项目中只有一个入口文件的情况；
多入口：entry是一个对象。

1
2
3
4
5
6
7
8
9
10
11

// 单入口
module.exports = {
  entry: './path/to/xxx/file.js'
}
// 多入口
module.exports = {
  entry: {
    app: './src/app.js',
    adminiApp: './src/adminApp.js',
  }
}

Node 中的 readFile API 工作机制

先通过两段代码来分析下同步和异步读文件 API 的区别。

1
2

var fs = require('fs')
var data = fs.readFileSync('test.js')

1
2
3
4
5

function fileHanlder(err, data){
  data.toString()  
}

fs.readFile('test.txt', fileHanlder)

前言

由于 JavaScript 是运行在主线程之上的，因此，一旦执行垃圾回收算法，都需要将正在执行的 JavaScript 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。这种行为叫做全停顿（Stop-The-World）。

一次完整的垃圾回收分为标记和清理两个阶段，垃圾数据标记之后，V8 会继续执行清理和整理操作，虽然主垃圾回收器和副垃圾回收器的处理方式稍微有些不同，但它们都是主线程上执行的，执行垃圾回收过程中，会暂停主线程上的其他任务，具体全停顿的执行效果如下图所示：

前言

JavaScript 是一门自动垃圾回收的语言，也就是说，不需要去手动回收垃圾数据，这一切都交给 V8 的垃圾回收器来完成。V8 为了更高效地回收垃圾，引入了两个垃圾回收器，它们分别针对着不同的场景。