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

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

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

takata3 2021/02/10

リンク

Let's build a browser engine! Part 1: Getting started

I’m building a toy HTML rendering engine, and I think you should too. This is the first in a series of articles: Part 1: Getting started Part 2: HTML Part 3: CSS Part 4: Style Part 5: Boxes Part 6: Block layout Part 7: Painting 101 The full series will describe the code I’ve written, and show how you can make your own. But first, let me explain why. You’re building a what? Let’s talk terminology.

takata3 2021/01/26

リンク

自作フレームワークをつくって学ぶ仮想DOM実践入門

昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。 TOC 記事が長くなりそうなのでも目次そもそもDOMとは？ D

takata3 2018/11/19

リンク

JavaScriptの読み込みにおける非同期スクリプト注入の悪影響 | POSTD

Synchronous（同期）スクリプトは効率が悪い。というのも、ブラウザにDOM構築をさせ、スクリプトを読み込ませ、残りのページをリロードする前に実行してしまいます。今さらな話ですが、これがわれわれプログラマがasynchronous（非同期）スクリプトをよく使うようになった理由です。ここに分かりやすい例があります。  <script src="http://somehost.com/awesome-widget.js"></script>  <script> var script = document.createElement('script'); script.src = "http://somehos

takata3 2016/04/21

リンク

動的に追加されるDOM要素に対応する方法あれこれ - Qiita

Chrome拡張を作っていると，最近のモダンなWebサイトが後から動的にDOM要素を追加してきて困ることがある．毎度対処方法をぐぐっているので，ここにまとめておく．追加される要素にイベントハンドラを付加したい jQueryのonメソッドにselectorを渡すことで，あとから動的に追加された子要素に対してもイベントを発火することができる． liveメソッドでも同様のことが出来たが，1.7で廃止された． $("#parent").on("click", ".child", function(){ console.log("click");}); $("#parent").append("<span class='child'>Click Here</span>"); 要素が追加されたことそのものを検出する DOMNodeInserted: 非推奨要素が追加されたときに発火するDOMNod

takata3 2016/04/10

リンク

JavaScriptで動的にscriptタグを差し込んだり、実行する方法

こんにちは、@s_tsukaです。今回は珍しくJavaScriptネタでいこうと思います。自分のJS力はそれほど高くないですし、ブラウザやW3Cの仕様に詳しくないですが、scriptタグはハマりポイントだと思うので、書いておきます。（といっても今回のは一般的ではないです）今回は生のJSを扱います。（最近はAngularや、Reactが流行っていますが、未だに生JSのニーズもあるんですよ）結論から言うと、単一scriptタグならappendChild、複雑なタグならdocument.write + iframeです。 scriptタグこのページにたどり着いた読者には説明不要かと思いますが・・・ scriptタグをHTMLファイル上に記述し、ブラウザに読み込ませると、そのscriptが起動します。例えばこんな感じで。 <html> <head> <script> alert(1); <