フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | Tech Blog
この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量的に説明するためFPS（フレームレート）から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6
コンピューティングの基礎と高速化入門
コンピューティングの基礎と処理の高速化入門 #1 at connpass で発表したスライドです。 https://liberal-arts-for-tech.connpass.com/event/123273/
UnityのGCはどんな実装になっているのか
こんにちは。Aiming エンジニアの久保田です。 僕の携わっているプロジェクトでは、近頃、Unity製クライアントのパフォーマンスの調査や改善を行っている最中です。 プロファイラを眺めていると、僕達が書くアプリケーションレイヤのコードが目立って遅い、ということは珍しいのですが、代わりにC#世界のスパイクとしてよく顔を出すのが、GC実行時間です。 C#は、タイプセーフでありながら人間にやさしく、getter/setter、async/await、Rx、ロケットなラムダ式、他他他…最新型の言語への影響も多大な、ファッション的にも◎な言語です。しかし、闇雲に全ての機能をタダで……というわけにはいかず、ことパフォーマンス面においては、GCというなかなか高い代償を支払うことになりかねないわけですね。 結論としては、UnityのGCは、皆が期待していたほど高性能ではなく、現状では僕達が書くC#が発生
グラフィッカーがこの先生きのこるには～『スクールガールストライカーズ』のリソース設計思想～
21. ■よくある死因その５：運営に必要なリソースを用意できずに死ぬ。 スクストでは… 必要なリソース量から逆算して 作品を決めた。 そこで…。 リソース種類 数量 どういうものか メモカ 約１３０ パラメーターが紐ついた２Ｄのカード。３ＤのＳＳから作成。全てユニーク Ｒが１２０程。ＳＲが３～５、ＵＲが２ コスチューム 約１３０ 毎回ユニークな３Ｄのコスチューム。２、３カ月に一回はキャラユニーク。 アクセサリ ５～７ メモカに紐つくアクセサリが付く場合も多い。キャラごとに位置調整や個別デザインあり。 武器 ２～３ イベントメモカやＵＲメモカに紐つく３Ｄ武器 バトルシーン 約１０ メモカに紐つくバトルのアニメーション。エフェクトやモーションも込み。時々属性別など。 敵 ６ 敵の３Ｄモデル 背景 ４ 特設ページトップ、探索画面、チャンスゾーン用等の背景。アニメーションエフェクトつき。 だいたい
サイトパフォーマンスを上げるJavaScriptとCSSの使い方 - ワザノバ | wazanova
リアルタイムアナリティクスのサービスを提供しているGoSquaredがエンジニアブログで紹介しているのは、サイトパフォーマンス向上の工夫。今回は、アセットのダウンロードやパースのところでなく、遅延をおこさずにスムーズに描画するかというポイントに絞っています。 典型的なスクリーンの描画フローでは、フレームごとにブラウザがJavaScriptを評価する。もしJavaScriptによって修正されていれば、エレメントのためのスタイルやレイアウトを再計算する。次に、ページをいくつかのレイヤに描いていき、レイヤをスクリーンにあてはめるのにGPUを使う。各ステージごとに、ウェブページやアプリが行うことが違い、それぞれにコストがかかる。スムーズな60fpsを目指したければ、ブラウザは全てを16msで完了させる必要がある。 JavaScriptがレイアウトを変更（margin, padding, width
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
