Webアプリで起きるクライアントサイドの性能劣化パターンとその改善チューニング
本連載は、パフォーマンスを主な対象としてシステム開発・運用の改善や設計を行うNTTデータのコンサルタントチーム「まかせいのう」のメンバーが、業務での体験やそこから得た知見を共有する『週刊まかせいのう』の記事を編集し転載するものです。今回は、クライアントサイド（Webブラウザ）の処理性能を劣化させるパターンと、それを改善し性能を向上させるチューニング方法を紹介します。 遅延原因がクライアント側にある場合の2つのパターン いわゆる「性能が出ない」「画面がもっさりして処理が遅い」という性能問題が発生した場合、必ずどこかに遅延を発生させているコンポーネント、いわゆる「ボトルネック」が存在します。それはWebサーバであったり、DBサーバであったり、はたまたネットワークやストレージであったりします。 一般的に、こうした遅延箇所の多くはサーバサイドに集中しています。サーバサイドでは、多くのユーザリクエス
HTML/CSS/JavaScriptでタブコントロールを作ってみた(右タブ) - display:none方式
イントロダクション 前回は、選択されているタブの中身は表示、選択されていないタブの中身は非表示（CSS の display:none）とする仕組みにて、左にタブがあるタブコントロールを作成してみました。 HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式 http://upa-pc.blogspot.com/2015/05/html-tabControl-display-none-left.html 今回は、右にタブがあるタブコントロールを作成してみました。 HTML/CSS/JavaScriptでタブコントロールを作ってみた(右タブ) - display:none方式 : コード スタイルシート(CSS) 以下のスタイルシートを、<head> 内などに埋め込みます。 <style type="text/css"> /* タブコ
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
web制作：ブログやwebサイトのページの、読み込み時の負荷を減らすには？ - 見えない部分の処理を遅延させる方法があります
web制作：ブログやwebサイトのページの、読み込み時の負荷を減らすには？ - 見えない部分の処理を遅延させる方法があります イントロダクション Webサイトやブログの、各ページの読み込み時の負荷は、少なければ少ないほど良いです。 ページが表示されるまでに、ページが真っ白であったり、ページ内の要素が表示されるまでに時間がかかったりすると、閲覧者に待ち時間が発生することになり、ストレスを与えることになります。 最悪、ページの表示待ち時間が長すぎると、閲覧者はページを表示させるのを諦めて、立ち去ってしまうこともあります。 Web制作者は、このページの読み込み負荷を減らすために様々な工夫をしています。 その一つに、見えない部分の処理を遅延させるという方法があります。 ブログやwebサイトのページの、読み込み時の負荷を減らす：見えない部分の処理を遅延させる まえがき 最近のブログや Web サイト
JavaScript:1度のみ実行できる関数を作成する関数 - 2回目以降は空又は任意の処理を実行します
イントロダクション JavaScript を使用してプログラムを書いていると、この処理は絶対に 1 度しか実施されないことを保証したいということがあります。 例えば、情報をサーバやストレージへ書き込むような処理を連続クリックから保護したいケースや、外部サーバから画像やスクリプトを取得する処理で（何らかのバグがあり）短時間に大量のリクエストを送ってしまうのを防ぎたいケースです。 そのようなケースでは、いろいろな対策が考えられますが、その１つとして１度しか実行できない関数を作成するというケースです。 では、実際にソースコードを見てみましょう。 プログラムコード： <script type="text/javascript"> <!-- /* 一度のみ実行できる関数を作成する 一度のみ実行したい処理が記載された関数 へは引数を渡すことが可能です 引数： func : 一度のみ実行したい処理が記載
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
javascript:正規化された(canonical)URLを取得する - サンプルコードと使用例
canonical属性とは／link rel="canonical"によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Moz - SEOとインバウンドマーケティングの実践情報 | Web担当者Forum http://web-tan.forum.impressrd.jp/e/2009/03/05/5112 そのため、その正規化されたURLは、その Web ページの作成者が、その Web ページをどんな URL として扱って欲しいのかを明示的に示したものです。 従って、Webページの URL をブラウザ側で動的に取得しようとした場合、location オブジェクトから取得する場合には、URL の表記に様々なバリエーションが生まれてしまいますが、正規化された URL を用いれば、そのコンテンツに対する URL を一つに限定できます。 正規化された URL は、次のように H
javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由
javascript:WebページのURLをlocationからではなく、HTML文書中のcanonicalから取得する理由 イントロダクション javascriptにて、ブラウザ側で動的にURLを取得する場合には、locationオブジェクトからではなく、ref 属性に "canonical" が指定された link タグの href からURLを取得する理由を記載します。 ただし、ref 属性に "canonical" が指定された link タグは、webページのHTML内に必ずあるものではないため、無い場合には代替手段として locationオブジェクトから取得するなどの方法を行う必要があります。 Webページの URL をブラウザ側で動的に取得しようとした場合に考慮すべきこと Webページの URL をブラウザ側で動的に取得しようとした場合、考慮すべきことがあります。 それは、W
知ってましたか？ セキュリティ業界が歴史に学べること
VAWTRAKの攻撃スクリプトは「きれいなコード」 「VAWTRAK観察日誌」と題するセッションでは、セキュアブレインのニシダマサタ氏が、2014年5月以降に国内で猛威を振るったオンラインバンキングマルウェア「VAWTRAK」の挙動を解析した結果を紹介した。 VAWTRAKは、いわゆるMan in the Browserの手法を使って不正送金を行うマルウェアだ。国内の大手銀行のオンラインバンキングサービスに始まり、地方銀行やクレジットカード会社、さらにはオンラインショッピングサイトへとターゲットを広げてきた。既に2万台以上のPCが感染したとも言われている。 ニシダ氏によるとVAWTRAKはやや複雑なアーキテクチャを取っており、基本的な設定情報を与えるC＆Cサーバーとは別に、マニピュレーションサーバーと呼ばれる攻撃用JavaScriptを配信するサーバーも用いる。マニピュレーションサーバーは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからのWebセキュリティ フロントエンド編 #seccamp
HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式
HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式
HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式