2018/11/07 Nightwatch.js IntersectionObserver-polyfill

[aloerina01]

Nightwatch.js | Node.js powered End-to-End testing framework

• 公式
• e2eテストのためのツール
• サンプルコード見た感じ、テスターのオペレーションをコードにして、その途中途中で表示内容や挙動に対して確認事項をpassするか見ていく感じ
• selenium依存
• 表示速度とかもとってくれるのはありがたい感じする
• Seleniumプロジェクトから生まれたWebDriverに依存している
• Getting Started | Nightwatch.jsにブラウザごとのWebDriverの設定方法が載ってた

IntersectionObserver/polyfill at master · w3c/IntersectionObserver

• ntersection-observer.js#L269-L270
• やっぱりと言ってしまえばそれまでだけど、スクロールとリサイズにイベント貼ってた
• 自分でスクロール監視するのと同じだしthrottleも内包しているので、polyfill使ってでもIntersectionObserver使うべきな気がする
• 場合によってはMutationObserverも使うのか、これ知らなかった
• getParentNodeの実装がちょっとおもしろかった(こういう書き方があるのね的な)

MutationObserver - Web API インターフェイス | MDN

• DOMの変更を検知したら処理を行うもの

Google、SEOに適したLazyloadの仕様を公開 | 海外SEO情報ブログ

• InfiniteLoad関連で読んだ
• 遅延読込した部分に対してURLを振る(クエリをつける)ことができるようでなるほどと思った
• InfiniteLoadのページから遷移して戻ってきたときに、遅延読込部分を記憶できていい感じかも

Config Files · Babel

• Babel7の設定ファイルが変わってた
• あとでブログに書く

[hatashiro]

最近担当したプロジェクトではinfinite loadをIntersectionObserver(+ polyfill)で実装しました。具体的にはページ下のローディング要素にIntersectionObserverを設置して、intersectionRatioが一定以上だとロードを実行する感じです。スクロールイベント処理より実装も簡単でして、パフォーマンス的にも良いかなと。

[aloerina01]

polyfill使えばproductionでも利用できる感じなんですね(そこが気になったのでpolyfillのソース読んでました)。コンテンツの遅延読込＆遅延描画しているプロジェクトのリニューアルが近々あるので検討してみます！