ユーザーの体感速度を高めるためのJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第3回は、前回の「ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）」の続きです。この後編では、「ユーザーの操作を阻害しない」方法についてJavaScriptのシングルスレッドやイベントループを交えて解説し、HTML5のWeb Workersについても紹介していきます。 前回は、ユーザーの体感速度を向上させるための方法として、3つのうち「ページを素早く表示する」と「ユーザーに素早くインタラクションを返す」を解説しました。今回は、最後の「ユーザーの操作を阻害しない」について詳しく解説していきます。 ユーザーの操作を阻害しない JavaScriptによる処理が重くなると、いつまでも画面が更新されなかったり、ユーザーの操作が止まってしまったりということがあります。止まっている時間が長すぎると、ブラウザから応答がないという
ブラウザをテキストエディタっぽく使うサンプルを作ってみたら意外に単純にできますた
なんだかidea*ideaさんの たった一行でブラウザをシンプルなメモ帳に変える方法 という記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが…いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。 contenteditableとは 件の記事ではWebブラウザのURL欄に data:text/html, <html contenteditable> というのを入力して開くと、ブラウザ自体がメモ帳のようにテキスト入力できるようになるよ！というネタでして、確かにテキスト入力すると書き込めるようにはなってるんですが残念ながら保存はできません。 ブラウザの【保存】でもhtmlとしてしか保存できないしなんだかテキストは実態参照になって（chromeで保存した場合）たり…といった感じなのです。 そもそもこのコードの【contenteditable】っての自体
スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 なかなか良さそうだったので備忘録。iOSやAndroidなど、スマートフォンでのHTML5環境に合わせて作られた軽量モバイルフレームワークです。jQuery互換なので慣れてる方は使い方もすぐに覚えられると思います。特に軽量なのが嬉しいですね。 現状、jQueryを使うのであればスマートフォンにはjQuery Mobileという選択肢となりますが、やはりファイルサイズが気になります。そこで、jQueryをなんとか軽量に使おう、という動きが少し目立ってきました。 例えばzepto.js。がそうですし、jquipという、目的に合わせてjQueryを細分、モジュール化するライブラリなどもあります。 jQ.Mobiもその一つで、jQueryっぽく使えるHTML5環境のスマート
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた
jQueryプラグインtinyTips このマウスオーバーしたらツールチップがふわっと出てくるのはskuare.netさんで紹介されていたjQueryプラグインのtinyTipsを使用しています。 jQuery利用の軽量吹き出しJavaScript「tinyTips」｜skuare.net skuare.netさんのjQueryプラグイン紹介記事は、設置の仕方がシンプルに紹介してあって、いつも重宝しています。特にwebcre8のような、JavaScriptに明るくないデザイナーさんが参考にするにはぴったりのサイトだと思いますのでオススメしておきます☆ このプラグインを選んだ理由はツールチップの中に画像を含めたりすることもできるからですね。若干実装の仕方は手間があったりするのですが、画像を出すこともあるだろうなーと思ったので。 CSS/JSの記事ごとの実装(HTML5の場合) で、このページ
![[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた](https://cdn-ak-scissors.b.st-hatena.com/image/square/90b1317c0d6b9c6ecf1438c0de247763c5305c45/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fsingle-page-css-150x150.png)
HTML5 Canvasでフラクタル図形を描いてみた
はじめに 一年の1/4が終わってしまうと思ってるみなさんこんにちは。ダニーです。 今回はHTML5のCanvasの使い方を調べて Canvasでフラクタル図形を描いてみました。 デモ http://f96q.github.com/canvas_demo/ Canvasについて 詳しい仕様は http://dev.w3.org/html5/canvas-api/canvas-2d-api.htmlに載っているのでそちらを参照して下さい。 Canvasを作る <canvas id="main" width="500" height="500" ></canvas> canvasタグでcanvasを作ります。 コンテキストの取得 var canvas = document.getElementById('main'); if (canvas.getContext) { var ctx = can
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
