タグ

DOMに関するtomiyanxのブックマーク (3)

  • 私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD

    <script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚

    私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
  • 2017年のWeb Components | gihyo.jp

    ※ ○=サポート済み、△=開発中/予定あり、×=開発予定なし Web Componentsの構成要素すべてをウェブブラウザがネイティブサポートしているのは、ChromeとOperaのみです。その他のウェブブラウザは、部分的なサポートにとどまっています。 Web Componentsを試したい時は、実際には上記の表で掲載されたすべてのウェブブラウザで既に試すことができます。数多くの×マークがついているウェブブラウザについても、その穴を埋めてくれる機構(Polyfill)を利用することによって、Web Componentsを試すことが可能です。しかし、そのPolyfillも完全ではなく、どうしてもネイティブサポートしているウェブブラウザとの挙動の差が出てしまいますし、動作スピードについても雲泥の差が出てしまいます。 やはりWeb Componentsは、主要ウェブブラウザがネイティブサポートし

    2017年のWeb Components | gihyo.jp
  • レンダリングを意識したパフォーマンスチューニング

    TalkNote Vol.8「TalkNote × Frontrend」 -(2013年6月8日開催)で使用したスライドです。 Webページを遅くしているボトルネックの1つは、レンダリングです。 昨今、フロントエンドにおけるパフォーマンスの最適化はレンダリングの話題にシフトしつつあります。 特に非力なデバイスでは、ページロードやスクリプトの速度改善よりもレンダリングまわりの最適化に注力したほうが良い効果を得られるケースもあるでしょう。 問題になり得る事例を元に、いくつかのTipsをご紹介させていただきます。

    レンダリングを意識したパフォーマンスチューニング
  • 1