User:Cyde/Saving bandwidth

From Wikipedia, the free encyclopedia

If you look at the HTML source of any random page with an edit box you will see a lot of repeated code for the insertion of various special characters (these show up beneath the edit box and are generated by MediaWiki:Edittools). It's a lot of code, several kilobytes per page, and it is all transmitted wholesale each time anyone clicks on an edit link. This functionality isn't used by the vast majority of editors, and thus represents a lot of wasted bandwidth.

<a onclick="insertTags('¡','','');return false" href="#">¡</a>
<a onclick="insertTags('¿','','');return false" href="#">¿</a>
<a onclick="insertTags('†','','');return false" href="#">†</a>

An example of the code in question. This goes on for several hundred lines.

So, what to do about it? As far as I can see there are several possibilities, not all of which are mutually exclusive:

1. Remove the coding entirely.
2. Make it a user-selectable preference that defaults to off, so those of us who don't use it don't need all of the extra wasted bandwidth.
3. Move the code (generated by MediaWiki:Edittools) into a separate page that can be cached once, rather than having to retransmit it all for every edit page. For instance, the style sheets used by Wikipedia have about the same level of permanence as this edit box code, but they aren't retransmitted with every page load, thus saving lots of bandwidth.
4. Rather than displaying the code by default, just add a link beneath the edit box that loads the code on demand.

[edit] A proposed solution

[1]

Add the following to monobook.js:

//HTTP request stuff

if (document.implementation.createDocument) {
  var gml_xmlparser = new DOMParser();
}
 
function gml_XMLParse(string) {
  if (document.implementation.createDocument) {
    return gml_xmlparser.parseFromString(string, "text/xml");
  } else if (window.ActiveXObject) {
    var gml_xmldoc = new ActiveXObject("Microsoft.XMLDOM");
    gml_xmldoc.async = "false";
    ret = gml_xmldoc.loadXML(string);      
    if (!ret)
      return null;
    return gml_xmldoc.documentElement;
  }
  return null;
}

function HTTPClient() {
  var gml_http;
  if(window.XMLHttpRequest) {
    gml_http = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      gml_http = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        gml_http = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        gml_http = false;
      }
    }
  }
  return gml_http;
}

//Actual edittools d/l-er

var edittools_xmlhtpp;

function edittoolsLoaderStep1 (){
  inserttools = document.getElementById('edittools-inserter');
  inserttools.appendChild(document.createElement('br'));
  inserttools.appendChild(document.createTextNode('Please wait...'));

  edittools_xmlhttp = HTTPClient();
  if (!edittools_xmlhttp) return;
  edittools_xmlhttp.open('GET', 'http://en.wikipedia.org/w/index.php?title=Mediawiki:edittools/chars', true);
  edittools_xmlhttp.onreadystatechange = edittoolsLoaderStep2;
  edittools_xmlhttp.send(null);
}

function edittoolsLoaderStep2 () {
  if (edittools_xmlhttp.readyState != 4) return;
  xml = edittools_xmlhttp.responseText;
  doc = gml_XMLParse(xml);
  edittools = doc.getElementById('editpage-specialchars');
  inserttools = document.getElementById('edittools-inserter');
  inserttools.parentNode.replaceChild(edittools,inserttools);
}

The function edittoolsLoaderStep1() will find a <div> with the id 'edittools-inserter' and replace it with the div 'editpage-specialchars' from Mediawiki:Edittools/chars (move all the junk there).

A demo code that will create a link invoking the function:

//This will remove the edittools and replace with a link to dowload them

addOnloadHook(function (){
  edittools = document.getElementById('editpage-specialchars');
  if (!edittools) return;
  putthembacklink = document.createElement('a');
  putthembacklink.href = 'javascript:edittoolsLoaderStep1();';
  putthembacklink.appendChild(document.createTextNode('Insert edit tools here.'));
  putthemback = document.createElement('div');
  putthemback.id = 'edittools-inserter';
  putthemback.appendChild(putthembacklink);
  edittools.parentNode.replaceChild(putthemback,edittools);
});

With all the above code in a monobook and characters exported to /chars, Mediawiki:Edittools can be reduced to User:Misza13/Sandbox/edittools. (Or maybe there is a way to create a link to javascript without using the last function?) Миша13 22:26, 3 January 2007 (UTC)