全面指南：用户行为从前端数据采集到实时处理的最佳实践

于 2024-08-08 18:27:58 发布
阅读量1.1k 收藏 22
点赞数 36
分类专栏： 营销 流量运营 系统架构 文章标签： 前端 内容运营 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40726747/article/details/141033689
版权

引言
在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。

设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信息、设备信息、地理位置、页面信息等。这个设计应具有扩展性和灵活性，以便支持未来可能添加的新事件类型或字段。

以下是一个通用的ClickHouse表设计示例：

表名：user_events

CREATE TABLE user_events (
    -- 基础信息
    event_id        UInt64,                      -- 事件唯一标识符
    user_id         String,                      -- 用户ID
    event_type      String,                      -- 事件类型 (如 "click", "view", "purchase" 等)
    event_timestamp DateTime64(3),               -- 事件发生时间，精确到毫秒
    session_id      String,                      -- 会话ID，用于追踪用户在一个会话中的所有活动
    page_url        String,                      -- 事件发生的页面URL
    referrer_url    String,                      -- 事件发生前的来源页面URL

    -- 设备信息
    device_type     String,                      -- 设备类型 (如 "desktop", "mobile", "tablet")
    os              String,                      -- 操作系统 (如 "Windows", "iOS", "Android")
    browser         String,                      -- 浏览器类型 (如 "Chrome", "Safari")
    app_version     String,                      -- 应用版本号（如果是移动应用）

    -- 地理位置信息
    country         String,                      -- 国家
    region          String,                      -- 省/州/地区
    city            String,                      -- 城市
    ip_address      String,                      -- 用户IP地址

    -- 事件详细信息
    product_id      String DEFAULT '',           -- 产品ID (如事件涉及到某个产品)
    category_id     String DEFAULT '',           -- 分类ID (如产品或内容的分类)
    campaign_id     String DEFAULT '',           -- 广告活动ID (如涉及到营销活动)
    custom_data     String DEFAULT '',           -- 自定义数据，存储JSON格式的额外信息

    -- 索引和分区
    PRIMARY KEY (event_id),                      -- 主键，用于唯一标识每个事件
    INDEX idx_user_id (user_id) TYPE set(1024) GRANULARITY 3,  -- 基于用户ID的索引，加速查询
    INDEX idx_event_type (event_type) TYPE set(256) GRANULARITY 3,  -- 基于事件类型的索引
    INDEX idx_event_timestamp (event_timestamp) TYPE minmax GRANULARITY 1 -- 基于时间戳的索引
)
ENGINE = MergeTree()
PARTITION BY toYYYYMM(event_timestamp)           -- 按照事件发生的月份进行分区
ORDER BY (event_timestamp, user_id, event_type)  -- 排序键，优化查询
TTL event_timestamp + INTERVAL 1 YEAR DELETE     -- 数据存储期限为1年，自动删除过期数据
SETTINGS index_granularity = 8192;               -- 索引粒度设置

设计说明

  1. 基础信息

    • event_id: 用于唯一标识每个事件，通常是自增或UUID。
    • user_id: 用户的唯一标识符，可能是用户ID或匿名ID。
    • event_type: 描述事件类型，如点击、浏览、购买等。
    • event_timestamp: 记录事件发生的精确时间，使用DateTime64(3)支持毫秒级别的时间精度。
    • session_id: 用于关联同一会话中的所有事件。

  2. 设备信息

    • device_type, os, browser, app_version: 这些字段用于描述用户的设备、操作系统、浏览器等信息。

  3. 地理位置信息

    • country, region, city, ip_address: 用于记录用户的地理位置信息，可以帮助进行区域分析。

  4. 事件详细信息

    • product_id, category_id, campaign_id: 如果事件涉及到特定的产品、分类或营销活动，这些字段用于存储相关ID。
    • custom_data: 以JSON格式存储额外的自定义数据，提供灵活性以支持将来可能的新需求。

  5. 索引和分区

    • 索引设计通过对用户ID、事件类型和时间戳建立索引，加速常见的查询场景。
    • 分区按月份分区，便于管理和查询大规模数据集。
    • TTL 设置用于自动删除超过一年的旧数据，确保数据表的存储不会无限增长。

  6. 扩展性

    • 设计中保留了custom_data字段，以支持将来可能的额外数据字段。
    • 可以根据业务需求，进一步调整字段或添加新的字段。

