Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM 2024.10.19 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコン
DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita
こんにちは、ほそ道です。 今回はDOMネタです。 イベントのキャプチャとバブリングについて覚書をまとめて参ります。 また今回はv8での検証であり、レガシーなIEは対象外です。 レガシーなIEはイベント設定メソッド自体が違いますのでご注意くださいませ。 目次はこちら 入れ子なDOMのイベント発生順序制御 DOMが入れ子構造になっていてそれぞれにイベント(例えばClickイベント)が設定されていた場合 「このように動いてほしい」という期待はケースバイケースであると思います。 期待通りの処理になるようカッチリ制御しちゃいましょう。 addEventListenerの第三引数「useCapture」 例えば下記の様なHTMLがあったとします。 body内にdivが入れ子になっておりそれぞれにClickイベントが登録されています。 <html> <head lang="en"> <meta char
benvを使ってangular.jsのコードをnode上で動作させる - podhmo's diary
はじめに テストなどを書きたい時にブラウザを立ち上げずに動作チェックなどをしたいことがある。 しかしangular.jsを直接nodeからrequireすると怒られる $ npm install --save angular $ node -p 'require("angular")' ReferenceError: window is not defined at Object.<anonymous> (/home/podhmo/tmp/angular-api-test/node_modules/angular/angular.js:29016:4) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
仮想DOMライブラリの「virtual-dom」だけでMV*なビューを書く - Qiita
virtual-domという、（その名の通り）仮想DOMの生成とdiffを行うシンプルなJavaScriptのライブラリがあります。 GitHubのexampleを見るとわかるのですが、このライブラリのみでも、シンプルな形で動的なビューを実現することができます。 このシンプルさがとても魅力的で、実際に使ってみたのですが、 分かったことをまとめたいと思います。 仮想DOMって？ Reactなどで以前から採用されていて、最近流行している感じの 仮想DOM ですが、 重い本物のDOMとは別に、仮想のDOM（ただのJSオブジェクトなので軽い）のツリーを構築する 仮想DOMの構築を状態が変更されるたびに行って、前回の仮想DOMとのdiffをとって実DOMに適用する という形で動的なビューの実現に利用されます。 仮想であるので、ブラウザ上だけではなくサーバーサイドのHTMLレンダリングにも使えます。
【JavaScript】 MutationObserverの使い方 個人的まとめ - はりをきば
DOMの変更を検知するイベントが非推奨になり 代わりに新しく作られたMutationObserverなるもの。 MutationObserver - Web API インターフェイス | MDN https://developer.mozilla.org/ja/docs/Web/API/MutationObserver DOM変更検知は結構よく使うもの（特にユーザースクリプト）なのに 日本語の解説サイトが↑のMDNとMSDN、ここくらいしかなく その都度ググったり手探りで片っ端から試すのが面倒なので以下に自分用にまとめる。 コンストラクタ まずインスタンスを作る。 window.MutationObserverコンストラクタの引数に、DOM変更を検知した際に実行する関数を渡す。 function omega(data1, data2) { alert("ﾜﾚﾊﾒｼｱﾅﾘ"); consol
ブラウザ内で安全に文字列からDOMを組み立てるためのRickDOMというライブラリを書いた - 葉っぱ日記
RickDOM - ricking DOM elements safety from string https://github.com/hasegawayosuke/rickdom ブラウザ内のDOMParserあるいはcreatHTMLDocument APIを使って不活性なDOMを組み立てたのちに、必要な要素と属性、スタイルだけを切り出して複製しているので、原理的にDOM based XSSの発生を抑えることができます。 使いかたも簡単。 var rickdom = new RickDOM(); var container = document.getElementById( "container" ); var elements; var i; // read allowings property to show default rule // div.textContent =
あなたがReactを使うべき理由 - mizchi's blog
最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue
ContentLoaded.com - A playground of loading resources into a web page
Content Loaded A playground of loading resources into a web page
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
DOMを高速に操作するための skin.js というライブラリを作った - mizchi log
(タイトル修正 DOMを高速に操作 => DOMの値を高速に更新 at Sat Mar 09 2013 15:30:09 GMT+0900 (JST)) (Skin#inject実装したのでタイトル元に戻した at Mar 09 2013 18:10:04 GMT+0900 (JST)) 若手の会で、JavaScript Hell on Earth というテーマで話してきました。 js_hell_on_earth http://www.rvl.io/mizchi/js_hell_on_earth というわけでDOM抽象ラッパーつくりました。 mizchi/skin.js · GitHub https://github.com/mizchi/skin.js 目的 クライアントサイドJSでは一回書いたら終わり、ではありません。ゲームなどのリッチなユーザー体験を提供する際、高頻度でDOMを書き換
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
[JS]DOMエレメントを操作するシンプルで超軽量のスクリプト -Chibi
jQueryなどの他のスクリプトに依存せず、DOMエレメントを操作するシンプルで超軽量（2KB gzipped）のスクリプトを紹介します。 Chibi -GitHub Chibiの対応ブラウザ Chibiの使い方 Chibiの対応ブラウザ IE6をはじめ、ほとんど全てのデスクトップ・スマートフォン用のブラウザをサポートしています。 Android Browser 2.1+ Blackberry Browser 6+ Chrome Chrome Android Firefox 3.5+ Firefox Mobile Internet Explorer 6+ Internet Explorer Mobile 9+ Opera 10+ Opera Mini Opera Mobile 10+ Safari 3.2+ Safari Mobile 3.2+ Symbian^3 Browser or h
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Incremental DOM ざっと見たやつ。追記: 初期バージョンのコードなので最新では異なる場合があります。
仮想DOMテンプレーティング概念
creatorish.com
GitHub - madrobby/dom-monster
Google Documentの入力欄を僕達はまだ知らない。
