[B! async][javascript][css] slay-tのブックマーク

slay-t id:slay-t

asyncとjavascriptとcssに関するslay-tのブックマーク (2)

JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
slay-t 2021/04/30
html

document

const

async

javascript

canvas

css

PiP
リンク
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。手法適用しやすさを順に手法を並べると、以下のようになります。遅延する圧縮するキャッシュするまとめて削る遅延するサイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
slay-t 2018/07/25
js

async

javascript

css
リンク
1