Carpe Diem

備忘録

Webフロント

CloudFrontのキャッシュでハマった話

概要 ブラウザのキャッシュ - Carpe Diem を検証している時に期待した挙動をしなくてハマったので、CloudFrontのキャッシュの動作と注意点をまとめます。 CloudFrontのキャッシュ動作 レスポンスヘッダのx-cacheを見ると以下の3つに区別できます。 x-cache …

ブラウザのキャッシュ

概要 Webフロントのパフォーマンス診断 - Carpe Diem で指摘されたブラウザキャッシュの対応をするため調べてみました。 大きく分けて強いキャッシュと弱いキャッシュの2種類のキャッシュがあります。 強いキャッシュ ブラウザ側でリソースを保持し、期限が…

Webフロントのパフォーマンス診断

概要 Webフロントのパフォーマンスをチェックする診断ツールの紹介です。 なんだかもっさりした挙動だけどどこから手を付けたら良いか分からない、といった時に問題点を洗い出すのに便利です。 Audits Chrome DevToolsに標準で付いています。 ページを開いた…

Webフロントの実装で利用したChrome extension

概要 Angularを使ってWebフロントを実装しているのですが、その過程で便利だったChrome extensionを紹介します。 Chrome extension Page Ruler chrome.google.com 画面上でのピクセルを測るのに使う。デザイナーさんからPNGだけ頂いた時など。 ColorZilla ch…