ブラウザレンダリングの仕組み
Webの用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップにな
「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた
「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの佐藤歩さんです（ネット上では「あほむ」「ahomu」のIDで有名）。 （プロフィールはこちら） あほむさんのセッションは「最近のWebパフォーマンス改善について知っておきたいコト」（ホール 13:20-14:00）です。 （現在HTML5 Conference 2017は定員オー
Advanced Debugging Techniques with Chrome - @Scale 2014 - Web
Paul Irish, Developer Advocate for Google Chrome The bigger your app, the harder to trace down bugs to their sources. Luckily, a slew of functionality is in the Chrome DevTools that are dedicated to helping you avoid the bug hunt and keeping you productive. In this session, Paul will cover some advanced JavaScript debugging techniques and show how to be effective. From framework blackboxing to asy
The Pursuit of 60fps Everywhere with Nat Duca
Nat Duca is an engineer on the Chrome team working to make an always-60fps, jank free mobile web a reality. If you want to move something at 60fps today, you must apply a littany of tricks, especially translateZ and friends. If you make a mistake, off the fast path ye shall go. On the Chrome team we think this sucks. Throughout the last year, we've been digging through examples of mobile UIs buil
初心者がWebフロントエンドを高速化するための基礎知識
連載目次 ブラウザーの持つ開発ツールとその使い方を紹介する連載「無料で使えるブラウザー開発ツール入門」の第2回です。初回の「初心者がブラウザーでデバッグするための基礎知識」では、フロントエンド開発を始めた方が、ブラウザーに組み込まれている開発ツールを使ってアプリの不具合を見つけ、修正するためのツールとその基本的な利用方法を紹介しました。 前回紹介した「DOMインスペクター」「スタイルエディター」「JavaScriptデバッガー」を駆使して、不具合の原因特定と修正を行えるようになり、意図通りに動作するアプリを作成できるようになった方も多いのではないでしょうか。 ところが、フロントエンド開発者には不具合の修正と同様、一定のパフォーマンスの確保もアプリ作成で必要とされます。誰もが体験されたことがあると思いますが、「自分の思い通りに動作してはいるのだが、どうにもこうにも遅くてストレスがたまる」とい
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
こんにちは、川田です。Googleはここ最近、デスクトップ向けWebに対して、ほとんどの関心を失っているように見えます。HTML5ブームも過ぎて、やることがなくなってしまったのでしょうか？……いえいえ、そうでもありません。昨今の待ったなしで進む技術革新の中で、彼らは「ある問題」と戦っているようです。 Webは「モバイル」中心の時代へ移っていく すでにご存知の方も多いと思いますが、GoogleのビジネスモデルはWebに強く依存しています。2014年1Qの決算で、Googleは全売上の約68%が自社のWeb系サービスの広告収入であり、約22%はAdsenseなどの他のWebサイト向けの広告であると報告しました。Webに依存したビジネスが実に9割を占め、1日に約120億円の収入をWebから得ています。もっと簡単に言えば、Webだけで、タイの国民全員の給料分ぐらい稼いじゃってます。当然、Webの進
Optimising for 60fps everywhere
With the latest update to GoSquared we set ourselves the target of achieving a smooth 60 frames per second for all the core UI and animation, across all devices. There is no silver bullet in the matter of making web pages and web apps render efficiently — instead the best approach is to understand the different things that can cause a page to render slowly, and optimise them in turn, following som
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Effective web performance tuning for smartphone
Velocity 2014: GPU and Web UI Performance: Building an Endless 60fps Scroller