[B! reflow] nazomikanのブックマーク

http://ww82.cssreflow.com/

nazomikan 2013/02/17

リンク

ESウェブブラウザ通信 - インクリメンタルリフロー #1 | Shiki’s weblog

2012/09/29 #ESウェブブラウザ通信 ESウェブブラウザ(escort)が先月からCSSレンダリングエンジンをインクリメンタルリフロー(DOMツリーを部分的に操作したときなどのブラウザの応答性を良くするために必要最小限の部分だけリフローを行う手法)に対応したものに改良中ということで、ブログの方は前回から少し時間があいてしまいました。今回は実装中のインクリメンタルリフローの話題のほかに、レイアウト処理の基本的な事項も合わせて紹介していこうと思います。5月にこのブログでは、CSSのレンダリング処理は一般的に以下の4ステージで進んでいくことを紹介しました: 1. セレクターマッチング (selector matching) 2. スタイル再計算 (style recalculation) 3. リフロー (reflow) 4. リペイント (repaint) escortのスタ

nazomikan 2013/02/17

リンク

ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog

自己紹介ネイバージャパンのUIT(User Interface Techno logy)チームの裵完理(ベワニ)です。概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。ブラウザレンダリングプロセスの理解ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表

nazomikan 2013/02/17

リンク

How (not) to trigger a layout in WebKit

As most web developers are aware, a significant amount of a script's running time may be spent performing DOM operations triggered by the script rather than executing the JS byte code itself. One such potentially costly operation is layout (aka reflow) -- the process of constructing a render tree from a DOM tree. The larger and more complex the DOM, the more expensive this operation may be. An imp

nazomikan 2013/02/17

リンク

Performance

Sorry; your browser does not support svg! Sorry; your browser does not support svg! http://www.meetup.com/framsia/ < 100ms "0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result." Jakob Nielsen

nazomikan 2013/02/17

リンク

ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks

How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot