做过WPO前端优化的人都了解什么叫JS阻塞：就是当浏览器下载外部引用的javascript代码的时候，会停止其他组件的下载和渲染（或内容呈现）。

原因可以参见网上这篇关于外部js阻塞的详细介绍

?

?

在大多数外贸B2C网站中，都可以看到“即时聊天 Live Chat”工具这个工具方便网站访客直接和客服人员沟通，第一时间激发出用户需求。网上也有免费的livechat工具。最近笔者留意的一个网站发生了“livechat的JS阻塞引发的网站可用性灾难”，现在简略介绍一下具体情况。

下图是livechat所在的位置

?

?

下图是这个网站的瀑布图。红色框框的部分是livechat的js代码加载。

可以看到网站加载没多久，livechat代码开始启动，livechat还没有加载完成之前，其他的所有组件都必须排队等着，啥都不能干。这个过程大概持续了453毫秒

?

453毫秒虽然不快，但还可以忍受。但在三天前，提供livechat服务的第三方服务器出了故障，导致运行上述两个组件需要等待30秒甚至更长，这就造成了大麻烦。整个玩站只能载入导航栏上面的部分，下面都是一篇空白，因为所有的其他组件都被livechat阻塞了。

灾难发生当天的营业额只有平时的1/3，用户平均页面浏览量跌去70%。

?

解决方法：

1. 尝试将livechat的js代码转移到页面最下方，但无法成功，因为livechat构建时就需要在前边调用，否则页面出错。

2. 采用异步调用的方式载入外域JS组件。

3. 关闭livechat，一切恢复正常。

?

反思：

使用外部调用的插件，要小心。我们经常会用到Google Analytics 或者Google Translate代码，这些服务因为是Google提供服务的，出故障的机会很小，载入时间也很快。但如果是国内用户调用GA或GT代码，可能因为伟大的WALL的原因，导