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

skypenguins id:skypenguins

DOMに関するskypenguinsのブックマーク (6)

Display Locking によるレンダリングの最適化と Async DOM | blog.jxck.io
Intro React やlit-html などにより、 DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。これは、現在の標準 API には、規模が大きく処理が複雑なアプリケーションを開発する際に、足りてないものがあると考えることが可能だ。課題の1つとして﹁DOM 操作が同期処理である﹂という点に着目し、 Async DOM という文脈でいくつかの提案が行われた。今回は、その提案の1つであり Chrome で実装が進んでいる Display Locking について現状を解説する。現状の DOM 操作の課題まず、以下のような処理を考える。 body.appendChild($div) この処理がJSの途中で出現すれば、その瞬間 Window にある
skypenguins 2019/06/17
DOM

フロントエンド

ブラウザ
リンク
anime.js
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Getting started
skypenguins 2016/06/28
javascript

dom

ライブラリ
リンク
新ブラウザMicrosoft Edgeの実力はいかに？ Web制作者が抑えておきたい各ブラウザを上回るHTML5描画性能 – ICS LAB
新ブラウザMicrosoft Edgeの実力はいかに？ウェブ制作者がおさえておきたい各ブラウザを上回るHTML5描画性能 Microsoft Windowsの最新OS﹁Windows10﹂では、従来の標準ブラウザ﹁Internet Explorer﹂に代わって新ブラウザ﹁Microsoft Edge﹂が標準ブラウザとなりました。ウェブ制作者としては、Microsoft Edgeのパフォーマンスはどれくらいなのかが気になりませんか？　今回はDOM + CSS3、HTML5 Canvas、WebGLについて、Microsoft Edgeと他Windowsブラウザのパフォーマンスを比較してみました。検証に用いたデモについて今回の検証はBunnyMarkで検証しています。Bunnyの表示は﹁移動スピード・方向﹂﹁回転﹂﹁拡縮﹂﹁透明度﹂をランダムで適用し、毎フレーム移動をさせています。時間
skypenguins 2016/01/26
Canvas

HTML

html5

ブラウザ

DOM

WebGL

ベンチマーク

Edge
リンク
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たいレンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
skypenguins 2015/10/14
dom

javascript

パフォーマンス

webkit
リンク
なぜ仮想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
skypenguins 2014/12/12
react.js

VirtualDOM

HTML

dom

あとで読む
リンク
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。﹁React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ﹂もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
skypenguins 2014/12/12
React.js

dom

VirtualDOM

あとで読む
リンク
1

お知らせ

もっと読む

公式Twitter

@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
@hatebu
最新の人気エントリーの配信

キーボードショートカット一覧

j次のブックマーク

k前のブックマーク

lあとで読む

eコメント一覧を開く

oページを開く

設定を変更しましたx