这个表结构设计能够支持广泛的用户事件记录和查询需求，适用于各种分析场景。

用户的7日访问、流失等指标通常用于分析用户的活跃度、留存率和流失情况。这类指标可以帮助你理解用户在一段时间内的行为，进而优化产品体验。以下是20个常见的用户行为分析指标，以及相应的SQL查询示例。

1. 7日活跃用户数 (7-Day Active Users)

  • 指标描述：过去7天内至少访问过一次的用户数。
  • SQL示例：
    SELECT COUNT(DISTINCT user_id)
FROM user_activity
WHERE activity_date >= CURDATE() - INTERVAL 7 DAY;

2. 7日留存率 (7-Day Retention Rate)

  • 指标描述：在第1天注册的用户中，7天后仍然活跃的用户比例。
  • SQL示例：
    SELECT 
    (COUNT(DISTINCT t2.user_id) / COUNT(DISTINCT t1.user_id)) * 100 AS retention_rate
FROM 
    (SELECT user_id FROM user_activity WHERE activity_date = CURDATE() - INTERVAL 7 DAY) t1
LEFT JOIN 
    (SELECT user_id FROM user_activity WHERE activity_date = CURDATE()) t2
ON t1.user_id = t2.user_id;

3. 7日流失率 (7-Day Churn Rate)

  • 指标描述：在过去7天内不再访问的用户比例。
  • SQL示例：
    SELECT 
    (COUNT(DISTINCT t1.user_id) - COUNT(DISTINCT t2.user_id)) / COUNT(DISTINCT t1.user_id) * 100 AS churn_rate
FROM 
    (SELECT user_id FROM user_activity WHERE activity_date = CURDATE() - INTERVAL 7 DAY) t1
LEFT JOIN 
    (SELECT user_id FROM user_activity WHERE activity_date >= CURDATE() - INTERVAL 6 DAY) t2
ON t1.user_id = t2.user_id;

4. 活跃用户比率 (Active User Ratio)

  • 指标描述：活跃用户数与总用户数的比例。
  • SQL示例：
    SELECT 
    (COUNT(DISTINCT user_id) / (SELECT COUNT(DISTINCT user_id) FROM users)) * 100 AS active_user_ratio
FROM user_activity
WHERE activity_date >= CURDATE() - INTERVAL 7 DAY;

5. 新用户7日留存率 (New User 7-Day Retention Rate)

  • 指标描述：在过去7天内注册的新用户中，7天后仍然活跃的用户比例。
  • SQL示例：
    SELECT 
    (COUNT(DISTINCT t2.user_id) / COUNT(DISTINCT t1.user_id)) * 100 AS new_user_retention_rate
FROM 
    (SELECT user_id FROM users WHERE registration_date = CURDATE() - INTERVAL 7 DAY) t1
LEFT JOIN 
    (SELECT user_id FROM user_activity WHERE activity_date = CURDATE()) t2
ON t1.user_id = t2.user_id;

6. 7日回访率 (7-Day Return Rate)

  • 指标描述：过去7天内访问过的用户在7天后再度访问的比例。
  • SQL示例：
    SELECT 
    (COUNT(DISTINCT t2.user_id) / COUNT(DISTINCT t1.user_id)) * 100 AS return_rate
FROM 
    (SELECT user_id FROM user_activity WHERE activity_date = CURDATE() - INTERVAL 7 DAY) t1
LEFT JOIN 
    (SELECT user_id FROM user_activity WHERE activity_date = CURDATE() - INTERVAL 6 DAY) t2
ON t1.user_id = t2.user_id;

7. 7日内用户平均访问次数 (Average Visits in 7 Days)

  • 指标描述：用户在过去7天内的平均访问次数。
  • SQL示例：
    SELECT 
    AVG(visits) AS average_visits
FROM 
    (SELECT user_id, COUNT(*) AS visits 
     FROM user_activity 
     WHERE activity_date >= CURDATE() - INTERVAL 7 DAY 
     GROUP BY user_id) t;

8. 7日内总访问次数 (Total Visits in 7 Days)

  • 指标描述：过去7天内的总访问次数。
  • SQL示例：
    SELECT COUNT(*) AS total_visits
FROM user_activity
WHERE activity_date >= CURDATE() - INTERVAL 7 DAY;

9. 每日活跃用户数 (Daily Active Users, DAU)

  • 指标描述：每天访问过网站的独立用户数。
  • SQL示例：
    SELECT activity_date, COUNT(DISTINCT user_id) AS daily_active_users
