[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js
ページをスクロールして、要素が表示された時にアニメーションを適用するエフェクトは非常に人気が高いですね。 要素がビューポートに入った時、そして出る時にそれぞれアニメーションを適用できる他のスクリプトに依存なし、超軽量（1.9kb gzip）のスクリプトを紹介します。 すべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-view.js -GitHub in-view.jsのデモ in-view.jsの使い方 in-view.jsのデモ デモは非常にシンプルで、ビューポートに要素が入った時と出る時にそれぞれアニメーションが適用されます。 アニメーションは入った度と出る度ごとに適用することも、一度だけ適用することもできます。
![[JS]縦長ページのスクロールエフェクトはこれが使いやすい！ビューポートをトリガーにしたスクリプト -in-view.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42912a7e2d55f1411cc35125c5180a65f5fb702d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016090505.png)
フロントエンド速度改善でやったこと(Expiresヘッダ、faviconのgzip圧縮、JSの読み込み遅延化) - $shibayu36->blog;
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog; という記事を以前に書いたのだけど、結局何をやったか書いて欲しいと社内で言われたので、今回のフロントエンドの速度改善でやったことについて書いてみる。そこまで大したことはやってないので参考程度にどうぞ。 前提 ページのレンダリングが遅いと思い始めたので改善をすることになったのだが、改善をし始めたところChromeのアップデートがあり爆速になってしまった(FirefoxやSafari等はもともと速かった)ので、では明らかにやったほうが良いことだけやりますかという話になった。そのためあんまりbefore/afterもちゃんと取っていないので、今回はやったことの紹介くらいに留める。 やったこと 計測や調査をしてみたところ、以下のようなことはやってしまったほうが良いということになった。 静的ファイルに適切にEx
zopfli で静的コンテンツの gzip 配信と Content/Transfer-Encoding について | blog.jxck.io
Intro HTTP では Accept-Encoding と Content-Encoding でのネゴシエーションにより、 gz などで圧縮したコンテンツを転送することができる。本サイトでは zopfli を用いて gzip 形式の配信に対応した。 Accept-Encoding クライアントが Accept-Encoding: gzip を指定して来た場合、サーバは Content-Encoding: gzip を付与し、 URI に指定されたコンテンツを gzip 圧縮して送信することができる。 特にテキストベースの HTML, CSS, JS などは、この圧縮の効果が高く、ペイロードが小さくなるためパフォーマンスの向上が期待できる。 逆に、 PNG, JPEG など圧縮形式の画像などについては、オーバーヘッドが発生しサイズが増える可能性もあるため、対象フォーマットの選択には注意が
Optimized gzip/zip packages, 30-50% faster – defer time.Sleep()
I have worked on optimizing the standard library deflate function, and I am happy to announce revised gzip/zip packages, that on x64 is about 30-50% faster with slightly improved compression. Project: https://github.com/klauspost/compress All packages are drop-in replacements for the standard libraries, so you can use them by simply changing imports. Compressed car by César; Musée d’Art Contempora
nginxパフォーマンスチューニング〜静的コンテンツ配信編〜 - Qiita
今回はHTMLやCSS、Javascriptといった比較的軽量な静的コンテンツの配信をnginxでやるケースに絞ってチューニングする際のポイントについて紹介しようかと思います。 (注：worker_rlimit_nofileやsysctl.confのネットワーク周りの設定のような定石的なチューニングについてはあえて解説しないのであらかじめご了承ください。) コンテンツをgzip圧縮する 何はともあれgzip圧縮です。ネットワーク帯域に比べればCPUリソースなんて安いものです。 しかし、多くの場合これだけでは十分ではありません。何故ならnginxはデフォルトではContent-Typeがtext/htmlのコンテンツしか圧縮しないためです。圧縮対象のContent-Typeを増やすにはgzip_typesを使います。 単純なWebサイトであれば上記の設定で十分ですが、場合によってはappli
Google Developers: データ圧縮アルゴリズムの基礎 - ワザノバ | wazanova
「webサイトの平均サイズが2メガに近づき、Androidゲームが125メガになってきて、コンテンツと送信コストのトレードオフが深刻な問題になってきている。開発者にとって次の10年は、圧縮アルゴリズムを理解して、うまく使いこなすことが重要になる。」という紹介文に惹かれて、3回 (20分/10分/20分) のビデオシリーズを見ました。概要は下記の通りですが、図示が中心でわかりやすく説明してくれてますので、是非チェックしてみてください。（3回目の後半はちょっと素人には難解でした。。） Episode 1: Variable Length Codes モールス信号からバイナリコードに進化してきたが、共通しているのは、出現率の高い文字から順番に短い記号列 ("."もしくは"-") /数列 ("0"もしくは"1") をあてはめることで、記号列/数列全体の平均の長さを短くしようとする考え方。 この場合
意外と知らないファイル圧縮技術の常識
本連載は、Java言語やその文法は一通り理解しているが、「プログラマー」としては初心者、という方を対象とします。Javaコアパッケージを掘り下げることにより「プログラマーの常識」を身に付けられるように話を進めていきます。今回はアーカイブと圧縮の違いなどの基礎知識とともに、Java APIでJava定番のファイル圧縮形式jarやgzip、zip形式を扱う方法も紹介。 今回はデータの圧縮技術を学んでいきます。データの圧縮技術はさまざまなコンピュータ関連用途において利用されていますが、この記事では「ファイル圧縮」の話題に絞って話を進めていきます。 意外と知らない、「圧縮」って何？ 私たちが普通にOSを利用していると、ファイルの拡張子が「.zip」「.lzh」「.cab」などとなっているファイルを扱うことがあります。これらの拡張子を持つファイルは、複数のファイルやディレクトリを1つのファイルにまと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Having The Security Rug Pulled Out From Under You - Akamai Security Intelligence and Threat Research Blog