<template strip-whitespace>を使ってますか？

なぜかPolymer 2.0の公式ドキュメントに載っていないようですが、ライブラリのソースコードを確認しても生きています。Polymer 1.0のドキュメントのLocal DOM#Remove empty text nodesにある説明を参照しながらstrip-whitespaceについて考えます。

stip-whitespaceとは？

Polymer 1.0のドキュメントによれば、

Add the strip-whitespace boolean attribute to a template to remove any empty text nodes from the template's contents. This can result in a minor performance improvement.

要は、テンプレートにstrip-whitespaceを指定することで、テンプレート内のコンテンツから空のテキストノードを削除するということです。

空のテキストノードとは何のことでしょうか？なぜパフォーマンスが向上するのでしょうか？

空のテキストノードとは？

既にご存知の方も多いと思いますが、これはPolymerの問題ではなくDOMにつきまとう一般的な問題です。「DOMの操作で隣のノードにアクセスしようとしたら、なぜか幽霊（空のノード）に遭遇し思いの外DOM操作が複雑になった」おそらく多くの方が経験のあることだと思います。なぜこんなものが存在するのでしょうか？

実は、エディタがドキュメントのフォーマットを適切に扱えるようにしたり、CSSのwhite-space: preが適切に機能するようにするために内部的に必要とされるブラウザの実装上の都合です。

この問題について詳しい解説はMDNを参照してください。

なぜパフォーマンスが向上するのか？

パフォーマンスが向上するのは、DOMがシンプルになるため内部的なDOMアクセスがシンプルになるためです。ドキュメントのサンプルコードをみてもわかる通り、無用なwhitespaceを削除することで、内部的に走査するDOMの数が減ります。これがパフォーマンス向上の秘密です。

ところで、ドキュメントの終わりにこんな説明があります。

Starting in release 1.8.0, strip-whitespace is recursive, affecting any nested dom-if and dom-repeat instances inside the template.

dom-repeatやdom-ifといったテンプレート要素については、1.8.0よりテンプレート内にネストされた全てのインスタインスに対して再帰的に削除してくれるようになったということです。

ドキュメントをお読みになった方は、Shadow DOM & styling/DOM template#Automatic node findingの説明の中で、dom-repeatやdom-ifから動的に生成されたインスタンスはthis.$.idでアクセスできなかったことを思い出してください。この場合、標準のDOMのquerySelectorメソッドに頼らざるを得ません。パフォーマンス上の理由以外からもstrip-whitespaceを効果的に使うべきですね。

まとめ

DOMへアクセスする必要がある場合、空のテキストノードが特別に必要とされる理由がなければ<template>にstrip-whitespaceを指定して管理するDOMをシンプルに保ちましょう。