FROM user_activity
WHERE activity_date >= CURDATE() - INTERVAL 7 DAY
GROUP BY activity_date;

10. 7日内新用户数 (New Users in 7 Days)

  • 指标描述：过去7天内注册的新用户数。
  • SQL示例：
    SELECT COUNT(*) AS new_users
FROM users
WHERE registration_date >= CURDATE() - INTERVAL 7 DAY;

11. 7日内用户参与度 (User Engagement in 7 Days)

  • 指标描述：用户在过去7天内的互动行为数量（如点击、点赞、评论等）。
  • SQL示例：
    SELECT COUNT(*) AS engagement
FROM user_engagement
WHERE engagement_date >= CURDATE() - INTERVAL 7 DAY;

12. 7日内流失用户数 (Churned Users in 7 Days)

  • 指标描述：过去7天内没有再访问的用户数。
  • SQL示例：
    SELECT COUNT(DISTINCT user_id) AS churned_users
FROM users
WHERE last_activity_date < CURDATE() - INTERVAL 7 DAY;

13. 7日内页面浏览量 (Page Views in 7 Days)

  • 指标描述：过去7天内的页面浏览总数。
  • SQL示例：
    SELECT COUNT(*) AS page_views
FROM page_views
WHERE view_date >= CURDATE() - INTERVAL 7 DAY;

14. 7日内平均页面浏览量 (Average Page Views in 7 Days)

  • 指标描述：用户在过去7天内的平均页面浏览次数。
  • SQL示例：
    SELECT AVG(page_views) AS average_page_views
FROM 
    (SELECT user_id, COUNT(*) AS page_views 
     FROM page_views 
     WHERE view_date >= CURDATE() - INTERVAL 7 DAY 
     GROUP BY user_id) t;

15. 7日内用户流失比率 (Churned User Rate in 7 Days)

  • 指标描述：过去7天内流失用户占总用户的比率。
  • SQL示例：
    SELECT 
    (COUNT(DISTINCT user_id) / (SELECT COUNT(DISTINCT user_id) FROM users)) * 100 AS churned_user_rate
FROM users
WHERE last_activity_date < CURDATE() - INTERVAL 7 DAY;

16. 7日内用户活跃天数 (Active Days in 7 Days)

  • 指标描述：用户在过去7天内的活跃天数。
  • SQL示例：
    SELECT user_id, COUNT(DISTINCT activity_date) AS active_days
FROM user_activity
WHERE activity_date >= CURDATE() - INTERVAL 7 DAY
GROUP BY user_id;

17. 7日内用户访问频率 (Visit Frequency in 7 Days)

  • 指标描述：用户在过去7天内的访问频率。
  • SQL示例：
    SELECT user_id, COUNT(*) / 7.0 AS visit_frequency
FROM user_activity
WHERE activity_date >= CURDATE() - INTERVAL 7 DAY
GROUP BY user_id;

18. 7日内用户点击次数 (Clicks in 7 Days)

  • 指标描述：用户在过去7天内的总点击次数。
  • SQL示例：
    SELECT user_id, COUNT(*) AS clicks
FROM user_clicks
WHERE click_date >= CURDATE() - INTERVAL 7 DAY
GROUP BY user_id;

19. 7日内用户参与度得分 (Engagement Score in 7 Days)

  • 指标描述：根据用户在过去7

在前端展现用户事件数据时，可以使用一些流行的开源库来可视化和展示这些数据。以下是几个适合的数据展示和可视化的开源库：

1. Grafana

  • 用途：Grafana 是一个开源的仪表盘工具，适用于监控和数据分析。你可以将 ClickHouse 作为数据源，并使用 Grafana 来创建实时仪表盘，展示用户事件数据。
  • 特点：
    • 支持多种图表类型：折线图、柱状图、饼图等。
    • 可自定义的仪表盘和告警机制。
    • 强大的查询编辑器，支持 SQL 查询。

2. Apache Superset

  • 用途：Apache Superset 是一个开源的数据探索和可视化平台，支持 ClickHouse 等多种数据库。它可以帮助你快速构建复杂的查询和数据可视化仪表盘。
  • 特点：
    • 直观的拖拽式界面，适合构建自定义报表和仪表盘。
    • 支持多种可视化组件：图表、地图、表格等。
    • 强大的 SQL Lab 功能，支持编写和运行 SQL 查询。

