标签：
首先，当你看到这篇文章时，我相信你已经是一个中级甚至是高级的前端开发了。
因为异步加载 javascript 这样的做法，在一些中小型项目几乎是看不到的。
而异步加载 javascript 归根到底，是为了性能优化，防止 JS 加载造成页面阻塞。
会注意到性能，说明你已经不再是一个停留在实现层面的前端开发了，而是一个有着更高追求的人。
在此，向所有有追求的人点赞~~~
昨天为公司的项目做前端优化，其中一项就是做脚本异步加载。
但是奇怪的是，异步加载的 js 出现在 chrome 开发者工具的 network 中，却没有出现在 source 里...
在上一家公司一直都是这样通过 jquery 的 ajax 方法来异步加载 js，但从没出现过这样的问题。
莫名之际，请教了上家公司的大神，上网查找了各种资料，始终无解。
就这样放弃了？NO，这样的优化相当有必要，怎可就这样轻易放弃。
继续观察项目中异步加载脚本的表现去...
首先可以确定的一点是，脚本是已经加载了的，并且成功执行。
关键是为什么没出现在 source 里，只出现在 network 中？
打开上一家公司的网站，观察了一下他们异步加载的脚本和我项目中异步加载脚本在 network 中的异同。
发现前者在 network 中的 type 是 script，而后者是 xhr，只有 type 为 script 的脚本，才会出现在 source 中。
OK，有线索了，接下来，便是各种尝试，设法将我们项目中异步加载进来的脚本的 type 弄成 script
尝试过程中，曾怀疑过 request header 和 response header，怀疑过服务端配置，各种怀疑...
但始终无解，最后在网上看到一种方式...
在脚本文件最开始或者结尾处加上下面一行代码：
//@ sourceURL = xxx.js
@和sourceURL之间一定要有空格，等号后面可以指定文件名，还可以指定域和目录，在没有指定域的情况下，脚本会出现在 (no domain) 下。
这样在开发者工具的 source 中就能找到这个脚本了。
OK，这确实不失为一个解决方案，但这样就需要在工作流中添加一步，为每个异步加载的脚本文件加上这句代码。
如果再要考虑代码所在的域和目录，工作流的处理就更复杂了。
再回想到上一家公司完全不需要做这些鸟事啊，我干嘛要受这罪啊。
于是呼~继续我的追求，各种尝试，各种找资料。
经历了长达2个小时的尝试无果，在我几近绝望要放弃之际。突然一个想法在我脑海萌生。
在我们的项目中，异步引入我上一家公司的线上脚本。
引入之后，发现 type 为 script，并在 source 中找到了它的影子...
此刻心中一万只草泥马奔腾而过，好家伙，难道你长得帅一些么？我就不信邪...
于是分析一下，我项目中的脚本，与上一家公司线上网站脚本的区别...
此刻，终于到了本文的干货时间了！我发现了 key point！他们的区别是，一个是同域，一个是跨域的！
当然这还只是怀疑阶段，实践是检验真理的唯一标准！
于是我自己搭了个另外的本地服务，模拟跨域，请求本地服务的脚本，NICE！成功在 source 中找到了它的身影。
最后的问题便是，如何在项目中实现跨域异步请求脚本？
方法一：搭建专门的前端静态资源域
这就是我上一家公司的做法，莫怪于当时各种脚本加载都能成功在 source 中找到并调试
现在的公司虽然也有这方面的规划，但现在还没到时候，随意，这个做法目前来说有点不现实。
于是就萌生了第二个方法~
方法二：使用 jquery ajax 方法的 crossDomain 属性，将它设置为 true
crossDomain 属性是 ajax 方法的冷门属性，知道它的人甚少，使用它的人就更是寥寥无几了。
毕竟跨域已经有知名的 jsonp 了，很少人会注意到这个暗淡的属性（试过面试的时候有人问到它，当时就跪了，回想起来，心中又是一万只草泥马奔腾而过...）
但每一样事物的存在，必有其道理。今天就是发光发热的日子了。
将 crossDomain 属性设置为 true 以后，ajax 请求会强制变成跨域请求！哪怕事实上是同域的！
OK，万事俱备，F5刷新页面。network 中显示脚本的 type 为 script，再看 source 里，成功找到异步请求的脚本，域和目录都对得上！
至此，通过使用一个属性这样简单的方式，把问题解决了！
虽然本文的篇幅和干货含量似乎有点不成正比。
但是，这方面的文章，我搜了很久，都没有找到相关的，说明对这个问题的研究大家做得比较少，又或者没有分享出来。
这样也就体现了这篇文章的价值所在！也是我解决这个问题用了足足半天时间的主因！
详述解决问题的过程，一方面是希望大家知道，研究结论来之不易。
另一方面是，希望能引发正在看文章的你的思考，自问一下，你在面对问题和解决问题的态度是怎样的，你觉得你做的够了么？
至少，我对于自己的评价是，能力还对不起自己入行时间，后面的路还很长，还需要很多努力~~
关于异步加载的 javascript 不出现在 chrome 开发者工具的 source 中的解决方法
标签：
原文地址：http://www.cnblogs.com/czf-zone/p/4821295.html
