はじめに
本筋としては「setAttributeは遅い」の内容について細かい調査していたのですが、
余韻でつけたappendChildで面白い結果が出たので話が膨らめばと。
単純なものは速く vs レンダリングまでの速度を速く
手元にある下記のブラウザで試しました。
- Chrome 37.0.2017.2 dev-m
- IE 11.0.9 （画像のOtherです）
- Firefox 24.5.0
テストケース：http://jsperf.com/set-attribute
手元で実行したものの特徴としては、
- Chromeはattribute処理まではそこまで速くないが、appendChildまでいれると圧倒的
- 他ブラウザは単純な処理は速いが、レンダリングはものすごく遅い
となりました。数字は実行回数なので、大きいほど速いということです。
感想
他のレンダリング方法（innerHTMLなど）を試していないので、まったくダメかはわからないですね。
余裕があれば試してみます。
そもそも、いくらリッチクライアントで開発できるからと言って、
動的にガチャガチャしすぎは悪いと思います。