さくらのレンタルサーバーであれこれやってます。

prototype.js タブ切り替えを軽く！

kazuking searchのトップページでprototype.js でタブ切り替えを使っているんですが、

とにかく重い･･･。

あまりにも重過ぎてprototype.jsをgzip圧縮等と意味不明なこともしてみたりとあれこれ対策を講じていたんですが。結局のところkazuking searchではprototype.jsをタブ切り替えでしか使っていなかったので、prototype.jsを削ることにしました。

最新版のprototype.js（ver1.5.0）は72KBもあります。これだと気が遠くなりそうなので、所持しているver1.4.0（46.4KB）、ver1.3.1（28.3KB）の軽い方、ver1.3.1に手を付けることに。とは言えjavascriptの知識は哺乳瓶クラス。な～んとなく程度の知識なので削除→アップ→削除→アップ→修正→アップ･･･。この繰り返しで活動する事数時間。

≒3KBまで削ぎ落としました！

lightboxを軽量化させたliteboxみたいなもんですかね？一部書き換えた部分もありますが以前に比べかな～りスムーズに稼動してます。読み込みのスピードは相当あがったんではないでしょうか？prototype.tab.jsとでも言うのかな？（笑）


  2. var Class = {
  3.   create: function() {
  4.     return function() { 
  5.       this.initialize.apply(this, arguments);
  6.     }
  7.   }
  8. }

  10. var Abstract = new Object();

  12. Object.extend = function(destination, source) {

  13.   for (property in source) {
  14.     destination[property] = source[property];
  15.   }
  16.   return destination;
  17. }

  19. Function.prototype.bind = function(object) {

  20.   var __method = this;
  21.   return function() {
  22.     __method.apply(object, arguments);
  23.   }
  24. }

  26. function $() {

  27.   var elements = new Array();

  29.     for (var i = 0; i < arguments.length; i++) {

  30.     var element = arguments[i];
  31.     if (typeof element == 'string')
  32.       element = document.getElementById(element);

  34.     if (arguments.length == 1) 

  35.       return element;

  37.     elements.push(element);

  38.   }

  40.   return elements;

  41. }

  43. document.getElementsByClassName = function(className) {

  44.   var children = document.getElementsByTagName('*') || document.all;
  45.   var elements = new Array();
  46. 　　
  47. 　　for (var i = 0, len = children.length; i < len; i++) {
  48.     var child = children[i];
  49.     var classNames = child.className.split(' ');
  50.     for (var j = 0; j < classNames.length; j++) {
  51.       if (classNames[j] == className) {
  52.         elements.push(child);
  53.         break;
  54.       }
  55.     }
  56.   }
  57.   
  58.   return elements;
  59. }

  61. if (!window.Event) {

  62.   var Event = new Object();
  63. }

  65. Object.extend(Event, {

  66.   observers: false,
  67.   
  68.   _observeAndCache: function(element, name, observer, useCapture) {
  69.     if (!this.observers) this.observers = [];
  70.     if (element.addEventListener) {
  71.       this.observers.push([element, name, observer, useCapture]);
  72.       element.addEventListener(name, observer, useCapture);
  73.     } else if (element.attachEvent) {
  74.       this.observers.push([element, name, observer, useCapture]);
  75.       element.attachEvent('on' + name, observer);
  76.     }
  77.   },  

  79.   observe: function(element, name, observer, useCapture) {

  80.     var element = $(element);
  81.     useCapture = useCapture || false;
  82.     
  83.     if (name == 'keypress' &&
  84.         ((navigator.appVersion.indexOf('AppleWebKit') > 0) 
  85.         || element.attachEvent))
  86.       name = 'keydown';
  87.     
  88.     this._observeAndCache(element, name, observer, useCapture);
  89.   },

  91.   stopObserving: function(element, name, observer, useCapture) {

  92.     var element = $(element);
  93.     useCapture = useCapture || false;
  94.     
  95.     if (name == 'keypress' &&
  96.         ((navigator.appVersion.indexOf('AppleWebKit') > 0) 
  97.         || element.detachEvent))
  98.       name = 'keydown';
  99.     
  100.     if (element.removeEventListener) {
  101.       element.removeEventListener(name, observer, useCapture);
  102.     } else if (element.detachEvent) {
  103.       element.detachEvent('on' + name, observer);
  104.     }
  105.   }
  106. });

  108. /* prevent memory leaks in IE */

  109. Event.observe(window, 'unload', Event.unloadCache, false);

上記でタブ切り替えスクリプトに必要と思われるprototype.jsの役割は果たしております。もう少しスリム化 or 改変出来るところはあると思いますが、あればご指導コメント下さいませ。javascriptのLVは哺乳瓶クラスですので･･･。

CGI、PHP、JAVASCRIPT･･･。覚えることがいっぱいです（汗）

Hatena::Bookmark Technorati Favarites del.icio.us livedoor clip FC2ブックマーク Posted by kazuking on 2007年02月22日 javascript javascript

Trackbacks


Post a comment





Sponsored Link

Link

Web Tool

Banner Link

SEO Stats

デル株式会社 

Right Relation