埋点统计优化，首屏加载速度提升

埋点统计在我们业务里经常有遇到，或者很普遍的，我们自己网站也会加入第三方统计，我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作，我们很少考虑到为什么这么做，直接同步加载不行吗？,统计代码会影响业务首屏加载吗？同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升，本文是一篇笔者关于埋点优化的笔记，希望看完在项目中有所思考和帮助。,最近遇到一个问题，先看一段代码。,我们会发现,打印的顺序结果是下面这样的：,冥思苦想,我们发现最后actd的结果是：,其实我本意想要的结果是先添加maic,Tom,最后添加pink,需求就是，必须先在这个ts.js执行后，预先添加基础数据，然后在其他业务app.js添加其他数据，所以此时，无论如何都满足不了我的需求。,试下想，为什么没有按照我预期的要求走，问题就是出现在这个onload方法上。,于是查询资料寻得，onload事件是会等引入的外部资源加载完毕后才会触发。,外部资源加载完毕是什么意思？,举个栗子,我在引入的index2.html引入index2.js,然后在引入脚本上写一个onload事件测试loadIndex2方法是否在我延时加载后进行调用的。,index2.js中写入一段代码：,最后看下打印结果。,,所以可以证实，onload是会等资源下载完了后，才会立即触发。,所以我们回头来看。,在浏览器的事件循环中，同步任务主线程肯定优先会先顺序执行。,从打开印---111---,,然后到onload此时不会立即执行。,遇到定时器，定时器设置了1s后会执行，是个宏任务，会放入队列中，此时不会立即执行。,然后接着会执行 <script async defer src="./js/app.js"></script>脚本。,所以此时，执行该脚本后，我们可以看到会先执行push方法。,所以我们看到pink就最先被推入数组中，当该脚本执行完毕后，此时会去执行定时器。,定时器里我们看到我们插入方式insertBefore,当插入时成功时，此时会调用onload方法，所以此时就会添加maic与Tom。,很明显，我们此时的需求不满足我们的要求，而且一个onload方法已经成了拦路虎。,那么我去掉onload试试，因为onload方法只会在脚本加载完毕后去执行，他只会等执行定时器后，成功插入脚本后才会真正执行，而此时其他脚本已经优先它的执行了。,那该怎么解决这个问题呢？,我把onload去掉试试,于是我改成了下面这样：,去掉onload后，我确实达到了我想要的结果。,最后的结果是：,但是你会发现：,,我先保证了window.actd添加了我预定提前添加的基础信息，但此时，这个脚本并没有真正添加到dom中，我们执行完同步任务后，就会执行app.js，当1s后，我才真正执行了这个插入的脚本，而且我统计脚本你会发现此时是先执行了app.js再加载tj.js的。,当执行setTimeout时，我们会发现先执行了内部脚本，然后才执行打印。,最后的结果，可以看到是这样的：,看到这里不知道你心里有没有一个疑问，为什么在动态插入脚本时，我要用一个定时器1s钟？为什么我需要用insertBefore这种方式插入脚本？，我同步方式引入不行吗？不要定时器又会有什么样的结果？,我们通常在接入第三方统计时，貌似都是一个这样一个insertBefore插入的jsdk方式(但是一般我们都是同步方式引入jsdk)。,,结果:,使用用定时器的(1622ms),,当我们用浏览器的Performance去比较两组数据时，我们会发现总长时间，使用定时器的性能大概比没有使用定时器的性能时间上大概要少50%,在summary中所有数据均有显示的提升。,不经感叹，就一个定时器这一点点的改动，对整个应用提升有这么大的提升，我领导说，快应用在线加载时，之前因为这个统计js的加载明显阻塞了业务页面打开速度，做了这个优化后，打开应用显著提升不少。,我们再继续上一个问题，为什么不同步加载？,我把代码改造一下,去除了一些无关紧要的代码：,结果,嘿，需求是达到了，因为我的业务app.js加的数据是最后一条，说明业务功能上是ok的，但是我们看下分析数据。,首先肯定是加载顺序会发生变化，会先加载tj.js然后再加载业务app.js,你会发现同步加载这种方式有个弊端，假设tj.js很大，那么是会阻塞影响页面首屏打开速度的，所以在之前采用异步，定时器方式，首屏加载会有显著提升。,,,我们发现tj.js与app.js相隔的时间很少，且我们从火焰图中分析看到，Summary的数据是1846ms。,综上比较，虽然同步加载依然比不上使用定时器的加载方式，使用定时器相比较同步加载，依然是领先11%左右。,在上面的代码中，我们多次看到async和defer标识，在之前文章中笔者有写过一篇你真的了解esModule吗,阐述一些关于script标签中type="moudle", defer,async的几个标识，今天再次回顾下。,其实从脚本优先级来看，同步的永远优先最高，当一个script标签没有指定任何标识时，此时根据js引擎执行来说，谁放前面，谁就会优先执行，前面没执行完，后面同步的script就不会执行。,注意到没有，我在脚本上有加async与defer。,在上面栗子中，我们使用insertBefore方式，这就将该插入的js脚本的优先级降低了。,我们从上面火焰图中可以分析得处结论，排名先后顺序依次如下：,1、setTimeout+insertBefore,执行顺序:app.js->tj.js,2、同步脚本加载,执行顺序:tj.js->app.js,3、不使用定时器+insertBefore,执行顺序:app.js->tj.js,当我们知道在1中，app.js优先于tj.js,因为insertBefore就是一种异步动态加载方式,举个例子：,执行关系就是1,3,2。,关于async与defer谁先执行时，defer的优先级比较低，会等异步标识的async下载完后立马执行，然后再执行defer的脚本，具体可以参考以前写的一篇文章你真的了解esModule吗。,[1]code example： https://github.com/maicFir/lessonNote/tree/master/javascript/21-js异步执行