ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する 複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。 例えば、Twitterのようなアプリならば、ポーリングで更新するためにsetInvervalのようなタイマーを回します。 また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループをrequestAnimationFrameで回します。 このように色々なタイマー系がありますが、アプリが多機能になっていくと色々なタイマーが同時に動くようになっていきます。 特に問題がなりやすいのが表示中だけタイマーを回すコンポーネントです。 よくあるのが次のようなmount時にtimerを開始して、unmount時にtimerを停止するコンポーネ
スクリプトとスタイルシートの順番でロード時間がどう変わる？
Cuzillionは、ページ内に配置する外部・インラインのスクリプト・スタイルシート、画像、iframeの順番によって、ページのロード時間がどのようになるかをシミュレートできるサービスです。 Cuzillion ロード時間は、最初のパケットからonloadイベントまでを算出しており、HTMLドキュメントのロード時間は含まない、と記載してあります。 シミュレートできるコンポーネントは、６つとなっています。 外部スクリプト インラインスクリプト 外部スタイルシート インラインスタイルシート 画像(image) iframe Cuzillionで、「外部スクリプト」「外部スタイルシート」、「外部スタイルシート」「外部スクリプト」と入れ替えたものを試しただけでも、ロード時間が違いました。 ロード時間による順番に気をつけたことはなかったのですが、ロード時間が短縮させるのであれば、気をつけた方がいいな
GPDE Team Blog : JavaScript Memory Leak Detector
Archived MSDN and TechNet Blogs 2/7/2020 2 minutes to read MSDN and TechNet blog sites have been retired, and blog content has been migrated and archived here. Archived blogs are grouped alphabetically by the initial letter of the blog name. Blogs and blog posts can be searched by their names, using the Search box at the top of the page. Actively updated blogs have been moved to other blog sites,
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
ハタさんのブログ : Javascriptによる大規模開発の覚え書き。高速化編
前回書いた「Javascriptによる大規模開発の覚え書き」が凄いことになってました。 今回は、省略した「5.高速化せよ」について書きます。 僕にとってjavascriptは非常に高速な言語です。それは何が高速か 開発速度が高速である 開発速度、及びそこに至るまでの修得速度はとても高速です。動的言語を上手く操る開発者はもちろん、開発に不慣れな(言葉が悪いけど)新人達でさえ「動く」モノをサクっと作ってしまえる。 また、プラットフォーム(? というかブラウザ)が広く普及しているので、ググればスグに問題解決もできる。 それにローカルで簡単に作れる。javascript、それは動作環境を含めて高速です。 高速にUI操作ができる(UI操作が非常に簡単である) swingとかでUI操作をするには多くのオブジェクト操作をしなければならないけど、javascript(もといDHTML)は非常に簡単に
１つのファイルにJavaScriptとCSSをまとめて記述する方法:phpspot開発日誌
My experiments with .Net : Combine CSS with JS and make it into a single download! １つのファイルにJavaScriptとCSSをまとめて記述する方法。 まず、test.jscss というファイルを作って、次のように内容を記述します。 <!-- /* function t(){alert('test');} <!-- */ <!-- body { background-color: Aqua; } そして、次のようにJavaScriptとCSSを呼び出す際に先ほど作成したtest.jscssを指定することができます。 <html> <link type="text/css" rel="stylesheet" href="test.jscss" /> <script type="text/javascript"
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
EfficientJavaScript - Dev.Opera - 効率的な JavaScript 目次 この文書について 効率的な JavaScript ECMAScript eval や Function のコンストラクタを使うのはやめよう eval を書き換えよう 関数を使いたいなら function を使おう with を使うのはやめよう 性能を決める関数で try-catch-finally を使うのはやめよう eval と with は隔離しよう グローバル変数を使うのはやめよう 暗黙のオブジェクト変換に気をつけよう 性能を決める関数で for-in を使うのはやめよう 文字列は累積スタイルで使おう プリミティブの操作は関数呼び出しより速い setTimeout() や setInterval() には文字列でなく関数を渡そう DOM 再描画と再フロー 再フローの回数をでき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか