javascript优化--14模式2(DOM和浏览器模式)

远程脚本

XMLHttpRequest

JSONP

• 和XHR不同，它不受同域的限制；
  
• JSONP请求的可以是任意的文档；
  
• 请求的URL通常格式为http://example.js?calback=CallFunction

   <button id="server">Server play</button>
   <script>
   var start = {
       get: function (id) { 
           return document.getElementById(id);
       },
       setup: function () {
           this.get('server').onclick = this.remoteRequest;
       },
       remoteRequest: function () {
           var script = document.createElement("script");
           script.src = "server.js?callback=passObj";
           document.body.appendChild(script);
       },
   };
   var passObj = {
     serverPlay:  function (data) {
       console.log(data.foo);
     },
     num: 10
   }
  start.setup();
   </script>
//server.js
passObj.serverPlay({"foo": 'bar'});

框架

frame通常使用的情况

• 沙箱隔离。
  
• 引用第三方内容。
  
• 独立的带有交互的内容，比如幻灯片。
  
• 需要保持独立焦点和历史管理的子窗口，如复杂的Web应用。

配置js文件

合并脚本文件

• 需要增加一个自动合并脚本的步骤；
  
• 考虑到缓存效益，倾向于合并成两个文件，一个可能会改变，一个不会再修改；
  
• 对于文件最好是使用版本号或者其他内容来命名；

精简和压缩脚本文件

Expires报头

• 可以通过设置来增加重复访问时，请求文件依然再缓存的概率
  
• 这样做的缺点时如果希望修改文件，就需要重命名改文件；

使用CDN

载入策略

HTTP块

• 支持所谓的块编码，该技术允许分片发送网页
  
• 最简单的策略是将部分作为HTTP的第一块，而将网页中其他部分内容作为第二块

使用动态<script>元素无阻塞地下载

• 再main.js中插入文件

 var script = document.createElement("script");
   script.src = "later.js";
   document.documentElement.firstChild.appendChild(script);

• 这里有个问题，如果其他内敛脚本依赖于插入地脚本，那么将会报错；解决方式

//mian.js
var mynamespace = {
     inline_scripts: []
   }  
//内敛脚本
 mynamespace.inline_scripts.push(function() {
          console.log(a);
   }); 
//later.js
var a = 10;
(function() {
	var i, scripts =  mynamespace.inline_scripts, max = scripts.length;
	for(i = 0; i < max; i++) {
	  scripts[i]();
	}
})();

延迟加载

• 再页面加载完之后，载入外部文件地技术称为延迟加载；
  
• 通常将一大段代码分为两部分，一部分用于初始化页面时，一部分只在用户交互地时候使用；
  
• 一般用动态创建载入脚本地方式加载;

按需加载

//main.js
document.getElementById("server").onclick = function() {
     require('later.js', function() {
       alertFunc();
     }); 
   }

   function require(file, cb) {
     var script = document.getElementsByTagName('script')[0];
     var newjs = document.createElement('script');
     //ie
     newjs.onreadystatechange = function() {
       if(newjs.readyState == 'loaded' || newjs.readyState === 'complete') {
         newjs.onreadystatechange = null;
         cb();
       }
     }
     //other
     newjs.onload = function() {
       cb();
     }
     newjs.src = file;
     script.parentNode.insertBefore(newjs, script);
   }
//later.js
var alertFunc = function() {
  alert(0);	
}

预加载js

//main.js
  var preload;
   if(/*@cc_on!@*/false) { //使用条件注释的IE嗅探
     preload = function(file) {
       new Image().src = file;
     }
   } else {
     preload = function(file) {
       var obj = document.createElement('object');
       var body = document.body;
       obj.width = 0;
       obj.height = 0;
       obj.data = file;
       body.appendChild(obj);
     }
   }

  preload('later.html');
//later.html

<script type="text/javascript">
	  alert(0);		
</script>