前端AI充电站

默认情况下，Main 部分会详细记录 JavaScript 的调用堆栈，使用 Disable JavaScript Samples 可以隐藏这些调用。像一些自定义的函数调用会被隐藏。下图为隐藏前和隐藏后的比较 DevTools 用火焰图表示主线程的活动。x 轴表示随时间的记录，…

减少网络延迟，加快加载速度。 preloadjs 可做预加载，phaserjs 的 preload 方法可做预加载。 服务器端做相应的缓存技术，强缓存和协商缓存。 webpack optimization.SplitChunks 分割代码。 合并代码减少请求。 减少 dom 层…

在本教程中，你将在 Chrome 浏览器的开发者工具中，使用 Performance 面板查找页面性能瓶颈。 打开 Chrome 的无痕模式。无痕模式能够确保浏览器在没有其他干扰的环境中运行。比如，如果你的 Chrome 安装了很多插件，这些插件可能会干扰到性能的评估。 在无痕…

0. 先把 Phaser 的主要代码搭起来 1. 设置游戏区域容器 2. 放置小球 3. 拖动小球

0. 先把简单的框架搭起来 1. 放置小球 2. 放置按钮 3. 设置分数 4. 让小球动起来，不会碰撞，只会重叠 5. 给按钮绑定事件 6. 两个球重叠时触发事件

上面的核心代码是 snapshotArea 方法，使用这个方法就可以实现对画布的截图。 另外要注意的是，游戏每一帧只能激活一个快照，所以如果要截图多张图片的时候一定要在上一次截图完成后再调用截图的相关方法。上面的代码用 Promise 把 snapshotArea 包裹起来，避…