[请教+讨论] 前端做负载均衡，如何判断 css 成功加载？

一个前端自动切换负载均衡的方案，请教 V 友一下。

有个前端项目，部署了 N 台 CDN，每台机器都分配了独立域名：

cdn1.xxx.com

cdn2.xxx.com

...

步骤一：

进入页面执行前，先判断 Cookie 中是否有 CDN 变量，如果没有，从以上域名中随机挑出一个写入 Cookie 的 CDN 变量中。

步骤二：

加载 css 和 js 的时候，都是通过此类格式加载：

<script>document.write('<link href="'+CDN+'/css.css" />')</script> <script>document.write('<script src="'+CDN+'/js.js"><\/script>')</script> 

步骤三：

页面加载完成后，如果通过判断页面正常加载了，那么就不做任何操作。如果没有正常加载，则可能是该 CDN 挂掉了，然后重新挑 CDN 域名写入 Cookie，然后刷新页面重走步骤一，确保用户看到的是完整的页面。

这样做的好处：

1. 低成本的负载均衡

2. 能快速切换有问题机器，对于 DNS 负载均衡，生效有时间局限性。

3. 机器方面可减少人工运维，降低成本

坏处：

1. 每个页面都得加入一段冗余的判断

2. 增加 Cookie 和冗余的脚本浪费 HTTP 传输（当然，Cookie 也可以用 localStorage 解决）

3. CDN 域名更新起来会稍有些麻烦

那么重点来了，有哪些方法，可以用来判断 JS 或者 CSS 正常加载？

方案一，已投入使用：

加入 cdn.js 文件写入一行：

var CDN_LOADED=1; 

引用 cdn.js 后，使用判断

<script> if(typeof CDN_LOADED =='undefined'){ // 切换 CDN } </script> 

因为第一种每次都要多请求一个文件，所以不是特别理想。

引出方案二。

方案二，求大神指导：

<script>document.write('<link rel="stylesheet" type="text/css" href="'+CDN+'/css.css" />')</script> 

在样式表后，使用

var styles = document.styleSheets || document.styleSheetList; if(???) { // 切换 CDN } 

这个？？？ 地方，我试了各种

// 不行，rules 报错 if(styles[0].rules == 0) // 不行，rules 异常 if(typeof styles[0].rules != 'undefined') ... 

也试过 onerror 事件，似乎是没用的。。。

都不行，请问哪位大神可以指点一二？

要求：

• 不要依赖 css.css 里的 rules，只做最简单的判断，最好不要有循环去读 rules 里的内容。

P.S. 这种文案实际是可行的，好像应用的企业不多？