resouce hintsとpreloadを使ってリソースの取得を最適化する | 69log
Resource HintsとPreloadを使うことでリソースの取得を最適化できるようなので試してみた。 もともとはHTTP2にしてServer Pushを使うことで、予めリソースをサーバー側から送ることができるが、 ブラウザのキャッシュのメリットを活用できないんじゃないかということが気になっていた。 また、単純にHTTP2対応してもウェブページにはcrossoriginなリソースを多く利用しているので、 そのパフォーマンスの問題は解決しないのではないかという疑問があった。 それらを解決する手段としてResource Hintsなどを使ったPrebrowsingの技術が活用できそう。 preloadに関してはPreload: What Is It Good For?がまとまっているので参考にした。 Resource Hints についてResource Hints はlink要素に dn
HTTP2 Server PushとService Workerを使ったレスポンス改善
Express width HTTP2 Server Push を試したので、 今回はPushされたリソースをCache APIでブラウにキャッシュして、 二度目以降のアクセスはキャッシュを使いHTTPリクエストしないでレスポンスをさらに向上できることを試してみた。 復習でHTTP2 Server Pushを試してみる。 HTTP2 Server Pushサンプルで作ったアプリケーションではStreamにリソースファイルをPushしてレスポンスを返すことで、Server Pushを実現している。 もしアプリケーションの前にNginxなどのProxyサーバーがある場合は、HTTPヘッダーにLinkヘッダーを追加してレスポンスを返すようにしたら良い。 Promise.all( pushFiles.map(file => { const option = Object.assign(stremO
browserifyでjQuery(CDN)とjQueryプラグインを使う
jQueryをCDNから取得し、jQuery pluginが活躍している場合のbrowserify導入の備忘録 CDNのjQueryをrequireするCDNを使うことで、browserifyでbundleするファイルサイズは小さくなり、ファイル生成までの時間も短くなるという恩恵がある。 まず、CDNのjQueryを利用するのにbrowserify-shimを使う。 globalのjQueryを「jquery」というモジュール名でrequireできるようにする。 requireでincludeするjqueryはglobal(window)空間に存在しているので、 実際にはrequireなどせずとも使えるといえば使える。 require をするには以下の理由があるらしい。 require(‘jquery’)に統一することでwindow.jQueryというグローバルな名前空間へのアクセスを避け
cssnextを使って最新のcss syntaxで開発するのが良さそう
ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。 JavaScriptの最近の事情javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。 これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。 同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。 Sassの問題点最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。 特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。 Sassを使っていても実際はそのほんの一部の
browser-syncを使ったクロスブラウザ同期を試してみた
フロントエンド開発時にファイルの変更と同時にブラウザをリロードするlivereloadは便利ですが、Browser ExtensionsにIEがサポートされてなかったりするので残念。 そこでbrowser-syncを使って、livereloadと同じようにブラウザ同期を行えるっぽいので試した。 browser-syncは スクロールをブラウザ間で同期 フォームの入力をブラウザ間で同期 リンクでのページの遷移をブラウザ間で同期 cssファイルの変更をリロードしないで適用する(cssインジェクション) livereload ビルドインウェブサーバーを使用することで静的ファイルにも対応できる という特徴があります。 がある。 ファイルの変更はsocket.ioを使用してブラウザに通知され、IEでも問題なく利用できた。(VM環境のIE) gruntを利用している場合、 grunt-browser-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
