タグ

2016年10月27日のブックマーク (3件)

  • 超詳解!Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート

    超詳解!Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近(ここ1年くらい)の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker

    超詳解!Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
  • Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io

    Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得

    Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
  • この1年、Webのパフォーマンスで変わったことは?──HTML5 Conference 2016

    この1年、Webのパフォーマンスで変わったことは?──HTML5 Conference 2016 川田寛(ピクシブ株式会社) こんにちは、ふろしきです。HTML5 Conference 2016の当日は、38度近くの熱があり、発表時はろれつが回ってませんでした。しかし、伝えたいことは伝えられたと思っています。その内容とは… 「この1年でWebのパフォーマンスの技術にどんな動きがあったのか」 というダイジェスト。ここで話した3つのテーマについて、記事でもご紹介。 1. レイアウト処理を減らす HTML5がバスワードするよりもずっと前から、CSSでアニメーションさせることはごくごくあたりまえ。JSが扱えないデザイナーであっても手軽にアニメーションできる良い世界になりました。しかしそこに、モバイルが出現したことで、JSだけで満足という人たちもCSSの機能を活用しなくてはいけなくなりました。 モ

    この1年、Webのパフォーマンスで変わったことは?──HTML5 Conference 2016