タグ レンダリング
人気順 5 users 10 users 50 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)など、レンダリングに関連した議論でよく使われる用語も数多く存在します。 そして、こ... 続きを読む
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割しか... 続きを読む
［速報］次期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 下... 続きを読む
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 サ... 続きを読む
やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち - console.lealog();
2017/07/09
276 users
サーバーサイドレンダリング
console.lealog
2017 - 07 - 10 やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち Web React.js JavaScript 個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。 そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイド レンダリング （以下 SSR ）をすることになるかも SPAじゃないページもまとめてReact... 続きを読む
ディズニー、砂糖や塩、砂などの不均一で多分散の粒子群を現実的に見せるレンダリング方法を論文にて公開 | Seamless
2016/12/09
215 users
異種
粒子
seamless
混合物
論文
ディズニー、砂糖や塩、砂などの不均一で多分散の粒子群を現実的に見せるレンダリング方法を論文にて公開 2016.12.09 Disney Researchは、動的で不均一な粒子の混合物の効率的なレンダリングを可能にする方法を論文にて 公開しました。 論文では、異種で多分散の粒子群をレンダリングするためのマルチスケールアプローチを提示します。何百万レベルの粒子をシュミレートするのに使用され、砂糖や塩、... 続きを読む
SSEを使ってHTMLエスケープを高速化してみた - k0kubun's blog
2016/08/14
120 users
SSE
Rails
github.com
CGI
ライブラリ
2016 - 08 - 15 SSEを使ってHTMLエスケープを高速化してみた 高速なHTMLエスケープをするライブラリを作った ある日HTMLエスケープを速くしたくなって、hescapeというライブラリを作った。 github.com とにかく速いHTMLエスケープがしたい Railsアプリのビューのレンダリングにおいて、 CGI.escapeHTML を高速化 *1 することでRailsのデフ... 続きを読む
Mozillaの新型高速ブラウザエンジン「Servo」、初めてのデベロッパープレビューが公開。Rust言語で開発中 － Publickey
2016/07/05
163 users
Servo
ブラウザエンジン
Publickey
プロセッサ
Mozillaの新型高速ブラウザエンジン「Servo」、初めてのデベロッパープレビューが公開。Rust言語で開発中 Servoは、 Rust言語 で開発されているブラウザエンジン。HTMLのパース、レンダリング、画像処理、レイアウトといった処理を独立して並列的に実行するなどにより、最近のプロセッサの特長であるマルチコア、SIMD命令、GPUなどを活用し、高速なWebブラウジングを実現しようとしてい... 続きを読む
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch
2016/06/06
399 users
Web scratch
電子書籍
無料
GitHub
ツール
JavaScript Plugin Architecture というJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 - レンダリングに難あり ePub形式 Mobi形式 GitHub 上にソースコー... 続きを読む