3. Metabase

  • 用途：Metabase 是一个简单易用的开源商业智能工具，可以帮助团队快速创建数据问答、图表和仪表盘，支持多种数据库。
  • 特点：
    • 无需编写代码即可创建问题和仪表盘，适合非技术用户。
    • 支持将查询结果嵌入到其他应用或网站中。
    • 可以与 ClickHouse 集成，并生成各种可视化图表。

4. Chart.js

  • 用途：Chart.js 是一个轻量级的 JavaScript 库，用于创建简单而灵活的图表。适用于直接在前端页面中展示用户事件数据。
  • 特点：
    • 支持常见的图表类型：折线图、柱状图、饼图、雷达图等。
    • 轻量级且易于集成，适合快速开发和展示。
    • 提供丰富的定制选项，适合多种数据可视化需求。

5. ECharts

  • 用途：ECharts 是一个由 Apache 维护的强大的数据可视化库，适用于展示复杂的交互式图表和大规模数据集。
  • 特点：
    • 支持多种复杂图表类型：热力图、关系图、地图等。
    • 强大的交互功能，适合展示用户行为和事件流。
    • 与 ClickHouse 集成后，可以轻松处理大规模数据展示。

6. D3.js

  • 用途：D3.js 是一个功能强大的 JavaScript 库，用于基于数据生成动态和交互式图表。适合自定义复杂的用户事件数据可视化。
  • 特点：
    • 强大的数据绑定和操纵功能，适合高度自定义的可视化需求。
    • 支持创建从基本到复杂的各种图表。
    • 与其他前端框架（如 React、Vue）无缝集成。

7. Redash

  • 用途：Redash 是一个开源的数据查询和可视化工具，支持多种数据源，包括 ClickHouse。适合创建共享的查询和数据仪表盘。
  • 特点：
    • 直观的查询构建界面，支持 SQL 查询。
    • 可以轻松创建和分享数据可视化结果。
    • 支持告警、嵌入式仪表盘等功能。

8. Kibana

  • 用途：Kibana 是 Elasticsearch 的可视化工具，但也可以通过插件支持 ClickHouse。适用于实时数据监控和分析。
  • 特点：
    • 强大的日志和时间序列分析能力。
    • 支持多种数据可视化和仪表盘创建。
    • 与 Elastic Stack 无缝集成，适合大数据环境。

选择建议：

  • 如果你需要快速构建可视化仪表盘，并且不想投入太多前端开发工作，Grafana、Metabase 或 Superset 是不错的选择。
  • 如果你需要在已有的网站或应用中嵌入可视化组件，Chart.js 和 ECharts 可能更适合。
  • 如果你需要高度定制化的可视化效果，D3.js 提供了最大的灵活性。

这些工具和库可以帮助你将用户事件数据以直观的方式展示出来，从而更好地理解用户行为并优化产品体验。

一、前端数据采集：捕捉用户行为

数据采集的第一步是在用户与网页互动时捕捉各种行为事件，如点击、页面浏览等。我们可以通过JavaScript代码监听这些事件并将数据发送到后端。

(function() {
    function sendEvent(eventType, additionalData = {}) {
        const eventData = {
            userId: getUserId(), // 获取用户ID的函数
            sessionId: getSessionId(), // 获取会话ID的函数
            eventType: eventType,
            pageUrl: window.location.href,
            referrerUrl: document.referrer,
            eventTimestamp: new Date().toISOString(),
            deviceType: getDeviceType(), // 获取设备类型的函数
            os: getOS(), // 获取操作系统的函数
            browser: getBrowser(), // 获取浏览器类型的函数
            ...additionalData // 额外的自定义数据
        };

        // 通过API发送数据
        fetch('https://your-api-endpoint.com/collect', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(eventData)
        }).catch(console.error);
    }

    // 示例：监听页面加载事件
    window.addEventListener('load', function() {
        sendEvent('page_load');
    });

    // 示例：监听用户点击事件
    document.addEventListener('click', function(event) {
        sendEvent('click', { element: event.target.tagName });
    });
})();

二、接收API：将事件数据传输到后端

前端数据采集后，我们需要通过API将数据传输到后端。这一步骤的API应能够高效接收和处理大量请求。

const express = require('express');
const kafka = require('kafka-node');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 创建Kafka Producer
const client = new kafka.KafkaClient({ kafkaHost: 'localhost:9092' });
const producer = new kafka.Producer(client);

