JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
How To: Resizeable Background Image | CSS-Tricks
If you are looking for how to do FULL SCREEN BACKGROUND IMAGE, go here. My friend Richard recently came to me with a simple CSS question: Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
livedoor Techブログ : livedoor Blog のニューススクロールが重い件
こんにちは。ブログ担当の nabokov7 です。 今日は、このブログの右上 ↑ にも表示されている、ニュースをスクロールさせる js の処理が重かったのを軽くしました、という話です。 livedoor Blog 開発日誌の方に書いても良かったのですが、多少技術的な話もあったのでこちらに。 問題は、Firefox で、特に長いページ (例: http://blog.livedoor.jp/ld_directors/ ) を閲覧している際に CPU使用率が異常に高くなる、というものでした。 前からある程度問題は認識していたのですが、Firefox 使用、長いページ、など、ある程度条件が重ならないと再現しなかったこともあり、btsの優先度はあまり高く設定されていませんでした。 が、気付くとこちらで問題に挙げられていたり、ついには二列向こうの同僚のところでも実害が発生している様子。 ちょ、エント
複数のJavaScriptファイルを１コネクションでスッキリ一括読み込みする方法:phpspot開発日誌
IEで透過PNG画像の透過処理を簡単に行うJavaScriptライブラリ「alphafilter.js... 次の記事 ≫：JavaScriptで3Dオブジェクトを作成するためのライブラリ「JS3D」 Supercharged Javascript Pre-compression also doesn't solve a multiple connection issue. 複数のJavaScriptファイルを１コネクションでスッキリ一括読み込みする方法。 HTMLでの読み込みタグも次のようにスッキリできます。 <!-- Namespace source file --> <script src = "yahoo.js" ></script> <!-- Dependency source files --> <script src = "dom.js" ></script> <script
GitHub - mrclay/minify: Combines. minifies, and serves CSS or Javascript files
The original authors no longer recommend using Minify, especially previous versions, which were not designed to handle modern JS and CSS syntax. Instead, use an up-to-date performance measurement tool like Lighthouse and follow its recommendations. In 2010, Minify offered a fine improvement for some websites, but browsers and HTTP servers are now much better, and Minify may offer only a marginal p
css + javascript の質問です。 javascript 中で css (外部ファイル) を読み込みたいと思っています。…
css + javascript の質問です。 javascript 中で css (外部ファイル) を読み込みたいと思っています。 そこで以下のような javascript を書いてみました。 var cs = document.createElement("link"); cs.rel="stylesheet"; cs.href="http://foobar.com/styles-site.css"; cs.type="text/css"; document.body.appendChild(cs); IEなどではうまく動くのですが、残念ながら Safari だけはスタイルシートを読んでくれません・・・。 document.write('<link src=... >'); とすれば大丈夫なのですが、できれば document.write は使いたくないのです。 Safari でも使え
CSSをURIのクエリーで切り替えるJavaScript - KAZUMiX memo
2008-03-06 追記: jQuery無しで動くように修正しました あるといいかもと思って試しに作ってみたら、IE*1の印刷対応に端を発する問題でえらい苦労しました。苦労話は後回しにするとして、次が動作サンプルページとサンプルコードです。（要jQuery。要素の取得で楽してコードを短くするために使っています） CSSをクエリーで切り替えるJavaScript 動作サンプルページ (function(){ //クエリーにstylesheetがあれば切り替え関数呼び出し if(location.search.match(/\bstylesheet=([\w]+)/)){ var titleValue = RegExp.$1; changeStyle(titleValue); } // CSS切り替え関数 // 引数titleValueと一致したtitle属性を持つlink要素を有効にする
私の出会ったバグ達 - ブラウザ依存 - AUSGANG SOFT
最近、Javascriptで開発していて、ブラウザ依存のバグに出会うことが多いので、実例をメモ。 原因と対策は、リンク先を参照されたし。 ifreame上のinput、textareaからキャレットが消えるバグ Windows版Firefoxで発症。 実例 ↑の場合は、背景のオーバレイDIVを消したら、治った。 Bug 226933 - Caret vanishes in input form elements over iframe - lambda {|diary| lambda { diary += 1 } }.call(hatena) http://d.hatena.ne.jp/winebarrel/20070814/p1 透明のオーバレイDIVを表示すると勝手にFlashが消えるバグ Mac版Firefoxのみ発症。 透明度が関連するので、DIVのフェードイン、フェードアウトのエ
「YUI Compressor 2.0」がリリース - JavaScriptとCSSの両方を圧縮 | エンタープライズ | マイコミジャーナル
Yahoo!のJulien Lecomte氏は27日(米国時間)、自身のブログにおいてYUI Compressor(The Yahoo! JavaScript Compressor)の最新版となる「YUI Compressor Version 2.0」を発表した。 YUI CompressorはJavaで開発されたJavaScriptソースコードの圧縮アプリケーションである。今月16日(米国時間)にYUI Compressorが発表されたばかりだが、その2週間後に最新版となるバージョン2.0が公開されたことになる。 バージョン2.0ではいくつかのバグが修正されているほか、コミュニティから提案されたいくつかの機能拡張が実施されている。例えば、正規表現に基づいたCSS最小化機能も追加されている。このためバージョン2.0ではJavaScriptが圧縮できるのみならず、CSSファイルの圧縮も実施さ
/IE7/
IE7.js is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6. This project is now hosted on google code: http://code.google.com/p/ie7-js/
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
12 のレイアウトを切替可能なテンプレート
1つのテンプレートで 12度おいしい XHTML + CSS テンプレートを公開してみたいと思います。といっても、ごく普通のテンプレートに CSS 切り替え機能を付けただけなんですが、Blog や Webサイトを作られる際のベースとして役立てて頂けたらうれしいです。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 50KB） 8/10 追記 初期に配布したテンプレート内に、結構な量の誤字等がありましたので、現在の最新版を下記からダウンロードしてください。 では使い方などの説明を。 ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。 index.html （XHTML テンプレート） css （CSS ファイル格納フォルダ） img （画像ファイル格納フォルダ） js （JavaScript ファイル格納フォルダ） 基本的に
Make your pages load faster by combining and compressing javascript and css files | rakaz
Make your pages load faster by combining and compressing javascript and css files As some of you may know, I am currently working on a content management system. Although I am not able to share all of the code – it is proprietary after all – I already made one debugging tool public. This tool can be used to test some common techniques which decreases the bandwidth generated by feed consumers. Toda
CSS Dock Menu
May 08, 2007 17,799 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer s
JavaScriptとCSSを圧縮するPHPスクリプト「jscsscomp」:phpspot開発日誌
jscsscomp - Google Code jscsscomp is a PHP script what compress JavaScript and CSS files when they are requested from the server. JavaScriptとCSSを圧縮するPHPスクリプト「jscsscomp」。 次のようにJavaScriptを圧縮できるPHPクラスが提供されています。 <script src = "/jscsscomp/jscsscomp.php?q=dom.js" ></script> <script src = "/jscsscomp/jscsscomp.php?q=yahoo.js, event.js, effects/dragdrop.js, slider.js"></script> このように、q=<スクリプトファイル> のように指定す
404 Blog Not Found:javascript CSS - google-code-prettifyの導入
2007年03月26日16:00 カテゴリAnnouncementLightweight Languages javascript+CSS - google-code-prettifyの導入 google-code-prettifyを本blogでも導入しました。 google-code-prettify - Google Code ex: 404 Blog Not Found:CGIの神話と現実 404 Blog Not Found:たらいを回すならHaskell cf: 404 Hatena::Diary not Found - [Hatena::Diary] スーパーpre記法のテスト ここでは、Livedoor Blogでの具体的な導入法を解説します。 必要なファイルの入手とインストール 以下のファイルを入手して、アクセスできるようにしておきます。 http://google-cod
jQuery Pseudo Plugin (:before and :after in Internet Explorer)
A jQuery plugin for :before and :after in Internet Explorer. Pseudo-who? CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta lov
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった3行加えるだけで、ページの読み込み時間を劇的に改善させる『class.compressor.php』 - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
はてなブログ | 無料ブログを作成しよう
