[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社
DOMの規格にはRangeというクラスがあります。ドキュメント上の選択範囲などを表すのに便利なクラスです。 ついさっき、このクラスにまつわるパフォーマンス問題を解決したので記事に残そうと思います。 removeChild()が重い？ とあるDOM操作を行う処理のパフォーマンスが悪い、というチケットが立てられたのが発端でした。 最初にその部分を実装したのが私で、そこまでチューニングをしっかりしていた訳ではなかったのでまあそんなこともあるかな、と思いながらとりあえずパフォーマンス計測を行ってみたところ、appendChild()が実行時間の9割以上を占めているという結果でした。 appendChild()がなんでそんなに遅いんだろう？ appendChild()は親ノードの子のリスト末尾に1個ノードを追加するだけの処理です。普通に考えてこれだけではそこまで遅くなるとは思えない。 appendC
![[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/b30f4f53ece097d30927e62ceda65d52134bc034/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2020%2F11%2Fdom_enomous_ranges_eyecatch-min.png)
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サイトを構築するには、実装中に各ステップを最適
MEGA HOKI : SLOT GACOR & BANDAR TOGEL TERBAIK 2024 SITUS SLOT PULSA TANPA POTONGAN #1
Ratehoki88 situs slot online yang selalu memberikan Mega hoki dan Big hoki terbesar sepanjang masa dengan menyediakan Mesin slot gacor terbaik saat ini yang selalu menurunkan scatter hitam dan Megawin terbesar di dalam permainan pragamtic play dan Pg shoft salah satunya di game online yang sangat di incar adalah Mahjong ways 1, 2 dan 3, 88 Mega 777 juta juga menyediakan pasaran togel atau situs to
全部言えたらDOMマスター！ HTML+DOMでノードを挿入する方法大全 - Qiita
DOMはHTMLの木構造(あとXMLも）やイベント等をプログラムから操作するためのAPIです。DOMの実装者として有力なのがウェブブラウザであり、ブラウザが提供するDOMのAPIを用いてJavaScriptプログラムからウェブページを制御するというのがDOMの極めてメジャーな使い道です。 近年知名度を増してきたReactやVueなどのライブラリも、もちろんこのDOMを用いて実装されています（Reactだとreact-domというあからさまな名前のパッケージがDOMを扱う部分を担当しています）。 この記事では、DOMで提供されるAPIを用いて木構造にノードを挿入する方法全38種類を列挙します。 ノードの挿入とは DOMにおいて基本的な操作のひとつがノードの挿入です。ノードというのは木構造の最小構成単位であり、要素ノードやテキストノードなどの種類があります。例えば<u>は</u>というのはu要
ブラウザレンダリング入門〜知ることで見える世界〜 - Qiita
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん！』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ（S○f○ri、E○ge）でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。（最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。） その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
仮想スクロールのすヽめ - Qiita
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか？ 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。（絶対に違う） 仮想スクロールの仕組み イカれたメンバーを紹介するぜ！ 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ！ ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数（あるいは
要素が画面内にあるかどうかの判定 - Qiita
$(window).scroll(function(){ var t = $('.form').offset().top; // ターゲットの位置取得 var p = t - $(window).height(); // 画面下部からのターゲットの位置 if($(window).scrollTop() > p){ $('.button').hide(); // ボタンを非表示 }else{ $('.button').show(); // ボタンを表示 } }) $('要素名').offset().top : 要素の位置を取得 $(window).height() : 画面の高さを取得 $(window).scrollTop() : 画面トップのスクロールされた距離を取得 js(複数判定) ※fadeinとfadeoutエフェクトをつける <div class="target"> <p>ho
Element: scrollIntoView() メソッド - Web API | MDN
alignToTop 省略可 論理値です。 true の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。 scrollIntoViewOptions: {block: "start", inline: "nearest"} に相当します。これが既定値です。 false の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。 scrollIntoViewOptions: {block: "end", inline: "nearest"} に相当します。 scrollIntoViewOptions 省略可 Experimental 以下のプロパティを持つオブジェクトです。 behavior 省略可 スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取ります。
仮想DOMに思いを馳せていたらそもそもブラウザのレンダリングがわかってなかった - Qiita
仮想DOMとか、react.js とか最近聞くようになりました。フロントエンドに関わるものとして、UIパフォーマンス向上を志すなら、少し触って明日の糧にしようと思っていろいろ調べていたら、そもそもブラウザのレンダリングとは何かもよくわかっていなかったので出直そうと思った、というごくつまらない話です。 ブラウザのレンダリングとは DOMの読み込み、リサイズ、イベント発火で再描画、くらいふわっとわかったフリになっていた。 http://www.yoheim.net/blog.php?q=20140703 下のURLをわかりやすく解説 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ ごつい http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technolo
domcurl: curl + JavaScript
For a long time I've been thinking about what the future of the web looks like when we go past what we know as the traditional web browser. I called this The Headless Web and I wanted to answer was "What if everything was powered by 'The Web', but you never saw a browser?". Specifically I believe that if you have access to a full browser, but no visible to "chrome" then there is a huge opportunity
イベントの作成と起動 - 開発者ガイド | MDN
この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。 イベントは、次のように Event コンストラクターを使用して作成できます。 var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { /* ... */ }, false); // Dispatch the event. elem.dispatchEvent(event); 上記のコード例は EventTarget.dispatchEvent() メソッドを使用します。 このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet E
JavaScript の仕組み：メモリ管理+ 4つの共通のメモリリーク処理方法 - Qiita
この記事は sessionstack blog に投稿されている、How JavaScript works シリーズの一記事 "How JavaScript works: memory management + how to handle 4 common memory leaks" の和訳です。投稿されたのは Alexander Zlatkov, 原文はこちらです。翻訳については許諾いただいています。 メモリ管理もしくはC言語におけるメモリ解説他、用語なども怪しい箇所は多分にありますので、間違いがありましたら修正のご指摘・編集リクエスト等ください。 日本語の参考 URL 先に日本語の参考URLを記載しておきます。 JavaScriptで起こるメモリリークのパターン - EagleLand Browser Computing Structure // Speaker Deck Unders
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです
jQueryが必要とされなくなってきたのは, Reactなどの他のフレームワークが登場したせいではなく, 標準DOM APIが進歩したおかげです JavaScript Advent Calendar 2017 - Qiitaの2日目の記事です. 何故この記事を書こうと思ったか JavaScriptの定番ライブラリであるjQueryは, 最近以前と比べて必要とされなくなってきました. その理由はよく, Reactなどの他のフレームワークが登場したせいだと勘違いされています. しかし, jQueryが必要とされなくなってきた理由は標準DOM APIの進歩によるものです. この記事ではそれを書いていきます. なお, この記事ではReact Nativeについて触れる必要がないため, React DOMのことも一緒くたにReactと記述します. また, 私がweb開発を開始したのは3年前ぐらいから
JavaScript DOM APIの基本を学ぶ【連載まとめ】
どうも、イソップです。 以前DOMの連載記事を書きましたが、一覧にまとめておきます。 JavaScript DOM APIの基本を学ぶ 【導入編】 JavaScript DOM APIの基本を学ぶ 【構造編】 JavaScript DOM APIの基本を学ぶ 【取得編1】 JavaScript DOM APIの基本を学ぶ 【取得編2】 JavaScript DOM APIの基本を学ぶ 【取得編3】 JavaScript DOM APIの基本を学ぶ 【操作編】 DOMを理解する理由 JavaScriptを理解できる jQueryでしかコードが書けない、そんな人は「JavaScriptが書けます」なんて言えません。 「DOMを制するものは、JavaScriptを制する」。大げさに聞こえるかもしれませんが、実際そうです。 あわせてイベント処理も覚えておきましょう。 パフォーマンスに気を使えるよう
ブラウザ上で軽いDOMを使いたい
documentFragmentを使ってもDOMが重い場合、Server side DOMをブラウザ上で使うと早くなる。 今回はdominoを使った。 試してないけど、jsdomはたぶんブラウザ上では動かない（node向けの依存ライブラリがかなりあるので。dominoはpure jsでdependenciesが無い） ただ、dominoもそのままglifyJSにかけると壊れる。 正規表現用の文字列（\uxxxx）が壊れるのと、function nameが消えてinstanceofが失敗するのが原因っぽい glifyJSのコマンドラインオプションに --beautify beautify=false,ascii-only=true --keep-fnames を足して解決。 Special characters in Regular Expressions · Issue #171 · mi
Shadow DOM v1でHTMLの内容と構造を分離する
近年ではウェブに対する要求が肥大化しており、それに対応してHTMLも複雑化してきています。しかし、もともとHTMLはウェブアプリを記述するための言語ではありません。大規模なウェブアプリを作成するとなると、様々な点で不都合が出てきてしまいます。特に、まとまった部品をコンポーネント化して扱う機能に欠けていました。このことが私たちを悩ませ、今まで多くの苦労を引き起こしていました。 でも、もう悩まなくてもよくなるかもしれません。HTMLをコンポーネント化する規格が生まれました。それがWeb Componentsです。 Web ComponentsとShadow DOM Web Componentsは次の4つの部分からなる規格です。 Templates Shadow DOM Custom Elements HTML Imports 今回は、このうちのShadow DOMに焦点を当てていきたいと思いま
将来は標準のDOM APIを使うのがより身近になると思ってる - @hadashiA
最近、標準のDOM APIは別に悪くない、と考えるようになった。 そう考えて劇的に何か変わるかというと、現時点ではライブラリを使うことに慎重になるという気分的なものかもしれない。 気分が変わった結果として、僕は直近のプロジェクトのごくふつうのWebページでは、標準のDOM APIを直接さわる形に変更した。フレームワークは使わずRxJSのみ使っている。結果、パフォーマンスと細かいUIの挙動とコードの透明度が改善された。 標準のDOM APIは、べつに不必要に冗長なところがあるわけではないし、扱っているものが特別プリミティブ過ぎるとも思わない。むしろ、意図しない動作が入りずらく、インターフェイスが明示的にできている点なんかは優れている。 欠点があるとすれば、あらゆるスコープから好きなNodeの書き換えが禁止されてない点、クライアントサイドでのレンダリングのサポートが弱い点、何をするにもまず検索
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Make a resizable element - HTML DOM
Vanilla JSの108の一般的なDOMタスク：HTML DOMプロジェクト
WAI-ARIAを活用したJavaScriptによるDOM操作
