专题►一周拾遗

一周拾遗-第2期

本期内容：

杂七杂八的Chrome分享

1
2
3
4
5
6
7
8
9
10
1. `$_`是对上次执行的结果的引用。
2. `$i('lodash')`，`Console Importer` 插件
3. `copy()` 在 console 里 copy 任何你能拿到的资源，例如`copy($_)`或者`copy($0)`。
4. 右击，并且选择 `Store as global variable` (保存为全局变量) 这个选项。
5. `眼睛符号`，定义实时更新的js表达式。
6. `Snippets`，自定义脚本；`ctrl+p, i`运行自定义脚本。
7. `[Ctrl]+[Shift]+[P]`，Command (命令) 菜单。
8. `Command，capture`，截屏。
9. `Command，theme`，快速切换主题。
10. `queryObjects`。

https://www.qdtalk.com/2019/10/24/%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB%E7%9A%84chome%E5%88%86%E4%BA%AB/

Mutation Observer API

Mutation Observer API 用来监视 DOM 变动。

https://wangdoc.com/javascript/dom/mutationobserver.html

Vue原理

一张图理清 Vue 3.0 的响应式系统

逐行剖析Vue.js源码

浏览器的回流与重绘 (Reflow & Repaint)

浏览器的回流与重绘 (Reflow & Repaint)

高性能WEB开发：深入理解页面呈现、重绘、回流

浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角

回流与重绘：CSS性能让JavaScript变慢？

What forces layout / reflow

fastdom

碰撞检测

《《HTML5 Canvas核心技术》 .图形、动画与游戏开发》 第八章。

https://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169
http://www.mikechambers.com/blog/2011/03/21/javascript-quadtree-implementation/

如何编写低垃圾回收的实时JavaScript？

对于游戏开发比较重要。

低级篇：

  • 用{}、[]代替new运算符。
  • 函数返回值不要返回对象，用外部变量代替。

  • 通过cr.wipe(obj)清空和重用对象。

    1
    2
    3
    4
    5
    6
    7
    cr.wipe = function(obj){
      for(var o in obj) {
        if (obj.hasOwnProperty(o)){
          delete obj[o];
        }
      }
    }

  • 通过arr.length=0清空和重用数组。

  • 用变量引用回调函数，尽量少动态创建匿名函数。

高级篇：

  • 少用数组的slice方法和字符串的substr方法，他们都会创建新的临时对象。
  • 在对象数组的递归中，用索引号topIndex来代替pop和push操作。
  • 少用对象形式的矢量，如getPosition()改为getX()和getY()。

https://www.construct.net/en/blogs/construct-official-blog-1/write-low-garbage-real-time-761

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management

vega

可视化语法

https://vega.github.io/vega/