Navigation TimingとDom processing phase
Navigation Timingの仕様では、ナビゲーションや要素にアクセスするタイミングの情報を得ることができる。この Navigation Timing の情報を表示するには、ブラウザのデベロッパーツールなどのコンソールで、window.performance.timingを実行する。現在のサポートブラウザはCan I use… Support tables for HTML5, CSS3, etcの通り。 取得できる情報は下の画像のグラフのような値。最初の値である navigationStart は、ひとつ前の Document を unload する作業を開始した直後に発生する（前の Document がなければ fetchStart と同じになる）。そして、リダイレクトが必要なリダイレクトの時間、新しい Document の取得をし始めたら fetchStart、domain の
Vue.js概要？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Vue.js とは 原作者である Evan You氏 が中心となって開発中のクライアント サイドJavaScirpt(JS)フレームワークです。 MVC の派生種である、GUIライブラリに適した MVVM を設計基盤と して採用し、構築されています。 MVVM を採用していること が、構文の理解しやすさに繋がって います。 MVVM を採用したフレームワークでは、表示そのものであるView、 表示するデータ 及び データを操作する手続き をひとまとめにした View Model(VM)、が舞台上の役者です、それらを管理する コントローラ
『フロントチューニンガソン 最速を目指すには』
11:10～ 課題ページの確認＆PageSpeed Insightsの実行目的：チューニング対象のウェブサイトの改善の余地を調査 上記のgruntプラグインをインストールする npm install コマンドを実行しながら、ブラウザやIDEでチューニング対象のウェブサイトを確認し始めました。 少し見ただけでもCSSの構文エラーがあったり、使っていないJavaScriptライブラリがインポートされていたり…。 まるで無茶な運用を数ヶ月続けたかのような、カオスなファイル群でした。 ここで実行した PageSpeed Insights に画像サイズの最適化をオススメされたので、まずはそこから行うことにしました。 11:20～ 画像ファイルの最適化目的：画像ファイルサイズの削減 30 x 30pxで表示している画像ファイルが実際には150 x 150pxで保存されていたりする画像がそこそこあったの
『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
シングルページアプリの初速を上げる取組み - ワザノバ | wazanova
https://www.youtube.com/watch?v=VkTCL6Nqm6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 OSCON 2014におけるInstagramのWebチーム責任者であるPete Huntの講演。PeteはInstagramに異動する前は、FacebookのPhoto/Video/Product Infraチームに在籍。 今回は、InstagramのwebサイトInstagram.comにおいて、シングルページアプリの課題である最初の読込みスピードを上げるために、どのような工夫をしたかについて紹介してくれてます。 Instagram.comのJavaScriptファイルは、縮小化後で9.5MB & gzip圧縮後で2.5MB。そのサイズだと、一つのファイルにまとめ
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
hogan.jsでmustacheをコンパイルする - memo.yomukaku.net
hogan.jsをTwitter社がオープンソースで公開されました。 hogan.jsは最近かなり使われてきているテンプレート言語mustacheのコンパイラーで、名前の由来はホーガンさんのようです。 hogan.jsは、mustache.jsとは異なり、mustacheの記法で書いたテンプレートをコンパイルすることができます。従って、レンダリングのたびにmustache記法のテンプレートをパースする必要があるmustache.jsよりも高速なレンダリングが可能です。 以下にhogan.jsのインストールと使い方をまとめます。hogan.jsのインストール npmによるインストール node.jsのnpmを使える場合は、 npm install hogan でインストールできます。 但し、hogan.jsが公開されたばかりの目下の時点では、npmの公式リポジトリの中にまだ登録されていないよ
How the Browser Pre-loader Makes Pages Load Faster
The pre-loader (also known as the speculative or look-ahead pre-parser) may be the single biggest improvement ever made to browser performance. During their implementation Mozilla reported a 19% improvement in load times, and in a test against the Alexa top 2,000 sites Google found around a 20% improvement. It’s not a new browser feature but some seem to believe it’s Chrome only and yet others sug
プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス | ゆっくりと…
本ブログでは、サイトの高速化に直結する「JavaScript 非同期読み込み」の話題を多数取り上げてきました。タイトルに釣られてこの記事を見てくれている方なら Google Analytics の非同期コードスニペット はご存知でしょうし、規模の大きいサイトやアプリ用に RequireJS などのフレームワークを使っている方もいるでしょう。 GA も RequireJS も、動的に生成したスクリプト要素を DOM に埋め込む「DOM 挿入法」が用いられています。さらに遡れば、Steve Souders が 2009年4月の記事 ノン・ブロッキングなスクリプト読み込み で、6つの手法に分類しています。 果たしてこれらの方法は、サイトの高速化にとってベストなのでしょうか？ 答えは2012年12月の海外記事にありました。そこで本エントリーでは、日本ではほとんど取り上げられていない Frame i
How can I detect which javascript engine (v8 or JSC) is used at runtime in Android?
Newer versions of Android ( > 2.2) include the v8 javascript engine, while older versions only had JSC. However, according to http://blogs.nitobi.com/joe/2011/01/14/android-your-js-engine-is-not-always-v8/, which javascript engine is used at runtime seems to depend on an environment variable present at build-time (JS_ENGINE), as well as the hardware specs of the device: # The default / alternative
JavaScriptCore – WebKit
JavaScriptCore JavaScriptCore is the built-in JavaScript engine for WebKit. It currently implements ECMAScript as in ECMA-262 specification. JavaScriptCore is often referred with different names, such as SquirrelFish and SquirrelFish Extreme. Within the context of Safari, Nitro and Nitro Extreme (the marketing terms from Apple) are also commonly used. However, the name of the project and the l
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
Measuring the Critical Rendering Path | Articles | web.dev
Published: March 31, 2014 The foundation of every solid performance strategy is good measurement and instrumentation. You can't optimize what you can't measure. This guide explains different approaches for measuring CRP performance. The Lighthouse approach runs a series of automated tests against a page, and then generates a report on the page's CRP performance. This approach provides a quick and
DOMContentLoadedとスタイルシートの読込み - ぶれすとつーる
DOMContentLoadedの発火とスタイルシートの読み込みは間接的に関係あるらしい MDNのDOMContentLoadedのページみてたら The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page). Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="styleshe
Google Chromeの開発者が語るこれからのWebに必要なこと、ちょっとした懸念点とか - ふろしき Blog
ｰｰｰｰ HTML5はネタが出尽くした。あとは、IE8やAndroid2.X標準ブラウザのような、レガシーブラウザがいなくなればいいだけではないか？ 私は最近、そんな言葉を耳にすることがあるのです。しかし、ブラウザ開発者たちは未だに、そんなことを微塵も感じさせないほど働いています。まだまだ進化の速度を、落とすわけにはいかないようです。2014年06月14日に開催された「HTML5 Night」にて、Google Chromeの開発者である及川卓也氏の口から、これからのChrome開発について語られました。 本記事では、及川氏の講演のダイジェストをお届けします。 今のChromeには何が不足しているのか？ Chromeは2013年の4月に大事な出来事がありました。Appleと一緒に開発していた、「WebKit」をフォークしました。それが、Chroniumと同様なオープンソースのレンダリングエ
サイト速度とonload再考 | ゆっくりと…
単にウケ狙いなら「革新的！GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」（笑）とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化
モバイル対応Webアプリケーションのキャッシュ戦略
近年、モバイルブラウザ上でアプリケーションを作るにあたり、JavaScriptでも不安定な回線上で動作する設計が求められるようになってきました。 ここでは、「オフラインファースト」をはじめとする、モバイルなどの回線が不安定な状況を想定したWebアプリケーション設計に関して、キャッシュ方法やよく使われるAPIなどを紹介したいと思います。 「オフラインファースト」とは2012年ごろから提唱されていた、「回線がオフラインになることを前提にアプリケーションの設計を行う思想」のことで、オフライン前提に設計することにより回線状況によらないサービス提供や、効率的な通信をベースにした高速な動作を目指すものです。 それではここからはキャッシュ方法とそれぞれ向いているコンテンツの紹介を行います。 読み込みデータのキャッシュ ApplicationCacheやlocalStorage、オンメモリキャッシュなどを
Javascriptにおけるクラシカルな継承 | 離島に住みたいFEブログ
Javascriptの継承の勉強。本は「Javascriptパターン」。 なにがクラシカルというと、Javascriptにはクラスという概念がない。 ただし、Javascriptにはコンストラクタ関数やnew演算子があるのでクラスに似たような仕組みを作ることが可能です。 この”クラスに似たような仕組み”を「クラシカル」とし、クラスについて考慮する必要がない継承を「モダン」としています。 モダンについてはまた後日。。 「Javascriptパターン」によると、 クラシカルな継承パターンは色々とあるようですが、まとめると３パターンになります。 ※ここではクラスに似た方法を記述するため敢えて「クラス」という言葉を使用しています。 デフォルトパターン function Parent(name){ this.name = name || "Adam"; } Parent.prototype.say
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Re-think about Web Performance
Blog - LINE ENGINEERING