Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

告别head标签中加载js sdk进行白屏时间打点吧~ #50

Open
jiangjiu opened this issue Sep 10, 2018 · 0 comments
Open

告别head标签中加载js sdk进行白屏时间打点吧~ #50

jiangjiu opened this issue Sep 10, 2018 · 0 comments
Labels
summarize

Comments

@jiangjiu
Copy link
Owner

告别head标签中加载js sdk进行白屏时间打点吧~

背景

很久很久以前，我们监控线上业务的白屏时间，是通过在head标签中加载一段js sdk，然后打点记录白屏时间的。

那个时候没有更现代的统计API，而且body下面就是html的描述，所以这样做确实可以统计出白屏时间。

问题

sdk的引入本身影响了白屏时间

3fc2b5c3fe0042d609ddf19b6ea4d64f

可以看到，在弱网3G情况下，sdk的下载和执行就要600ms，公网的sdk通常都不会设置强缓存，这代表每次访问都会让白屏时间拖慢600ms。

测出来的时间，自然也是不准的。

前端渲染的场景下，不准

...
<body>
    <div id="app"></div>
...

相信这段html大家都不陌生了，因为前端渲染基本要依赖js的下载和执行，一个前端框架的解析和执行就要几十毫秒至几百毫秒不等，在head中打点并不是真正的白屏时间了。

现代环境，没有意义

是的，在现代场景下，可以使用performance.timing统计所有你需要的时间。
-w707

不但够精准，而且不会影响首屏性能。

结论

head加载SDK已经过气了🙅‍♂️，现代场景，请使用performance吧🌈。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
summarize
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jiangjiu