app.post('/collect', (req, res) => {
    const event = req.body;

    const payloads = [
        { topic: 'user_events', messages: JSON.stringify(event), partition: 0 }
    ];

    producer.send(payloads, (err, data) => {
        if (err) {
            console.error('Failed to send message to Kafka', err);
            res.status(500).send('Internal Server Error');
        } else {
            console.log('Event sent to Kafka:', data);
            res.status(200).send('Event received');
        }
    });
});

app.listen(3000, () => {
    console.log('API server is running on port 3000');
});

三、Kafka与Flink：实时数据处理

数据通过API进入Kafka后，可以通过Flink进行实时处理。Flink是一个流处理框架，能够处理海量实时数据，并将处理结果存储或发送到其他系统。

1. 配置Kafka Source
import org.apache.flink.streaming.api.environment.StreamExecutionEnvironment;
import org.apache.flink.streaming.connectors.kafka.FlinkKafkaConsumer;
import org.apache.flink.api.common.serialization.SimpleStringSchema;
import java.util.Properties;

public class KafkaFlinkConsumer {
    public static void main(String[] args) throws Exception {
        StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironment();

        Properties properties = new Properties();
        properties.setProperty("bootstrap.servers", "localhost:9092");
        properties.setProperty("group.id", "flink_consumer");

        FlinkKafkaConsumer<String> consumer = new FlinkKafkaConsumer<>(
            "user_events",
            new SimpleStringSchema(),
            properties
        );

        env.addSource(consumer)
            .map(event -> {
                // 处理逻辑，如解析JSON并统计事件
                // 返回处理后的数据
                return event;
            })
            .print();  // 或将数据写入数据库、HDFS等

        env.execute("Flink Kafka Consumer");
    }
}
2. 实时处理逻辑

在Flink中，你可以根据具体需求实现各种数据处理逻辑。例如，实时计算用户的点击量、页面浏览量等。

四、总结

在这篇文章中，我们从前端数据采集开始，逐步深入到数据接收、Kafka传输和Flink实时处理。通过这样一个完整的数据处理链路，企业可以实时了解用户行为，从而更快地做出决策，优化产品体验。

这种架构设计不仅具有高扩展性和灵活性，还能够处理大量实时数据，为你的业务提供强大的数据支持。

