タグ別アーカイブ: 高速化

Noto Sans JPの使い方 2018

何週間か前に書いたと思っていた記事が見当たらないのでメモ。
下記の2016年の記事が閲覧ランキングに上がっていたので、8月の案件で再度調べたときの参考URLをちょいちょい補足します。

Noto Sans JPをCDN経由で使う

2018/8/27にツイッターで投稿されてた劇的にロードが早くなった日本語漢字フォント、にはいっていました

https://fonts.google.com/?subset=japanese

これはアーリーアクセスでなくても早くなったってことなのかしらね。
続きを読む Noto Sans JPの使い方 2018

CSS will-changeプロパティについて

モバイルでの高速化でなんか知ってることねがぁ〜〜〜?てよっしーに聞いたら出てきた。
will-changeって使ってますか?え?なにそれ?未来の話??(よく見たら未来の話でした。一番下に対応ブラウザ書いてますがiOS Safari対応してません)

概要

Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
https://dev.opera.com/articles/ja/css-will-change-property/

saraさんだぁ〜。最近良く見るなぁ。(これとか。http://postd.cc/the-state-of-svg-animation/)

どうやらGPUアクセラレーションのおまじないの新しいやつみたい。
transform: translateZ(0);
の新しい版。
事前にブラウザに何のプロパティを変化させるかを伝えておいて、それに描画を最適化させる準備をしてもらう→最初からGPU枠をあてがう(日本語おかしい?)のでカクついたりへんなバグが出ない。的な。

ただしいつもどおり、
使いすぎるな、
使い終わったら消せ、
とのこと。
美味しいビールも飲み過ぎたら身体に毒だよ程々にね、ということだね!わかりやすい!!!
スタイルシートで宣言されたwill-changeは削除できません
って書いてあるから基本JSで制御するらしい。不思議や。

対応ブラウザ

ん?っておい
一年前の記事執筆時点で対応がChrome Canary 36+、Opera Developer 23+、Firefox Nightlyだけってなんだよ。俺は今の今使える技術はねぇかって聞いたんだよー!

Can I use… Support tables for HTML5, CSS3, etc
http://caniuse.com/#feat=will-change

iOS Safari対応してないじゃねぇか…!よっしーめ!!!

スクロール中の要らないhoverホバーエフェクトをキャンセルしてあげる

スクロール中の要らないホバーエフェクトをキャンセルしてあげる
前の高速化の記事
googleのなかのひとの書いたテストページより

http://jankfree.org/examples/hover.html
[2013.12.25]
jsの内容を訳してコメントつけてみました(日本語部分)
[/2013.12.25]

var timer = null;
function toggleScrollHandler() {
    if(window.onscroll) {
        //ホバー確認するかどうかのチェックボックスにチェックが入っていなければ
        //=既にファンクションが設定されている状態でこのファンクションが呼び出されたなら
        // turn off the scroll handling
        window.onscroll = null; //ファンクションをトルツメ
        container.classList.add('hoverable'); //ホバー出来る状態に変更
    } else {
        //ホバー確認するかどうかのチェックボックスにチェックが入っていれば
        //=ファンクションが設定されていない状態でこのファンクションが呼び出されたなら
        // turn on the scroll handling
        window.onscroll = function() { //ファンクションを設定
            //ホバー出来ない状態に変更
            container.classList.remove('hoverable'); //ホバー出来ない状態に変更
            //前のタイマーをクリア(200秒以内にスクロールが発生していたらホバー出来ない状態をケイゾク)
            window.clearTimeout(timer);
            //新しいタイマーをセットし、200ms後にhoverableに変更する
            timer = window.setTimeout(function() {
                // only set the hoverable class 200ms after the last scroll
                document.getElementById('container').classList.add('hoverable');
            }, 200);
        }
    }
}

スクロール中はホバーエフェクトをかけないようにクラスで管理。
スクロール終わったかな?(200ms)くらいでエフェクトを復帰させてあげている。
メモメモ

レンダリング、描画、表示速度を上げるには FPSってどうやって調べるの?

アニメーションとスクロール芸のサイトを作成中に、FPSを表示しながら作業したくて、
そもそもFPSってなんぞ、どんくらいがいいの?から調べてたどり着いた。
処理速度の最適化のために「リクエストを減らそう」とか、「画像を圧縮しよう」とかじゃないほうの話。
そもそもレンダリングで何が「ボトルネック」になって処理がカクつくのか?というお話。

■3番目くらいに出てきた。ChromeでのFPSの表示のさせ方と、解析の仕方。とってもわかりやすい。
http://blog.cacoo.com/ja/2013/06/03/web-paint-performance/

・googleのデベロッパさんのサンプル
http://jankfree.org/examples/hover.html

■注意点とツールを箇条書きにしてくれているCSS Nite LP「表示速度最適化」のまとめ記事
http://www.tama200x.com/blog/?p=259

■cssにスポットをあてたお話。重い処理はどれか、NGの組み合わせなど、勉強になるー
http://builder.japan.zdnet.com/html-css/35032198/