ブラウザレンダリングの仕組み
フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
When does React re-render components? | Felix Gerschau
performancereactWhen does React re-render components?React re-rendering explained and how to optimize React's re-render performance React is known for providing a fast user experience by only updating the parts of the UI that have changed. When looking into React's render performance, there are a few terms and concepts that can be hard to understand. It wasn't 100% clear to me what a VDOM was or h
Inside look at modern web browser (part 1) | Blog | Chrome for Developers
CPU, GPU, Memory, and multi-process architecture In this 4-part blog series, we'll look inside the Chrome browser from high-level architecture to the specifics of the rendering pipeline. If you ever wondered how the browser turns your code into a functional website, or you are unsure why a specific technique is suggested for performance improvements, this series is for you. As part 1 of this serie
「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた
「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの佐藤歩さんです（ネット上では「あほむ」「ahomu」のIDで有名）。 （プロフィールはこちら） あほむさんのセッションは「最近のWebパフォーマンス改善について知っておきたいコト」（ホール 13:20-14:00）です。 （現在HTML5 Conference 2017は定員オー
Tackling Render Blocking CSS for a Fast Rendering Website — SitePoint
May 4, 2017Tackling Render Blocking CSS for a Fast Rendering Website This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible. I’ve always thought deciding how and when to load CSS files is something best left to browsers. They handle this sort of thing by design. Why should developers do anything more than slap a li
Optimising the front end for the browser | HackerNoon
Too Long; Didn't ReadIf you looked up optimisation (or optimization for our American readers) in the dictionary it would say something along the lines of <em>Making the most of what we’ve got</em>. If you looked up optimisation (or optimization for our American readers) in the dictionary it would say something along the lines of Making the most of what we’ve got. A worthy endeavour and challenge a
Understanding the Critical Rendering Path | bitsofcode
When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the "Critical Rendering Path". Knowledge of the CRP is incredibly useful for understanding how a site's performance can be improved. There are 6 stages to the CRP
GitHub - alex/what-happens-when: An attempt to answer the age old interview question "What happens when you type google.com into your browser and press enter?"
To pick a zero point, let's choose the Enter key on the keyboard hitting the bottom of its range. At this point, an electrical circuit specific to the enter key is closed (either directly or capacitively). This allows a small amount of current to flow into the logic circuitry of the keyboard, which scans the state of each key switch, debounces the electrical noise of the rapid intermittent closure
In the dev tools timeline, what are the empty green rectangles?
Painting is really two tasks: draw calls and rasterization. Draw calls. This is a list of things you'd like to draw, and its derived from the CSS applied to your elements. Ultimately there is a list of draw calls not dissimilar to the Canvas element's: moveTo, lineTo, fillRect (though they have slightly different names in Skia, Chrome's painting backend, it's a similar concept.) Rasterization. The
How browsers work
Introduction Web browsers are probably the most widely used software. In this book I will explain how they work behind the scenes. We will see what happens when you type 'google.com' in the address bar until you see the Google page on the browser screen. The browsers we will talk about There are five major browsers used today - Internet Explorer, Firefox, Safari, Chrome and Opera. I will give exam
Improve Browser Performance With the CSS Stress Test Tool — SitePoint
April 27, 2011Improve Browser Performance With the CSS Stress Test Tool CSS3 backgrounds, rounded corners, box shadows, text shadows, opacity and transformations save web developers hours of time. Basic effects can be achieved without resorting to image slicing, additional elements or scripting. Despite this, not all is rosy in the CSS3 world. When I first dabbled with the techniques a couple of y
Optimizing the Critical Rendering Path — SitePoint
October 16, 2014Optimizing the Critical Rendering Path Web pages are getting bigger and bigger in terms of consumed bandwidth and loaded assets (CSS, JS, images, fonts). The share of users who surf the web with mobile phones and tablets is increasing. Sure, at home you have your desktop computer with a really fast internet connection. Yet, a lot of people out there probably don’t visit your site w
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
Antialiasing 101 | Articles | web.dev
Antialiasing 101 Stay organized with collections Save and categorize content based on your preferences. Introduction Antialiasing is something of an unsung hero in web graphics; it’s the reason we have clear text and smooth vector shapes on our screens. There are actually a couple of approaches to antialiasing used in browsers today which are most obvious when it comes to text rendering. When the
How to create high-performance CSS animations | Articles | web.dev
Move an element To move an element, use the translate or rotation keyword values of the transform property. For example, to slide an item into view, use translate. .animate { animation: slide-in 0.7s both; } @keyframes slide-in { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } } Use rotate to rotate elements. The following example rotates an element 360 degrees. .animate
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レンダリングを意識したパフォーマンスチューニング
Effective web performance tuning for smartphone
CSS and the Critical Path - CSSConfEU September 2014