数字沉思
关注
专栏目录
前端数据采集+行为上报（数据埋点）
05-09
前端数据采集 Collct.js
前端实时更新数据的几种方式
weixin_51225684的博客
05-29 1127
先说一下这个动态事件列表的需求：我们的服务器每隔 5 秒会产生一个新的事件，每个事件都有一个 id 字段以及 timestamp 字段，id 和 timestamp 字段都是该事件生成的时间戳，前端会以列表的形式展示目前服务端已产生的所有事件信息，后面当服务器产生新的事件时，前端会获取到最新的事件并添加到页面列表的末尾。一、轮询在本篇文章中我通过图解和实际代码给大家介绍了四种不同的和服务端保持数据同步的方案，看完本篇文章后，相信你后面再遇到类似的需求时，除了短轮询你会有更多的方案可以选择。
前端实现实时数据更新：EventSource
weixin_41897680的博客
06-25 1863
前端实现实时数据更新：EventSource
WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)
todoitbo的博客
09-09 4855
对比实现Websocket和sse推送给前端数据选择与实现，以及各自的弊端，适用场景等等
前端实时刷新数据
段王爷的博客
10-16 2952
前端页面实时刷新数据，在axios请求中设置刷新频率。
前端JS埋点自定义采集数据方案
qq_42513447的博客
08-29 855
统计某些特定页面的访问数据，进入该页面的入口，该页面下产品的加购、下单、支付数据，以此计算出加购率、下单率、支付率，分析转化率，形成图表等进行展示。查找了很多第三方数据追踪、统计工具，都没有完美适配需求的，最终敲定了原生实现的方案。在实现的过程中主要的难点就是如何正确记录这个操作链路以备后续提交数据，最终确定了一个方案，我称之为“入口生成id"，核心就是只要进入新入口就生成新的操作链路id。记录操作链路最终使用了indexedDB + localStorage + sessionStorage的方案……
十分钟掌握前端获取实时数据的三种主流方式
程序员，AI探索者
02-02 4293
前端获取实时数据的三种主流方式本文聊聊前端获取实时数据的三种主要方式。想象一下，我们在网上购物时，经常能看到最新的优惠信息弹出，或者在社交媒体上看到朋友的最新动态更新。这些都是因为后端在默默地向我们的页面推送了最新的消息。那么，这背后到底使用了什么样的技术呢？主要有三种方式：轮询（Polling）、网页套接字（WebSocket） 和服务器发送事件（Server-Sent Events, SSE）。下面，我们就来近距离接触一下它们。
全面前端开发指南：从基础到深入
03-28
这是一个非常全面的前端学习指南，涵盖了从HTML、CSS、JavaScript基础知识到各种前端框架。 内容概要： 本指南涵盖了从前端基础知识到各种前端框架、工具和技术的广泛范围。主要包括HTML、CSS、JavaScript的基础...
前端开发最佳实践：代码风格指南.zip
最新发布
08-18
史上最全web前端技术全套教程，包括： 前端API集成 前端基础知识 前端开发最佳实践 前端性能优化 前端构建工具 前端框架和库 前端测试工具 前端状态管理 等流行技术的系列教程
大数据开发入门指南：从概念到实践.docx
04-05
### 大数据开发入门指南：从概念到实践 #### 一、引言 随着数字化时代的到来，大数据成为了各个行业中至关重要的资源。对于企业而言，如何有效地处理和分析这些海量数据，成为了提升竞争力的关键因素之一。大数据...
websocket实现前端页面动态刷新数据库中数据
12-19
使用websocket+mysql+java8+Tomcat8技术，管理端动态添加数据到数据库，用户端实时刷新新添加的数据。
基于LabVIEW的的USB实时数据采集处理系统的实现实时数据采集处理.rar
03-27
在“基于LabVIEW的USB实时数据采集处理系统的实现实时数据采集处理.pdf”文档中，读者可以找到详细的设计步骤、实例代码和操作指南，涵盖从设备选择、配置，到程序编写、调试的全过程。无论是初学者还是经验丰富的...
前端（二十一）——WebSocket：实现实时双向数据传输的Web通信协议_websocket 前端通信
2401_84619145的博客
05-09 466
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。console.log(“接收到服务器发送的消息：” + message);console.log(“接收到客户端发送的消息：” + message);console.log(“接收到客户端发送的消息：” + message);console.log(“接收到客户端发送的消息：” + message);
ClickHouse深度解析
sanhongbo的博客
04-12 575
** 一、什么是ClickHouse？ ** ClickHouse由俄罗斯第一大搜索引擎Yandex于2016年6月发布, 开发语言为C++,ClickHouse是一个面向联机分析处理(OLAP)的开源的面向列式存储的DBMS，简称CK, 与Hadoop、Spark这些巨无霸组件相比，ClickHouse很轻量级,查询性能非常好，使用之后会被它的性能折服，非常值得安利。 二、适用场景 志数据行为分析 标签画像的分析 数据集市分层 广告系统和实时竞价广告 电商和金融行业 实时监控和遥感测量 商业智能 在线游戏
前端数据实时可视化
sdulibh的专栏
05-07 2033
光页面动态渲染就需要以require.js框架实现模块化异步加载JavaScript代码，再通过不同模块的组合调度展现可视化中的不同效果；另外要做出好看的地图线条以及点，则需要基于H5的Canvas技术，并利用Canvas的2D渲染引擎，调用OrderIndex系统的API获取实时数据，实时更新页面数据，并且需要最大程度优化Canvas对浏览器的性能，减少浏览器的内存泄露，才能长时间进行绘制渲染。
vue 前端记录用户访问过的页面，根据排序，获取用户常访问的页面
areyousmoking的博客
04-03 598
vue 记录用户访问过的页面，根据排序，获取用户常访问的页面
前端性能优化之数据采集Performance API实战篇
weixin_42974827的博客
08-31 2252
为了便于量化页面性能指标数据，量化页面性能优化措施达到的优化效果，以及向合作方提供准确可靠的性能数据报告，研发侧需要对现有性能数据采集的兼容性、功能性进行调研，便于后续制定数据采集方案。通用数据采集：页面导航类加载性能数据；页面所有资源的加载时间数据（这里的资源包括 css js img ajax请求等）；页面的渲染数据（包括fp、fcp）（2） 定制数据采集：页面可以根据业务需要使用性能API自行打点采集。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值