可观测性之浅析系统中sdk的不同引入方式的利与弊

眼看要下班了，但是今天一篇文章也没有写，草稿箱还有之前就想写的sdk的引入方式的详细文章，但完全写完还要好久，我可以先写一份浅析出来。于是就有了本文，本文写作耗时15分钟，阅读完需要10分钟。

本文首发于掘金，文章前提是不考虑sw的方式引入，同时不考虑在nginx等自动注入js脚本的方式，那么基本就是两种大的形式：cdn引入和本地引入

1. 其中cdn引入有两种：

• cdn同步
• cdn异步

2. 本地引入有两种：

• npm
• 本地js文件

参考知识

提前先补充一张图片

正文

npm引入

npm引入方式，其实是将sdk作为依赖包，编译到组件或者js中。

那么根据引入的时机的不同，所以编译到哪个js文件（因为组件也可能是打包成js文件），我们是不知道的，尤其是组件化诸如vue、react均带有自己的生命周期。

所以选择了这种引入方式的弊端，可能就是vue、react的代码引入之前，因为sdk收集数据的原理的不同，是可能无法收集错误、资源信息、用户行为，而且引入sdk后，还要有sdk的解析和初始化，这些都排在了html解析--》生命周期---》dom构建，尤其对于在csr（客户端渲染）的架构方式，大多以前端发起api请求数据后才会在页面渲染数据，更容易出现白屏或者性能问题，其中csr的渲染示意图如下图所示：

所以以vue为例，更推荐在dom构建之前，（如vue在beforeCreated这个生命周期），也就是更早的引入sdk并初始化，因为sdk能监听dom的变化，所以在dom形成前对dom进行监听，能收获更多、更准确的性能数据。

不过这种引入方式，有一个很大的好处，就是在引入包后，可以直接调用初始化方法，对页面性能的影响相对更小或者可以忽略，不过也要考虑业务场景，也不完全保证不影响页面性能。

cdn的引入方式

此处不做cdn的详细解释。

cdn异步

cdn引入方式，尤其是异步对页面影响最小，这种情况会出现如果调用初始化函数，则因为变量不存在会出现报错的场景，所以必须将初始化函数包裹在onReady函数中。

同时，在初始化前，虽然pv、uv等数据不受影响，但是因为sdk数据收集原理的缘故，尤其对于ssr（服务器渲染）的架构，这期间的错误、资源加载数据和用户行为肯定是无法收集的。ssr的示意如下图所示：

cdn同步

这种cdn引入方式，对于想要收集所有用户数据是最合适的，sdk会在同步下载后执行，保证收集所有的错误、资源、和用户行为。

不过这可能影响页面性能，这要根据业务场景来确定，更稳妥的是在入口页的head头部进行引用，不过好消息是，cdn都有一定的本地缓存，所以对页面性能的影响可以是微乎其微的。

其他

当然，也有一种方案，就是将sdk放到服务器或者本地文件中，这是最不推荐的业务场景，除了本身无法保证sdk的npm引入方式中增加包体积外等的弊端之外，还可能影响加载速度，而且错过了cdn的好处，不过对于私有化部署这种场景，不推荐以npm包的方式引入，可以选择将sdk在公共头部以js脚本的方式引入，同时根据需求采用同步或者异步方式。

总结

本文讲解了在可观测系统中引入rum sdk的不同方式以及利弊，可以按需权衡。