[B! DOM] Akinekoのブックマーク

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算するはじめに私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適

Akineko 2020/11/12

HTML
DOM

リンク

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？そういったフレームワークで使われている、仮想DOMについて知っていますか？「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい

Akineko 2020/02/18

リンク

querySelectorAllしてmapしたいとき[...すると短い - hitode909の日記

表示中のHTMLから情報を雑に抜き出して利用するため，ブラウザのデベロッパツールなどでquerySelectorAllしてmapしたい．しかし，querySelectorAllはNodeListを返すので，mapするにはArrayに変換する必要がある． NodeListをArrayに変換するときに短く書く方法ないですかって同僚に聞いたらいろいろ教えてもらえたのでメモ． Array.prototype.slice.callするオーソドックスな手法．昔からこれを書いていて，長くて困っていた．最近はアロー関数を使えるのでちょっと短くなったけど長い． Array.prototype.slice.call(document.querySelectorAll('a')).map(a => a.href) [].slice.callする Array.prototypeのかわりに[]で書く．ちょっと短い

Akineko 2019/02/11

リンク

Webエンジニアが知っておくべきブラウザレンダリングの仕組み | tataneのうたたね

Webサイトの構築を考える上で、ブラウザがどのようにしてレンダリングを行なっているかを理解することは重要です。ブラウザレンダリングの流れを把握することで、自分の書いたCSSやJavaScriptがどのように読み込まれ、解釈されるかが理解できるようになります。今回は普段デザインやコーディングをするときはなかなか意識しづらいレンダリングエンジンの流れを見ていきます。レンダリングの流れブラウザのレンダリングは上図のような流れで行われます。 Loading, Scripting, Rendering, Paintingの４つの工程からなり、最終的に画面に描画されるまでをフレームと呼びます。フレーム内の処理を詳しく見るとDownload, Parse, Scripting, Calculate Style, Layout, Paint, Rasterize, Composite Layer

Akineko 2018/05/14

リンク

仮想DOMの内部の動き | POSTD

PreactでVDOMがどのように機能するかを示すフローチャート仮想DOM（VDOMあるいはVNode）は魅力的です✨　しかし複雑で、理解が難しいものでもあります???? React や Preact 、その他同様のJSのライブラリでは、これをコアで使っています。残念ながら私は、これを詳細かつ分かりやすく説明している優れた記事や資料を見つけられませんでした。ですから、自分で書こうと思い立ったのです。備考：これは非常に長い記事です。内容をシンプルに表すために画像を山ほど挿入しましたが、それゆえにさらに長い記事になってしまいました。私は Preact のコードとVDOMを使いました。容量が小さくて済み、将来、簡単に見なおすことができるからです。しかし、概念のほとんどはReactにも共通していると思います。皆さんがこれを読んだ後、仮想DOMをよく理解できるようになり、できればReactや

Akineko 2017/02/10

DOM
react

リンク

フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]

みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況