get rid of most slowdown at notebook loading.

1) Do not setOption('mode',new_mode) on CM if new and old mode are the
   same. It triggert **a lot** of calculation of bounding box in the
   end.

2) Do **not** select cell when loading the notebook it triggers
   **a lot** of CM even that check visible things and so on and so
   forth. So add a option to add_cell_at_index not to select it

3) jQuery $.attr has some magics, but has a slight overhead on
   real native ELEM.setAttribute DOM method. Seem slight improvement
   when loads of PNGs on one page

IPython/html/static/notebook/js/cell.js

@@ -295,6 +295,7 @@ var IPython = (function (IPython) {
             this.code_mirror.setOption('mode', mode);
             return;
         }
+        var current_mode = this.code_mirror.getOption('mode', mode);
         var first_line = this.code_mirror.getLine(0);
         // loop on every pairs
         for( var mode in modes) {
@@ -303,8 +304,12 @@ var IPython = (function (IPython) {
             for(var reg in regs ) {
                 // here we handle non magic_modes
                 if(first_line.match(regs[reg]) != null) {
+                    if(current_mode == mode){
+                        return;
+                    }
                     if (mode.search('magic_') != 0) {
                         this.code_mirror.setOption('mode', mode);
+                        console.log('from',current_mode,'to',mode)
                         CodeMirror.autoLoadMode(this.code_mirror, mode);
                         return;
                     }
@@ -312,6 +317,9 @@ var IPython = (function (IPython) {
                     var close = modes[mode]['close']|| "%%end";
                     var mmode = mode;
                     mode = mmode.substr(6);
+                    if(current_mode == mode){
+                        return;
+                    }
                     CodeMirror.autoLoadMode(this.code_mirror, mode);
                     // create on the fly a mode that swhitch between
                     // plain/text and smth else otherwise `%%` is
@@ -328,6 +336,7 @@ var IPython = (function (IPython) {
                         );
                     });
                     this.code_mirror.setOption('mode', mmode);
+                    console.log('from',current_mode,'to', mmode)
                     return;
                 }
             }
@@ -339,7 +348,11 @@ var IPython = (function (IPython) {
         } catch(e) {
             default_mode = 'text/plain';
         }
+        if( current_mode === default_mode){
+            return
+        }
         this.code_mirror.setOption('mode', default_mode);
+        console.log('from',current_mode,'to', default_mode)
     };
 
     IPython.Cell = Cell;

IPython/html/static/notebook/js/notebook.js

@@ -789,8 +789,8 @@ var IPython = (function (IPython) {
      *
      * @return cell {cell|null} created cell or null
      **/
-    Notebook.prototype.insert_cell_at_index = function(type, index){
+    Notebook.prototype.insert_cell_at_index = function(type, index, opts){
-
+        var opts = opts || {select:false};
         var ncells = this.ncells();
         var index = Math.min(index,ncells);
             index = Math.max(index,0);
@@ -810,7 +810,9 @@ var IPython = (function (IPython) {
 
             if(this._insert_element_at_index(cell.element,index)){
                 cell.render();
-                this.select(this.find_cell_index(cell));
+                if(opts.select){
+                    this.select(this.find_cell_index(cell));
+                }
                 $([IPython.events]).trigger('create.Cell', {'cell': cell, 'index': index});
                 this.set_dirty(true);
             }
@@ -886,9 +888,9 @@ var IPython = (function (IPython) {
      * @return handle to created cell or null
      *
      **/
-    Notebook.prototype.insert_cell_below = function (type, index) {
+    Notebook.prototype.insert_cell_below = function (type, index, opts) {
         index = this.index_or_selected(index);
-        return this.insert_cell_at_index(type, index+1);
+        return this.insert_cell_at_index(type, index+1, opts);
     };
 
 
@@ -900,9 +902,9 @@ var IPython = (function (IPython) {
      *
      * @return the added cell; or null
      **/
-    Notebook.prototype.insert_cell_at_bottom = function (type){
+    Notebook.prototype.insert_cell_at_bottom = function (type, opts){
         var len = this.ncells();
-        return this.insert_cell_below(type,len-1);
+        return this.insert_cell_below(type,len-1, opts);
     };
 
     /**
@@ -1588,7 +1590,7 @@ var IPython = (function (IPython) {
                     cell_data.cell_type = 'raw';
                 }
 
-                new_cell = this.insert_cell_below(cell_data.cell_type);
+                new_cell = this.insert_cell_at_bottom(cell_data.cell_type,{select:false});
                 new_cell.fromJSON(cell_data);
             };
         };

IPython/html/static/notebook/js/outputarea.js

@@ -576,12 +576,13 @@ var IPython = (function (IPython) {
 
     OutputArea.prototype.append_png = function (png, md, element) {
         var toinsert = this.create_output_subarea(md, "output_png");
-        var img = $("<img/>").attr('src','data:image/png;base64,'+png);
+        var img = $("<img/>")
+        img[0].setAttribute('src','data:image/png;base64,'+png);
         if (md['height']) {
-            img.attr('height', md['height']);
+            img[0].setAttribute('height', md['height']);
         }
         if (md['width']) {
-            img.attr('width', md['width']);
+            img[0].setAttribute('width', md['width']);
         }
         this._dblclick_to_reset_size(img);
         toinsert.append(img);