Two Quick Ways To Reduce React App’s Size In Production
If you are building a React + Redux App that has Webpack, then you might have noticed that the size of the final bundle.js (the dev version) for a simple app itself could be 1MB- 2MB! For example: Below is a picture from Webpack stats analyzer for the simple react-redux-blog (live). It shows that total size is 1.5MB and 90% (1.2MB) is just libraries in node_modules! It could be scary😱 but Webpack
AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita
以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが横スクロールですべて見れるようになった サイドバーにチャンネル一覧ができた 日付切り替えがセレクトボックスからカレンダー表示になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようになりました。 さらにチャンネル毎の番組表にもアクセスしやすくなり、日付の切り替えもしやすくなったかと思います。 このリリースによって、ユーザービリティが少しでも向上していれば幸いです。 しかし、便利になった反面、このリリースに至るまでに、パフォーマンス面で様々なところで問題になりました。 今回は実際にリニューアル中に課題となった箇所と解決方法の一部を紹介します。 AbemaTV 以外であまり参考にならないかもし
Redis を使って応答時間を半分にした話 | FiNC Developers Blog
Redis を使って応答時間を半分にした話 はじめにはじめまして。 5月にFiNCに入社し、サーバーサイドの Rails エンジニアをやっている亀田と申します。 今回は、Redis を使ってチャットのパフォーマンスを改善した話について書きたいと思います。 チャットで起きていたパフォーマンス問題FiNCアプリにはチャット機能があります。ユーザー同士のコミュニケーションにも使えますし、お得情報の配信やユーザーのサポートなどでも利用しています。 その中で、ユーザーサポートの社内オペレーション用ツールに、（業務に支障が出るレベルではないものの）表示が重いという問題が発生していました。具体的には、対象となるルームのレコードを取得するために数百ミリ秒かかっており、レスポンスを返すまでに合計で1秒前後かかっているという状況でした。 分析をしてみたところ、インデックスを使って対象となるレコードを取得した後
サイトを37倍に高速化した7つの手法 - オールアバウトTech Blog
今回はオールアバウトのnnmrが弊社サイトAll About Japanの速度を高速化した経緯についてまとめます。 All About Japanとは そもそもAll About Japan（以下AAJ）とは何かといいますと、弊社が提供している訪日外国人向けの日本紹介サイトです。 外国人向けサイトで、英語、中国語（繁体字）、中国語（簡体字）、タイ語、韓国語の5か国語に対応しております。 「Anime」「Izakaya」「Ninja」といったような特集や、実際に観光する人向けのモデルルート記事が特色です。 ■ 特集 (url : http://allabout-japan.com/en/tag/sushi/ ) ■ モデルルート記事 (url : http://allabout-japan.com/en/article/222/ ) 技術的な紹介 LAMP環境です。 （サーバー構成は後に記述
Go1.7からSSAが導入された - flyhigh
初めに Go 1.7がリリースされる。目玉の一つは、SSA-IRが導入されたことだろう。Go1.7でSSAが入るんだけど、SSAって何？と居酒屋で聞かれたことが本稿の発端だった。私の知識だけでは包括的な説明にならなかったので、いろいろ調べつつそれをまとめた。 以下、一般的な話ではなく、なるべくGoに絞って話を進めている（コンパイラのコードはは cmd/compile/internal/gc あたりにある）。より一般的な話は、参考文献等を示したのでそちらを参考にしてほしい。いろいろ調べて、Goに追加されたSSAについて知るべきことは、SSAが何か？よりも、SSA導入したGoがどうなったか、であると思った。 SSAとは何か SSA とは Static Single Assignmentの略だ。一つの変数への代入は一度しか行われてない事が確約できる形式のコードだ。この形式のコードは、最適化が行い
Big Sky :: SSE を使わなくても HTML エスケープはある程度速くできる。
SSEを使ってHTMLエスケープを高速化してみた - k0kubun's blog 高速なHTMLエスケープをするライブラリを作った ある日HTMLエスケープを速くしたくなって、hescapeというライブラリを作った。 github.com とにかく速いHTMLエスケープがしたい R... http://k0kubun.hatenablog.com/entry/hescape 以前、moznion 氏の petit-html-escaper を勝手に高速化した時の話。 GitHub - moznion/petit-html-escaper: A simple and small escaper for HTML with SSE4.2 function Author moznion ( moznion@gmail.com ) mattn License The MIT License (M
performance.markでパフォーマンス計測する
JavaScriptである区間にかかった時間を計測する時に、次のようなコードを書いたことがあると思います。 const start = performance.now(); // 処理 // 色々な処理がすべて終わった doSome(() => { console.log(performance.now() - start); }) Performance Timelineのperformance.markとperformance.measureなどを使うと、ある区間の処理時間をもっと簡単に取ることができます。 APIについて詳しくは以下の記事を見るといいと思います。 User Timing API: あなたの Web アプリをもっと理解するために - HTML5 Rocks Performance.mark() - Web API インターフェイス | MDN 簡単に解説すると perf
Nginxのパフォーマンスを極限にするための考察 - Qiita
ピクセルトラッキングを想定した設定で、Nginx on EC2(c3.large) という環境で、極限まで設定をして、どれぐらいさばけるのか運用中、パフォーマンステストしてる時は、別のところに問題があり、Nginx自体の性能限界までテストできなかったので、実際どこまでいけるのかは計測できてない。 秒間1万とか2万は行けてたと思う、ちなみに実際の運用では秒間9000以上とかを記録していて、サーバ自体にはかなり余裕があるので、記録はまだまだ伸びると思う。 ちなみに empty_gif は応答が短すぎて、Nginx の $request_time では記録できない... 全部 "0.000" だから、どれぐらい掛かってるのか分からん...。 nginx.confの設定 user nginx; worker_processes auto; error_log /var/log/nginx/erro
YARV命令ごとの実行コストを知るには - なるせにっき
プログラムのボトルネックを探すには大きく分けて二つの方法があります。心眼を研ぎ澄ましていきなり最適化してみてから考えるのと、何かしらのツールでサイクル数やCPU時間を計測して地道に探す方法ですね。皆さん普通は前者だと思うんですが、それが行き詰まってしまうこともあります。 後者のようにprofileを取っていく場合、手軽にCレベルでのprofileがとれて今わたしの中で一大ブームを巻き起こしているのがperf(3)なわけですが、Rubyのprofileを取ると往々にして以下のような結果になるわけです。（よい子のみんなはCレベルでのprofileではなく、stackprofを使ってRubyレベルでのprofileをとろうな！） sudo perf report --stdio --no-children -g none -d miniruby # To display the perf.dat
GolangでFlame Graphを描く
アプリケーションのパフォーマンス問題の解決やチューニングで大切なのは問題のコアやボトルネックに最短パスで到達することである． 基本的なパフォーマンス分析の入り口はアプリケーションのスレッドがon-CPUで時間を消費しているかoff-CPUで時間を消費しているかを理解するところから始まる．on-CPUの場合はそれがuserモードかkernelモードかを特定し，さらにCPUプロファイリングによってどのcode pathがCPUを消費しているのかの分析に向かう．off-CPUの場合はI/OやLock，pagingといった問題の分析に向かう． Flame Graphはon-CPUでのパフォーマンスの問題が発覚した時に行うCPUプロファイリングを助ける．どのcode pathがボトルネックになっているのかを1つのグラフ上で理解できる．本記事ではFlame Graphとは何か? なぜ必要なのか? を解
するするさせたよ：サイボウズ採用情報のアニメーション - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、大阪開発部のブノアです。 この間、サイボウズの採用情報ページのアニメーションについてグーグルデベロッパーエキスパートの矢倉さんにツッコミを頂きました！今回はそのアニメーションをするするさせたよという話をしたいと思います。 経緯 ４月頃、レンダリングパフォーマンス勉強会を社内で開催しました。東京開発部の鉄平がその話をツイッターで呟いたら矢倉さんにツッコミを頂きました。 社内でレンダリングパフォーマンス勉強会を開催中。will-changeの効果絶大なデモで会場がどよめいた。— teppeis (@teppeis) April 15, 2016 https://t.co/t2Irugs85V 「生まれたアプリは15万件」の動くアイコンのところが別レイヤーになってするする動くようになる日も近いということか https://t.co/ki5VSvbumY— Masataka Yakur
AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net
2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta
Web Application Server を動かす時の Java8 起動オプションのメモ - その手の平は尻もつかめるさ
一般的な Web Application Server *1 を Java8 で動かすにあたって，最近有効にしている起動オプションについてメモ． 何か間違っていたり，あるいは「こっちの方が良い」みたいなのがあれば教えて下さい． -server server mode で起動させる (指定しないと client mode になる可能性がある，マシンスペックによってスイッチする？)． -Djava.net.preferIPv4Stack=true If IPv6 is available on the operating system the underlying native socket will be an IPv6 socket. This allows Java(tm) applications to connect too, and accept connections from,
Amazon AWSでユーザ数1100万以上にスケーリングするためのビギナーズ・ガイド | POSTD
あるシステムを、1人のユーザから1100万人以上にスケーリングするにはどのようにすれば良いのでしょうか。Amazonのウェブサービスソリューションアーキテクトである Joel Williams が AWS re: Invent 2015 Scaling Up to Your First 10 Million Users でスケーリング方法について素晴らしいプレゼンをしています。 AWS上級者のユーザには適さないプレゼンですが、AWS初心者やクラウド初心者、Amazonが次々と送り出す新機能の流れについていけていない人が始めるには素晴らしい内容だと思います。 おおよその見当は付いていると思いますが、このプレゼンはAmazonによって提供されているため、どの問題についても解決策として提案されているものは全てAmazonのサービスになります。amazonのプラットフォームの役割は、印象深く、分か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なんかトレースするはなし
計算量と僕とWeb開発 / computational complexity and I and Web
実行時におけるJVMバイトコード最適化手法
Smartparents is getting super-slow · Issue #571 · Fuco1/smartparens