Webアプリで起きるクライアントサイドの性能劣化パターンとその改善チューニング
本連載は、パフォーマンスを主な対象としてシステム開発・運用の改善や設計を行うNTTデータのコンサルタントチーム「まかせいのう」のメンバーが、業務での体験やそこから得た知見を共有する『週刊まかせいのう』の記事を編集し転載するものです。今回は、クライアントサイド（Webブラウザ）の処理性能を劣化させるパターンと、それを改善し性能を向上させるチューニング方法を紹介します。 遅延原因がクライアント側にある場合の2つのパターン いわゆる「性能が出ない」「画面がもっさりして処理が遅い」という性能問題が発生した場合、必ずどこかに遅延を発生させているコンポーネント、いわゆる「ボトルネック」が存在します。それはWebサーバであったり、DBサーバであったり、はたまたネットワークやストレージであったりします。 一般的に、こうした遅延箇所の多くはサーバサイドに集中しています。サーバサイドでは、多くのユーザリクエス
これからのWebセキュリティ フロントエンド編 #seccamp
Editor's Notes・ChatWork でWebフロントエンドを担当 ブラウザ上で動くScalaを書いてます。 基本的にセキュリティとの関わりは趣味の範疇。MixiさんからAmazonギフト券もらったくらいの経験 ・きっかけは「趣味と実益のスタック破壊」 これは「いかに対象のコード上でバッファオーバーフローやヒープオーバーフローを起こすか」という視点で書かれた文書。非常に面白かった すでにサイトからは消えていてWebArchivesでのみ読める 「セキュリティが趣味になる」ということを知ったのは衝撃だった ・セキュリティ関係での活動はApplicationCache poisoningが主 ApplicationCache poisoningはけっこう昔から一般的に言われていることなので取り立てて言う話ではない DNS関係も好き今までセキュリティとは開発とは別に考えられていた。 現
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ページを開く
HTML/CSS/JavaScriptでタブコントロールを作ってみた(左タブ) - display:none方式
HTML/CSS/JavaScriptでタブコントロールを作ってみた(下タブ) - display:none方式
HTML/CSS/JavaScriptでタブコントロールを作ってみた(上タブ) - display:none方式