GA源代码里的小技巧之preview和prerender

GA源代码里的小技巧之preview和prerender

作者前段时间在做类似Google Analytics(以下简称GA)的第三方监控脚本。所以对GA的前端代码做过调研,对GA的压缩后代码做了一定程度上的人肉美化。这里美化的是analytics.js的j41版本,本文提到的小技巧也是基于这个版本的js。

preview

Safari浏览器有个Top site功能,它会展示最长访问的几个页面的截图。示例如下:

Safari会去真正的加载解析这几个站点页面,然后截图并保存。当用户点开这些站点时会再次加载解析这些页面。

GA的功能是统计正常用户的访问情况,很明显这种情况已经不是正常的访问了,所以对这种情况做了过滤。凡是是预览(preview)请求都不会执行自己的主要逻辑。示例代码如下:

function isPreviewLoad(win) {
    win = win || window;
    var api = 'navigator';
    return win[api] && win[api].loadPurpose === 'preview';
};

if (isPreviewLoad()) {
    // TODO
}

prerender

W3C标准(WD)中有个prerender特性。如果在指定页面index.html的HTML代码头部中加入如下的meta标签:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<!-- 预渲染 -->
<link rel="prerender" href="./article.html">
</head>
<body>
<a href="./article.html">文章地址</a>
<body>
</html>

那么浏览器在加载index.html的时候,会预先加载渲染article.html页面,但是不展现。当浏览器真正点开页面中article.html页面的地址时,浏览器才会再真正的展现这个页面。不过用户也有可能不再点击article.html的地址,而是直接离开了或是跳去别的页面。目前IE>=11.aspx)、Chrome>=13、Opera>=15都支持了这个特性。

GA为了避免发送无用的统计,也过滤掉了预渲染的情况,在页面真正展示的时候再执行自己的主逻辑。它通过浏览器提供的Page Visibility API来判断当页面处于的状态。如果页面是预渲染,那么页面渲染时document.visibilityState的值为prerender。然后监听visiableChange事件,当页面可见之后开始执行业务主逻辑。

综合previewprerender两种情况,我们可以用如下代码来判断是否需要执行自己的业务主逻辑:

function start(win, main) {
    if (isPreviewLoad(win)) {
        return;
    }

    var doc = win.document;
    var executed = false;
    var isPrerender = function () {
        return doc.visibilityState === 'prerender';
    };
    var cb = function () {
        if (!executed && !isPrerender(win)) {
            executed = true;
            main();
            // 解除事件监听
            off(doc, 'visibilitychange', cb);
        }
    };

    if (isPrerender(win)) {
        // 添加事件监听
        on(doc, 'visibilitychange', cb);
        return;
    }
    main();
}
start(window, function () {
    // TODO 业务主逻辑
});

参考资料:

  1. Safari Top Sites Preview
  2. CanIUse
  3. IE Prerender and prefetch support.aspx)
  4. W3C Resource Hints Spec
  5. Prefetching, preloading, prebrowsing

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=t0ien3e6ws9r

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

Windows Server 2008企业64位版防火墙添加端口的方法

原始地址:http://www.veryhuo.com/a/view/48280.html

28020
来自专栏FreeBuf

漏洞追踪:如何检查并修复GHOST(幽灵)漏洞

编号CVE-2015-0235的GHOST(幽灵)漏洞是Qualys研究员发现的一个Linux服务上非常严重的安全漏洞,可以被利用来远程代码执行及本地权限提升。...

211100
来自专栏北京马哥教育

Linux 运维必备的 13 款实用工具,拿好了~

本文介绍几款 Linux 运维比较实用的工具,希望对 Linux 运维人员有所帮助。 1. 查看进程占用带宽情况 - Nethogs Nethogs 是一个...

45280
来自专栏开源项目

听说,你也在做日志分析? | 码云周刊第 37 期

— 01 — 项目名称:赛克蓝德日志分析软件 seci-log ? 项目简介: 赛克蓝德日志分析软件,主要对日志进行收集,格式化,然后进行分析,日志可以是系...

51290
来自专栏me的随笔

Redis 缓存设计原则

本文为作者原创,版权归作者雪飞鸿所有。 转载必须保留文章的完整性,且在页面明显位置处标明原文链接。

29140
来自专栏杨建荣的学习笔记

Oracle Data Guard压缩归档效果对比(r12笔记第26天)

Oracle Data Guard对归档的传输提供了很多辅助的选项,这个可 以通过log_archive_dest_x看到。 一般说这类的优化,如果...

36970
来自专栏个人技术分享

Android module发布管理插件

最近对发布Android SDK到jcenter的流程有点想法,历经一点点艰辛,做了一款Android Studio插件,希望能够使发布流程更简单友好。

18800
来自专栏DeveWork

为你的WordPress 主题添加结构化数据/丰富文本摘要,高亮搜索结果(下)

为了方便写文章与读者阅读,特将本文分为上下两个部分。上一篇请点击这里查阅,这一篇接着上一篇来。特别提醒,要查看添加后的效果,可以使用谷歌的 结构化数据测试工具 ...

21550
来自专栏CSDN技术头条

Redis Cluster探索与思考

Redis Cluster的基本原理和架构 Redis Cluster是分布式Redis的实现。随着Redis版本的更替,以及各种已知bug的fixed,在稳定...

38950
来自专栏IMWeb前端团队

分享几个便利的工具软件

clover 官方网址:http://cn.ejie.me/ 方便的 Tab 页功能 要掌握功能强大,操作简单的标签页,只需记住Ctrl+T新开页面,Ctrl+...

20360

扫码关注云+社区

领取腾讯云代金券