Optimizing code for better performance (e.g. when iterating through multiple objects)

This suggestion is inspired by a forum-post in the Kadenze Nature of Code course titled 'PERFORMANCE VERY SLOW WITH 100 FLOCKING BOIDS - OPTIMIZATION SUGGESTIONS?' (in the 'general' category)
I think a general tutorial with some 'best practice' examples would be really helpful. It should cover things like tools for monitoring performance & typical 'things to avoid' (with preferred alternatives demonstrated). Maybe something about browsers too (I guess all browsers are not equal). It could take the form of a particular project (e.g. boids), showing first an example with low-performance code, slowing down & running syrupy as nr. of objects increases, demonstrating how gradual performance-gains can be achieved as the code is improved according to 'best practice'. Maybe touching on the key differences between p5.js & processing in their current form.

100 flocking boids でパフォーマンスが遅いことについての参照フォーラム投稿から始め、boids プロジェクトを中心にチュートリアルの範囲を定義します。ブラウザーのパフォーマンス監視ツール、一般的な反復処理の最適化、p5.js と Processing の違いを調査します。Done は、遅い例からの測定可能な改善を示す、ベストプラクティスを網羅した完全なチュートリアルとします。

索引モデルが issue の本文から書いたものです。