サイト速度とonload再考 | ゆっくりと…
単にウケ狙いなら「革新的！GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」（笑）とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化
Masato Kinugawa Security Blog: U+2028/2029とDOM based XSS
ECMAScriptの仕様では、0x0A/0x0D以外にU+2028/2029の文字も改行とすることが明記されています。 これはあまり知られていないように思います。 以下はアラートを出します。 <script> //[U+2028]alert(1) </script> 知られていないだけでなく、知っていたとしても、スクリプトで文字列を処理するときに、U+2028/2029まで考慮する開発者がどれだけいるのかという話です。 実際、U+2028/2029を放り込むと文字列リテラル内にその文字が生のまま配置され、エラーが出るページは本当にたくさんあります。まあ、エラーがでるだけなら、大抵の場合大きな問題にはなりません。 ところが、U+2028/2029によってXSSが引き起こされてしまう場合というのを最近実際に見ました。 Googleのサービスで見つけた2つのケースを取り上げたいと思います。 ケ
Ember.js入門 ｜ Developers.IO
条件句 – Ember.js入門(6) Ember.js入門 シリーズ 記事 2013年09月16日 渡辺 修司（1） 4 Ember.js入門の6回目は条件句、いわゆるifとかunlessです。それほど難しい話題でもないのでサクサクといきましょう。 バインディングと条件句 Ember.jsでは他のテンプレートエンジンと同様にModelやCo […] バインディング – Ember.js入門(5) Ember.js入門 シリーズ 記事 2013年09月16日 渡辺 修司（1） 5 Ember.jsの基礎を徹底的に解説するEmber.jsの5回目です。今回はいよいよバインディングについて解説します。内容としては、アクションの基本 – Ember.js入門(4)からの続きとなるため、読んでない方は先に […] アクションの基本 – Ember.js入門(4) Ember.js入門 シリ
Excellent XPath Expressions - nanto_vi
Excellent XPath Expressions nanto_vi (TOYAMA Nao), 2010-06-05, 2010-09-26 追補 XPath で何ができるか 文書中のノードの選択 文書: XML 文書、HTML 文書 ノード: 文書ノード (ルートノード)、要素ノード、属性ノード、テキストノード、コメントノード、etc. cf. CSS セレクタ: 要素の選択 文書を元にした文字列、数値、真偽値の生成 図 1 に HTML 文書が生成する文書木 (文書ツリー) の例を挙げます。図中、二重線で囲んだのが文書ノード、角丸四角が要素ノード、長方形がテキストノードを表します。 文書木の根 (最上部) は文書要素ノード (ルート要素ノード、HTML 文書なら html 要素ノード) ではなく、文書ノードであることに注意してください。JavaScript から DOM や XP
Introduction to DOM Range - DOM ECMAScripting
DOM Core は 12 種類のノードを定義していますが、それらは大まかに 2 個のグループに分けられます。子ノードを持つものElement、Document、DocumentFragment など。これらの nodeValue は null です（Attr を除く）。子ノードを持たないもの（葉ノード）Text、Comment、CDATASection、ProcessingInstruction。これらの nodeValue はテキストデータで、data プロパティでも参照できます。DOM Range ではノードをコンテナと呼びます。子ノードを持つコンテナの場合、それぞれの子の間をオフセットとして数えます。最初の子の前をオフセット 0 とし、全部で子ノード数 + 1 個のオフセットが存在します。子ノードを持たないコンテナの場合、文字と文字の間をオフセットとして数えます。テキストデータが「
Object Oriented JavaScriptの入門 - Y's note
謝罪 Object Oriented JavaScriptの入門 - Yuta.Kikuchiの日記 2013/08/27に公開したObject Oriented JavaScriptの記事ですが、prototype周りの説明がいい加減だったため内容を一旦削除することにしました。多くの方にBookmarkして頂いたお陰でホットエントリーにも掲載されたのですが、正直それに見合う内容ではありませんでした。 あやふやな知識を書いてしまったのは僕の勉強不足が原因です。ネットで収集した情報だけで自分の知識を固めて行くのは危険だという事を身にしみて感じました。同時に今回とても悔しく情けない思いもしたので、必ずや正しいJavaScriptのオブジェクト指向知識を身につけて再投稿することをここに宣言します。 "I shall return！" (function() { console.log( "I s
脱初心者のためにこれだけは知っておきたいJavaScriptネタ
脱初心者のために これだけは知っておきたい JavaScriptネタ Tsuyoshi Akase 福岡Haxe勉強会 feat. HTML5+α @福岡 第0x00回
uupaa's pure JavaScript module pattern - latest log
2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？ 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら
HTML(.js) - Befriend the DOM!
Intuitive HTML lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code. Powerful HTML's functions enable you to flexibly use all native DOM features with brevity, clarity, and more power than ever. HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|A
Skeuocard by kenkeiter
Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface. Learn more about the concepts behind the design: "Redesigning The Credit Card Input" by Ken Keiter. Tweet View the Project on GitHub kenkeiter/skeuocard Download ZIP File Download TAR Ball View On GitHub Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seein
redirect to javascript-style-guide
■□■リダイレクトしています。■□■ しばらくしても移動しない場合はこちらをクリックしてください。
Post by @0-9
個人的には以下の様な理由から、data属性はJSから参照する変数の初期値としてのみ使用し、JSから直接状態を保持するための変数としては使用しないほうがいいと思っています。 Objectを保持できない JSのObjectは.toStringされた結果が保持されるため、JSの内部状態をそのまま保持できませんDOMアクセスが有るため遅い これに関してはベンチマークをとったわけではないですが、JS内で完結する変数アクセスに比べると速度的なペナルティはあると思います （data-*もCSSから参照できるからそのへんの解決もいるし） jQuery.fn.dataの実装はこれらの問題をある程度解決しているので、「HTMLElement毎の独自変数を保持したい」という場合にはjQuery.fn.dataかそれに近い実装を行うのがいいと思っています。
CasperJSで気軽にJSのテストできる - hitode909の日記
ウェブアプリケーションのJSのテストするのにCasperJS使ったら便利だった． CasperJSはPhantomJSにテスト用ユーティリティがついて便利になったやつ． JS，MVCできれいに書いてると，Modelの単体テストとかできるけど，昔ながらの感じだと，ここをクリックしたらこれが表示されること，みたいなテストを書くことになる．けどライブラリとかいろいろあってどれを使えばよいか分からなくて敷居が高い．CasperJSを使ったらこれだけで完結してテスト書ける． PhantomJSは単なるブラウザだけど，CasperJSはテストのフレームワークとか，DOMのテスト関数とかがついてる． 非同期なタスクの実行の仕組みも入ってて，casper.thenっていうのを順番に書いていくと，順番に呼んでくれて，click()して，casper.thenしたら，ページ遷移したら次のページに移動してる．ス
JavaScriptは決して遅くない | ykzts.blog
数年前ならいざ知らず、現代のJavaScriptは充分に高速な動作が実現されている。無論C言語で記載されたいわゆるネイティブアプリケーションと比較すれば計算速度等では大きく劣ってしまう。だがしかし複雑な計算等を必要としない通常範囲のアプリケーションであればJavaScript (とHTMLとCSS) で記述がなされたアプリケーションの実行速度はネイティブアプリケーションと遜色ないものになると半ば強い確信を抱いている。ではJavaScriptで記述がなされているアプリケーションの動作が緩慢であるという認識がなぜ多くの場でなされているのか。それは単純な理由である、そのアプリケーションの作者が知識不足でDOM操作が冗長的なものとなっており無駄が多くなってしまっているからだ。 JavaScriptの動作が速くなろうとも、DOM操作は現在でも多くの場面で遅くなってしまっている。document.ge
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
WEBページをJSで自動操作できるようにできる「SlimerJS」:phpspot開発日誌
はてなアイデア
非推奨になった Mutation events を Mutation Observers に置き換えよう
