タグ

DOMとperformanceに関するclavierのブックマーク (6)

  • RUMとA/Bテストを使ったパフォーマンスのモニタリング — HACK The Nikkei

    ブラウザのパフォーマンス指標 Web アプリケーションにおける表示速度がサービスの品質・ビジネスに与える影響は大きい。サイトの遅さはブログサービスではユーザの離脱、広告売上の低下、EC サイトではコンバージョン率の低下などに影響を与えるといった点が知られ、Google は 2018 年 7 月からモバイル検索においてもサイトの表示速度を検索インデックスのシグナルとして加味する旨を公開している。 サイトパフォーマンスの改善は CDN やキャッシュサーバなどを用いたサーバサイドでの改善はもちろんだが、フロントエンドのレンダリングやユーザインタラクションの応答速度などの指標も重要である。また、これらは通信環境にも大きく影響する。ここでは主にクライアントサイドのパフォーマンス指標のモニタリングについて取り上げたい。 ブラウザの画面表示までの流れは以下のとおりである。 Time To First B

    RUMとA/Bテストを使ったパフォーマンスのモニタリング — HACK The Nikkei
  • リアルな DOM はなぜ遅いのか - steps to phantasien

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

  • DOM Performance (JSNext Bulgaria)

    In the client-side development we manipulate the DOM very often. Some of these manipulations take some time to execute, others take even more time. In a complicated JS-based software, it is very important to find the optimal approaches in order to get best performance. We will meet few very common cases, where standard DOM manipulations are very expensive, and we will see what is the optimal way t

    DOM Performance (JSNext Bulgaria)
  • サイト速度とonload再考 | ゆっくりと…

    単にウケ狙いなら「革新的!GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」(笑)とかの煽りタイトルを付けるところですが、今回はもっと質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、HatenaTwitterPocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化

  • DOM操作の最適化によるJavaScriptチューニング(前編)

    連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画! この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください!こちらから問題にチャレンジ! DOM(Document Object Model)とは、HTMLをアプリケーション(ここではJavaScript)から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも

    DOM操作の最適化によるJavaScriptチューニング(前編)
  • 効率的な JavaScript の記述 (HTML) - Windows app development

    This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. How you write your JavaScript code can have a big impact on your app's performance. Learn how to avoid common mistakes and how to architect your app for performance. Avoid unnecessary DOM interactions In the Windows Store app using JavaScript platform, t

    効率的な JavaScript の記述 (HTML) - Windows app development
  • 1