タグ レンダリング
人気順 5 users 10 users 100 users 500 users 1000 users【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025年始】
2025/01/12
244 users
Single-page Application
議論
用語
はじめに フロントエンド開発 においてレンダリングという言葉はさまざまな場面で登場します。さらに、Server-Side Rendering(SSR)のように「レンダリング」という言葉が名前に含まれているものを含め、Single-Page Application(SPA)など、レンダリングに関連した議論でよく使われる用語も数多く存在します。 そして、こ... 続きを読む
レンダリングを探訪する
2024/10/23
57 users
パク
LT資料
さくらじまハウス
パフォーマンス
課題
※ 当記事は、さくらじまハウス 2024 のLT「レンダリングを探訪する」 の書き起こしとして作成しました。 LT資料: はじめに この記事では、ブラウザのレンダリングについて掘り下げていきます。Web アプリケーション開発において、パフォーマンスの最適化や複雑なバグの解決は日常的な課題です。ブラウザのレンダリングフ... 続きを読む
Reactのレンダリングとメモ化についてようやく理解したので書く - Qiita
2024/10/10
115 users
Qiita
React
Props
ユーティリティ関数
メモ化
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? レンダリングとメモ化についてようやく理解したので書く なぜこの記事を書こうと思ったのか Reactを学び始めてから、props の渡し方、配列処理のメソッド、ユーティリティ関数の使... 続きを読む
自分の認識をだらだら書くとこうなる。 結局のところ2003年から2011年頃まで..
2024/06/25
290 users
認識
2011年頃
NVIDIA
自分
PlayStation
自分の認識をだらだら書くとこうなる。 結局のところ2003年から2011年頃までいちばん延べ計算量が必要だったのはリアルタイムの3Dグラフィックスのレンダリングだったんだ。そこではNVIDIAって会社がPCゲームのプラットフォームを握ってしまっていてそこで技術開発をめっちゃ進めてしまったんだ。 結果的にPlayStation2... 続きを読む
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート
2024/03/31
157 users
MikuMikuDance
MMD
Babylon.js
Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Proサポート Webブラウザで3Dモデルを高速に描画する「Babylon.js 7.0」正式リリース。MMD（MikuMikuDance）やApple Vision Pro、WebXRなどをサポートし、よりリアルなレンダリングを実現する機能追加も行わ... 続きを読む
useEffect: 基礎から使用すべきでない例まで
2024/01/04
215 users
useEffect
effect
React
コンポーネント
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む
Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも
2023/04/25
214 users
マイクロソフト
Babylon.js
液体
wasm化
ソース
マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The web just got a WHOLE lot more exciting!... 続きを読む
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
2023/01/11
121 users
国別分布
React
Jest
インド
イギリス
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言... 続きを読む
「すずめの戸締まり」制作でもAWSが活躍 レンダリングで活用 エンドロールにも……
2022/11/28
141 users
戸締り
戸締まり
クラウドサービス
くら
ススメ
11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラウドサービス「Amazon Web Services」を活用したという。エンドロールにもロゴが……。 11月11日に公開となった新海誠監督の映画最新作「すずめの戸締り」。制作に当たってはレンダリングなどの用途にクラ... 続きを読む
Webブラウザのレンダリングの仕組みを理解する
2022/07/04
206 users
JavaS
点線
HTMLレンダリングエンジン
リソース
概要
参考：https://ja.wikipedia.org/wiki/HTMLレンダリングエンジン 2 レンダリングの仕組み レンダリングの大きな流れは下記のようになります。Webブラウザは、サーバーなどからHTML等のリソースを受け取り①〜⑥の処理を経て、レンダリングを実行します。それでは各処理の概要を見ていきます。 ※点線は、HTML内にCSSやJavaS... 続きを読む
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
2021/10/01
218 users
CSS
head
head内
要因
箇所
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題... 続きを読む
ブラウザレンダリングの仕組み
2021/05/05
1073 users
ブラウザレンダリング
サーバ
HTML
解析
ブラウザ
以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバか... 続きを読む
リソースの読み込みを助けるウェブブラウザ API の世界
2021/05/06
250 users
ウェブブラウザ
ウェブページ
リソース
API
一連
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やそ... 続きを読む
これは使わないと！レンダリングのパフォーマンスが向上する、CSSの新しいプロパティ「content-visibility」 | コリス
2021/02/04
265 users
Opera
Firefox
Chrome
コリス
去年
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Firefox, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介しま... 続きを読む
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス
2020/11/12
1084 users
CSS
コリス
HTML
実装時
JavaScript
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む
Reactのレンダリングに関する完全ガイド - Qiita
2020/06/22
320 users
Qiita
React
翻訳ツール
たくさん
許可
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいな... 続きを読む
CSSを非同期ロードする最も簡単な方法 - Qiita
2019/08/01
229 users
Qiita
ブラウザシェア
stylesheet
CSS
同期
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しか... 続きを読む
ブラウザ君「ワイはCSSのセレクタを右から読むんや」 - Qiita
2019/06/05
95 users
描画速度
Qiita
セレクタ
パパ
太郎
ある日のやめ太郎一家 娘（3歳）「パパ、レンダリング最適化されたCSS書いてる？」 ワイ「なんやレンダリングって」 娘「ブラウザがWebサイトを描画することだよ」 ワイ「ああ、そのレンダリングか」 ワイ「よう知っとるわ」 よめ太郎「（CSS関係で他にどんなレンダリングがあんねん）」 ワイ「ワイはいつも描画速度を意... 続きを読む
RubyKaigi 2019でujihisaが登壇した裏話 - Quipper Product Team Blog
2019/05/14
61 users
gist
ujihisa
Ruby
裏話
ローカル変数
ujihisaです。先日2019年4月に日本の福岡で開催されたRubyKaigi 2019にて、ujihisaが "Play with local vars"というタイトルで発表してきました。この発表は、40分間英語でひたすらRubyのローカル変数についてだけ語るというものです。 発表スライドは公開済みで、こちらのgistですが、レンダリングにはshowtime.vimを要... 続きを読む
［速報］次期Micrsoft Edgeに「Internet Explorer mode」搭載。企業向けにIE11のレンダリングも提供。Microsoft Build 2019 － Publickey
2019/05/06
458 users
マイクロソフト
Internet
米シアトル
機能
イベント
［速報］次期Micrsoft Edgeに「Internet Explorer mode」搭載。企業向けにIE11のレンダリングも提供。Microsoft Build 2019 マイクロソフトは米シアトルで開催中のイベント「Microsoft Build 2019」で、次期Microsoft Edgeの企業向け新機能としてInternete Explorer 11と同じ機能をMicrosoft Edge内で提供する「Internet... 続きを読む
WordPressを劇的に高速化、1秒以内に表示されるフロントエンドの構築方法 -Zero-latency WordPress Front-end | コリス
2019/02/15
342 users
コリス
GitHub
サーバーサイド
SSR
フロントエンド
サーバーサイドのレンダリング（SSR）を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下... 続きを読む
次世代 Web カンファレンス 2019 アウトラインメモ | Web Scratch
2019/01/13
56 users
アウトラインメモ
Web scratch
次世代
http
次世代 Web カンファレンス - connpassに参加してきたのでメモ。 パフォーマンス 登壇者 @1000ch likr @sisidovski 記録 ローディング周り 1000ch: WebKitのレンダリングの様子の動画を見たのが興味を持ったきっかけ 1000ch: HTTP/2になってきてローディングの通信を気にすることは減った? sisidovski: 同時接続数は気に... 続きを読む
1人約70万円の投資--ビズリーチがエンジニアらに136台のiMac Proを導入した理由 - CNET Japan
2018/07/06
294 users
ビズリーチ
プロセッサ
コンパイル
iMac Pro
Mac
人材サービスのビズリーチは4月、エンジニア・デザイナー職のスタッフを対象に、iMac Proを136台導入した。 iMac Proは、2017年12月に発売されたハイエンド向けのディスプレイ一体型のMacだ。プロセッサにはIntel Xeonを採用し、標準でも8コア、最大18コアを搭載する。画像のレンダリングやアプリケーションのコンパイル... 続きを読む
JSサイトのための第4のレンダリング構成としてダイナミックレンダリングをGoogleが発表 #io18 #io18jp | 海外SEO情報ブログ
2018/05/23
146 users
ダイナミックレンダリング
米マウンテンビュー
セッション
[レベル: ] JavaScript で構築されたサイトのために Dynamic Rendering（ダイナミック レンダリング）と呼ぶ仕組みを Google はサポートするようになります。 米マウンテンビューで開催された Google I/O 2018 のセッション で Google の John Mueller（ジョン・ミューラー）氏が発表しました。 Google が現在サポートする JS サ... 続きを読む
Apple、“誤植ではない”18コアCPU搭載一体型「iMac Pro」を明日発売 ～GPUはRadeon Pro Vega採用 - PC Watch
2017/12/13
90 users
誤植
Xeon
GPU
CPU
Apple
iMac Pro Appleは、高性能一体型パソコン「iMac Pro」を14日に発売する。 CPUには8コアまたは10コア、そして18コアのXeonを採用。レンダリング、4Kビデオ編集、リアルタイムオーディオエフェクトの制作などのプロ向け作業が可能になる。Appleの製品情報では「(18コアは)誤植ではありません」と紹介している。 GPUにはAMD最上位の「Radeon Pro Vega」... 続きを読む