ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
『スマートフォンにおける描画の最適化(tofu.js + pixi.js)』
皆さん初めまして！ 2013年度新卒ディベロッパーのスエ@sueと申します。 私は現在、スマートフォン向けブラウザゲーム「ペコロッジ」を開発しています。ペコロッジで主に使用しているスマートフォン向けJavascriptライブラリ tofu.jsをテーマにお話したいと思います。 tofu.jsってなんか聞いたことあるな？って感じたあなた。はい、そうです。以前、同じく2013年度新卒デベロッパーのチャーリー@charlie10151015がtofu.jsの特徴について説明してくれました。（「 スマートフォン向けJavascript tofu.js 」参照）今回はこのtofu.jsを用いたスマートフォンのデバイス対応について焦点をあてて説明していきたいと思います！ デバイスのレンダリング性能の差異ブラウザのレンダリング性能の特徴はスマートフォンの機種やバージョンによって様々です。例えばあるAnd
クリティカル レンダリング パス | Articles | web.dev
クリティカル レンダリング パス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 クリティカル レンダリング パスの最適化とは、現在のユーザー操作に関連するコンテンツの表示を優先することです。 高速なウェブ エクスペリエンスを提供するには、ブラウザで多くの処理を行う必要があります。こうした作業のほとんどは、ウェブ デベロッパーには見えません。Google がマークアップを記述すると、見栄えのよいページが画面に表示されます。しかし、ブラウザはどのようにして HTML、CSS、JavaScript を取り込み、画面上のピクセルをレンダリングするのでしょうか。 パフォーマンスを最適化するには、HTML、CSS、JavaScript のバイトを受け取るまでの中間ステップと、それらをレンダリングされたピクセルに変換するために必要な処理（クリティカル レンダリング パ
Resource Hintsでリソースを事前取得しよう！ - Qiita
Resource Hintsとは？ 下記4つのAPIから構成される。IEについては10以降にはなるが、大体のブラウザでサポートされている。 - DNS-Prefetch - Preconnect - Prefetch - Prerender 詳しくはResource Hints参照。 DNS-Prefetch ソーシャルボタンの設置やCDNの利用など、外部サイトからリソースを読み込む場合、「DNSルックアップ（ドメインをIPアドレスに変換すること）」が複数発生します。下記のように指定することで、あらかじめドメインの名前解決を行うことが可能です。 (function(document) { var servers = [ /* evernote */ "static.evernote.com" /* pocket */ ,"d7x5nblzs94me.cloudfront.net" ,"wi
仮想DOMの内部の動き | POSTD
PreactでVDOMがどのように機能するかを示すフローチャート 仮想DOM（VDOMあるいはVNode）は魅力的です✨ しかし複雑で、理解が難しいものでもあります???? React や Preact 、その他同様のJSのライブラリでは、これをコアで使っています。残念ながら私は、これを詳細かつ分かりやすく説明している優れた記事や資料を見つけられませんでした。ですから、自分で書こうと思い立ったのです。 備考：これは非常に長い記事です。内容をシンプルに表すために画像を山ほど挿入しましたが、それゆえにさらに長い記事になってしまいました。 私は Preact のコードとVDOMを使いました。容量が小さくて済み、将来、簡単に見なおすことができるからです。しかし、概念のほとんどはReactにも共通していると思います。 皆さんがこれを読んだ後、仮想DOMをよく理解できるようになり、できればReactや
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
リクルートテクノロジーズのフロントエンド開発 2016 - from scratch
前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
