Webpack チャンク最適 テクニック - Qiita
ターゲット 巨大なSPAを作ってしまった人へ 巨大なSPAを作らないように気をつけたい人へ 今回はJSだけにフォーカスするが、もっというと、 超速本 を読んでください。 注意：本資料は、webpack チャンクの挙動を概念的に説明することを重視しているので、 webpack の詳細な設定や、出力ファイル名などは実際の処理と一致しない。適宜自分の手元にある設定とすり合わせるように。 昨今のJSビルド問題と、その解決のためのゴール設定 巨大なJS(+最近は in JS された各種SVGやCSS)はダウンロードだけではなく、UIスレッドのCPUをブロックする。 これはとくにCPUが貧弱な端末で体験が悪化する。そしてビルド時間で開発者体験を阻害する。 できれば webpack 推奨の 144kb 以内にしたい…が現実的に難しいので、 せめて 350kb ぐらいに抑えたい。 SPAなら (ローディン
モバイルウェブのスピードアップに不可欠なのは 画像・JS・フォント の最適化 #ChromeDevSummit
[レベル: 中級] 昨日とおとといに続いて、今日も Chrome Dev Summit 2018 のセッションレポートをお届けします。 セッションのタイトルは “Speed Essentials: Key Techniques for Fast Websites” です。 昨日レポートしたセッションと同じようにモバイルウェブの高速化がテーマです。 しかし、こちらはより実践的な内容になっています。 パフォーマンス改善に非常に役立つテクニックが満載です。 パフォーマンス改善の優先対象は画像とJS、フォントの3つ モバイルウェブで 1 ページあたりデータ量が多いリソースは次の順番（HTTP Archive 調べ） 画像 (約 500 KB) JavaScript (約 380 KB) フォント (約 80 KB) この 3 つは Performance Budget（パフォーマンス バジェット）
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
Etsy: サイトパフォーマンスの定期報告 - ワザノバ | wazanova.jp
http://codeascraft.com/2013/10/14/september-2013-site-performance-report/ Etsyが四半期に一度のサイトパフォーマンスのレポートを発表してます。 1) サーバサイドパフォーマンス [グラフ] 9/18時点での主要各ページにおけるログインユーザのロード時間の中央値と、下位5%に位置する（もし全員で100人の場合は95人目）ユーザの値です。 データに大きな変化はなし。中央値が、62ms〜334msと、そこそこ良い水準にあるので、数値が悪化させないことだけに注力し、若干のコード変更をしたのみ。 2) シミュレーション基準のフロントエンドパフォーマンス [グラフ] WebPageTestのプライベートインスタンスを利用して計測。DSLコネクションで、IE8 / IE9 / Firefox / Chromeが対象。24時間計測
13 JavaScript Performance Tips
Daniel Clifford recently gave a great talk at Google I/O 2012 called “Breaking the JavaScript Speed Limit with V8”. In it he goes in depth to explain 13 simple optimizations you can do in your JavaScript code to help Chrome’s V8 JavaScript engine compile / run your JavaScript code faster. In the talk he gives a lot of great explanations as to what they are and why they help, but if you just want t
Node.js vs Play vs SAStruts - hakobera's blog
前置き Experiences with Node.js: Porting a RESTful Service Written in Java - ZiggyTech 上記記事では、実験的にJava (Jersey + Hibernate on Tomcat) で実装された REST API サーバを Node.js で書きなおしてみたら、少ないリソース（CPU/メモリ使用量）でほぼ同等のパフォーマンスが出せたよ（ただし、O/Rマッパーを使用しない場合）、と書いてあります。この件に関して @koichik さんとやり取りしていた中で以下のような意見を頂いたので、実際にやってみましたという記事です。 @hakobera メジャーってことだと，あの比較が Play ではなく Tomcat なのは正解．日本的には Jersey ではなく Struts (もちろん 1 の方)なら更によかったw 2
jQuery Proven Performance Tips & Tricks
Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bear in mind. In this talk, we're going to take a look at some of the best practices, tips and tricks for improving the performance of your jQuery code in 2011 with some quick wins and a few new surprises along the way.Read less
John Resig - JavaScript Trie Performance Analysis
After my last post discussing dictionary lookups in JavaScript the unanimous consensus seemed to be that utilizing Trie would result in additional space savings and yield performance benefits. A Trie is a relatively simple data structure. At its simplest form you’re building a tree-like structure where each final leaf results in a complete word. This allows for some very efficient use of file size
Web performance optimization (WPO)
Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to the
Mathクラスでよくやる高速化備忘録 « nulldesign
最近高速化に興味津々です。そんな中、Mathクラス遅いよね、遅くね?。ってことで、高速エンジン書くときによく使う最適化の一部（Mathクラス中心）を備忘録的に。ちょこっとだけ検証もしました。 内容的には既に既出のものばかりですが、備忘録ということで。 検証方法ですが、単純な式を1,000,000回繰り返し、そのタイムを10回計測。 平均値をもとにパフェーマンスを時間ベースで評価しています。 Math.max var k:Number = Math.max( a, b ); var k:Number = ( a > b )? a : b; // 46.4ms -> 3.5ms Math.min var k:Number = Math.min( a, b ); var k:Number = ( a 3.5ms Math.round var k:Number = Math.round( a
JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験：JavaScriptの実践的な知識 クライ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Discord Blog
Webpackのビルド時間を1/3にした話 #gotandajs
Google Code Archive - Long-term storage for Google Code Project Hosting.