名古屋マークアップ勉強会 The Final https://758markup.doorkeeper.jp/events/57811 で使用したスライドです。本編20分。
名古屋マークアップ勉強会 The Final https://758markup.doorkeeper.jp/events/57811 で使用したスライドです。本編20分。
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
I am new to Angular (even though I am not new to the web development), so please take everything that I am about to say with a grain of salt. That being said, I watched a lot of talks and read a lot of articles relevant to Angular performance, and this post is the summary of my findings. Table of Contents 1. Minimize/Avoid Watchers 2. Avoid ng-repeat. If you have to use ng-repeat use infinite scro
はじめに 年末に書いたエントリーについて、あちこちで言及がありました*1。 師走の忙しさにかまけて勢いで書いてしまったところも多いので、少し補足をしたいと思います。 Virtual DOMってどんだけ早いの？測ってみた - webとかmacとかやってみようか R まず、最初に断っておきますが、これは Virtual DOM のパフォーマンスを厳密に測定したものではありません。元ネタはこちらです。Blazing-Fast-Html（翻訳: 【翻訳】爆速HTML – Elmでの仮想DOM） AltJS の一つである elm という Haskellっぽく FRP を実現できる関数型言語があります。それを作っている Evan Czaplicki 氏のBlog記事です。彼が作った TodoMVC のパフォーマンス比較が github に公開されているので、それを各ライブラリを最新版にして紹介したのが
この記事は VirtualDOM Advent Calendar 2014 - Qiita の2日目です。 mizchi くんから誘われて軽い気持ちで参加したら、初日からえらくエモいエントリー(VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita) でブルってます。 Virutal DOMとは、と言う話はしません。初日を見てください。いろいろ良いことあるみたいだけど、Virtual DOMってどんだけ早いの？知りたいですよね。 Elmの中の人が作ったTodoMVCのパフォーマンステストがあります。 いつものTodoMVCのデモで、100要素追加して、全て完了して、削除するというテストです。 「Run All」ボタンをクリックすると動きます。 http://evancz.github.io/todomvc-perf-comparison/ Virtua
ひさびさにWebフロントエンドパフォーマンス系の話題をつらつらと書いてみます。例によってモバイル系開発者寄りの視点かもしれません。文中の参照リンク多め。 ファクタ まずはパフォーマンスに影響を与えるファクタについての所感。Webパフォーマンスにおけるイニシャライズとランタイム ::ハブろぐ で示した分類に基づきます。 イニシャライズ（いわゆるページロード） 4GやLTEが普及してもコンテンツの肥大化には追いついていない concat と CSS Sprites の呪いが解けない HTTP/2 の Streams and Multiplexing に期待 HTTP/2 の Server Push にも期待 画像周りだと <picture> 関連仕様も使いたい（srcsetだけならいける？） WebRTC とか WebSocket とかストリーミングとかは？ （やや疎い、てかイニシャライズじゃ
Navigation Timing とか Resource Timing とか、パフォーマンスまわりのAPIについて自分で整理できていなかったので、これを機会にまとめてみました。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これまでAngularJSでアプリを作ってきた中で、いくつかパフォーマンスの問題に遭遇しました。 それらの問題は、AngularJSの仕組みを十分に理解できていないために、よくないコードを書いてしまって発生しているものでした。 というわけで、AngularJSの内部構造を解説しつつ、パフォーマンスを改善するコードの書き方を紹介したいと思います。 計測できないものは改善できない パフォーマンス問題に取り組むには、ソースコード修正の前後でパフォーマンスを計測し、改善の効果を計測することが重要になります。 というわけでまずはツールの紹介です。
外部キー便利!!! MackerelではPostgreSQLで外部キーあり そのレコードがあることが保証される 各テーブルのidにアプリケーションレベル(Mackerelの場合Scala)で型付けをするとなお便利 MemberID型、MonitorID型 → idで誤ったテーブルを引くとかがない 本日のスキーマ CREATE TABLE `member` ( `id` INTEGER unsigned NOT NULL auto_increment, `earned_item_count` INTEGER unsigned NOT NULL DEFAULT 0, `name` VARCHAR(191) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET utf8mb4; CREATE TABLE `item`
少し前に書いた失われたウェブ制作のベスト・プラクティスという記事の公開後、やはりある程度まとまった形の文書が必要なのではないかという気分になった。そこでHTMLはどのようなことに気を付けて書くと安定したものになるのかという視点で、悪い例と良い例を併記したHTML Best Practicesという文書を作成した。 それぞれにそれぞれの理由はあるが、その解説は簡単ではない。歴史的な背景を始めとした様々な点からの落とし所であり、それら前提となる物事について書くとなると膨大な量になりうる。そのためコード例で悪いものと良いものを併記するだけに留めておいた。 こうなっていると、「なぜ」がわからないという面もあるが、「これをこう書けるのか」というような面もある。啓蒙的な意味合いが強い文書にも関わらずカジュアルに読めるため、悪くはないのではないかと思う。 現時点でほとんどの要素の書き方についてはひと通り
9. 静的コンテンツを Reverse Proxy で配信 Reverse Proxy: クライアントからの接続を 受け、Applicationサーバに処理を中継す る。画像,js,css などの静的コンテンツを返す 役割もある Application Server: ユーザからのリクエス トを受けて適切なページを構築・レスポン スを行う 10. /etc/httpd/conf.d/isucon.conf <VirtualHost *:80> DocumentRoot /home/isu-user/isucon/webapp/public RewriteEngine on RewriteCond REQUEST_URI !^/favicon.ico$ RewriteCond REQUEST_URI !^/(img|css|js)/ RewriteRule /(.*)$ http://loc
Webサイトやモバイルアプリなどのパフォーマンスチューニングについて、豪華エキスパート執筆陣が幅広く解説していきます。
JavaScript performance comparison Revision 5 of this test case created on 29th August 2012 Preparation code <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"> </script> Preparation code output Test runner Warning! For accurate results, please disable Firebug before running the tests.
jsPerf — JavaScript performance playground What is jsPerf? jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. For more information, see the FAQ. Create a test case Login with GitHub to Create Test Cases
以下のスライドを意訳したものです。Compress周りについては触れていません。「いやいや、最新の書き方だともっと良い書き方があるんだよ！」という方のコメントをお待ちしております！ http://www.slideshare.net/paul.irish/perfcompression クエリをキャッシュする // 悪い例 var id = $("#content").data("id"); var itemId = $("#content").data("item-id"); // 良い例 var content = $("#content") var id = content.data("id"); var itemId = content.data("item-id"); // 悪い例 $.each(reallyLongArray, function(count, item) { v
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
