伦比亚大学的四位研究人员认为，可以通过CPU缓存来监视用户在浏览器中进行的快捷键及鼠标操作。

该漏洞对最新型号的英特尔CPU有效，比如Core i7。另外，它还需要运行在支持HTML5的浏览器上。总的来看，约有80%的台式机满足这两个条件。

哥伦比亚大学的四位研究人员设想了这种攻击：通过恶意网络广告向用户投放JavaScript，然后计算数据到达CPU三级缓存的时间，进而推断用户正在进行的具体操作。

研究人员提醒谷歌、微软、火狐、苹果尽快升级自家的浏览器，以封堵该新型攻击向量。不过目前还没有补丁发布。

这种攻击方式成本极低，特别适合三流黑客使用。使用这种弹窗攻击方式的人，可能和那些成天张贴网络小广告的是同一拨人，这样他们在烦你的同时还能追踪你。”

研究人员发表的论文中提到，受害者不需要做任何事情，只是访问带有恶意JS的网页就有可能遭到这种攻击。

这种攻击方式能够让一个进程收集与之并行的其它进程的信息。不管是进程、用户、还是虚拟机，只要和加载JS的进程公用同一个CPU，相关信息都会暴露。

一旦CPU加载了恶意的JavaScript进程，它就会将缓存装填为特定状态，然后等待用户进行某个操作，比如按下按键，进而用浏览器自带的高精度计时器记录操作信息通过内存块的时间。如果某个执行周期比其它的完成得更快，此时内存块就还在缓存里。有了这个信息，攻击者可以绘制内存对按下按键和鼠标移动的反应情况，进而重塑用户使用情景。

在带有i7处理器、运行OS X版本10.10.2的Mac上，对Firefox 35.0.1浏览器进行测试，恶意JS在一分钟内就能绘制出三级缓存的一半内容，15秒内即可绘制四分之一。

该研究本质上是很学院派的，并不容易实现。但它给我们了很好的启示，因为传统的边信道攻击都要求黑客从物理上接近其受害者，并有在本地执行任意代码的权限。（其他8种边信道攻击）

研究人员认为，这是第一种同时可以针对上百万目标的边信道攻击。任何使用新型英特尔CPU和HTML5浏览器的设备都有可能成为目标。AMD公司的CPU由于其缓存设计，对这种攻击基本免疫。

这种新型攻击给出了边信道攻击的一种前所未有的思路，同时也提醒各机构注意建立防御边信道攻击的算法和系统。

研究人员在浏览器打上补丁之前不会放出攻击的具体代码，他们建议，用户在使用浏览器时应当尽可能关闭不用的标签页，尤其是在进行重要操作时。

几年，国产桌面计算机快速发展，申威、龙芯、飞腾等CPU厂商纷纷推出了自己的桌面计算机，但用户体验、系统性能到底怎么样？相信大部分读者还不是很清楚。这里，我们找来了款国内比较知名CPU厂商龙芯、飞腾的台式机产品，看看体验到底如何。

飞腾在2015年发布了采用ARM指令集的FT-1500A系列处理器，龙芯则在去年发布了采用自主设计高性能GS464E微结构的最新一代3A2000处理器，其同频性能已接近Intel Ivy Bridge架构水平。

本文将龙芯、飞腾台式机相关性能的评测结果直接呈现出来，相信大家会对国产桌面计算机会有一个更深认识。

首先说明一下两个产品的配置情况。飞腾台式机使用FT-1500A处理器，主频1.8GHz，搭载银河麒麟操作系统。龙芯台式机使用的是LS-3A2000处理器，主频1GHz，从我们拿到的机器看，操作系统并没有明显的特征，好像是Fedora。

具体配置见下表：

我们将机箱打开，让大家直接感受一下两家机器内部的画面：

左为飞腾主板、右为龙芯主板

飞腾主板像个大男孩，个大，风扇启动时候呼呼生风，动力十足；龙芯主板则像个小姑娘，小巧、安静。

开机启动后，可以看到两家桌面上都预装了WPS办公套件、Firefox和Chrome浏览器。基本的办公软件环境都已搭建好了，可以直接进行办公及浏览网站。

飞腾台式机-桌面

龙芯台式机-桌面

介绍完基本的配置情况，我们将从开关机速度、文档打开速度、访存性能、浏览器性能、播放器等方面进行测试对比。

国产桌面产品的用户体验优劣主要体现在办公软件的使用、浏览器的性能、视频播放等功能上，当然，飞腾、龙芯作为CPU厂商，对CPU性能的对比必不可少。

我们使用了目前主流的测试CPU计算能力的基准工具specCPU对两家CPU进行测试，结果结果如下：

柱状图对比：红色龙芯，蓝色飞腾(单用户)

柱状图对比：红色龙芯，蓝色飞腾(四用户)

从SPEC2006上看，1.8G主频的飞腾各项数据更占优，SPEC2000上的数据，则相差不多。

从SPEC测试结果上看，两家不相上下，但在访存性能上，龙芯则占了上风。

Stream测试结果：访存性能龙芯明显高于飞腾。

用户在使用计算机时，开关机速度直接影响到用户的第一印象，下面我们来看一下龙芯和飞腾台式机的开关机启动速度对比结果：

从测试结果来看，开关机速度上两家各有优劣。

用户在使用计算机办公时，打开文件的快慢成为了用户对计算机的可用性的一个评判标准。我们用于测试的这两款机器都搭载的是主流国产办公软件：金山WPS。

从打开速度来看，飞腾打开【表格】的速度，比龙芯要快，特别是大文件【表格】；龙芯则在【文字】和【演示】上，快于飞腾。

越矮速度越快

测完了办公软件的使用情况，我们再来对比一下浏览器的性能：

在Firefox和Chrome浏览器上对HTML5兼容性进行了测试，从测试结果看，两家在兼容性上都不错，分值相差不大，都对相关软件进行了深度优化。

反而是在JS引擎性能上，某些数值出现了忽高忽低的有趣现象，在Firefox浏览器上飞腾SunSpider值很高，但在Chrome浏览器上龙芯的SunSpider值又变高了。

V8分值越高越好，SunSpider 分值越低越好

HTML5TEST ，555项，越接近555越好

说了这么多，我们来实际体验一下浏览器功能，通过龙芯、飞腾台式机预装的浏览器同时打开优酷网站，都能很顺畅地浏览网页，鼠标拖动也并无卡顿感，可以正常播放优酷视频内容，较为流畅。

龙芯电脑浏览优酷网站

飞腾电脑浏览优酷网站

在影音方面，测试了视频软件对不同格式（MKV、MP4、RMVB）的不同分辨率（720P、1080P）的视频素材播放流畅程度，这视频播放性能上，两家对不同视频格式和分辨率的播放效果基本相同，可以支持正常的视频播放。

通过对龙芯、飞腾桌面计算机的CPU、操作系统、办公软件、浏览器以及影音播放等功能的对比，基本的办公和浏览网页等功能流畅、稳定，具备了作为办公电脑使用的条件。不得不说，这几年，国产桌面计算机的用户体验和实际性能有了非常大的提升。

言

科技改变生活，科技的发展带来了生活方式的巨大改变。随着通信技术的不断演进，5G 技术应运而生，随时随地万物互联的时代已经来临。5G 技术不仅带来了更快的连接速度和前所未有的用户体验，也为制造业，微电子及集成电路发展带来了巨大的发展机遇和挑战。5G 技术商业实施过程中，5G 网络芯片面临低功耗、低延时、高可靠性和高精度的技术挑战。

本文将以大家熟悉的 CPU 为例，介绍以 HT 为基础，应用 JavaScript，WebGL 和 HTML5 技术开发的 CPU 监控系统。

在大型数据中心，实时监控 CPU 的温度，使用率等具有重要的意义。在服务器级别进行 CPU 温度监控，能够实时了解服务器 CPU 的温度，及时发现能效问题，防止出现服务延迟、服务器宕机，从而节约成本。实时监控 CPU 使用率等，能够实时查看服务器的 CPU 使用情况，合理分配服务器资源。

系统预览

整体效果

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

PC 端

移动端

Demo 中的场景是由 2D 和 3D 结合搭建而成，移动端的左上数据框部分显示的是手机陀螺仪数据，仅在移动端开启陀螺仪时显示。

功能实现

判断页面打开设备

在移动互联网时代，建设移动端和 PC 端网站具有同等重要的意义。与 PC 端相比，移动端能够实现随时随地的浏览，宣传和移动营销，因此 HT 设计和开发的系统都能很好地兼容移动端的访问和展示。

为了带来更好的用户体验，Demo 使用 Navigator 对象的 userAgent 属性，判断用户请求来自于 PC 端还是移动端，做不同的动画处理和数据展示。Navigator 对象包含了浏览器的信息，其 userAgent 属性则声明了浏览器用于 HTTP 请求的用户代理头的值。下面分别是在 Windows 端和 Android 端打印出的 userAgent 信息。

对应到代码中，基于 userAgent 属性信息，使用正则表达式去判断请求是否来自于移动端（主要考虑了 Android 端 和 IOS 端）。

isMobile() {
    return (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent));
}

动画原理

本 Demo 使用 HT 内置的 ht.Default.startAnim 函数来生成动画，此函数支持 Frame-Based 和 Time-Based 两种方式的动画。我采用的是 Time-Based 方法，即用户使用 duration 指定动画周期 (单位为毫秒)。easing 参数是用于让用户定义函数，通过数学公式控制动画，如匀速变化、先慢后快等效果。action 函数的第一个参数 v 代表通过 easing(t) 函数运算后的值， t代表当前动画进行的进度 [0, 1]，一般属性变化根据 v 参数进行。finishFunc 参数代表动画结束后的动作。本实例中的 startAnim 函数均采用了如下结构的 JSON 参数结构：

ht.Default.startAnim({
    duration: 500, // 动画周期毫秒数
    easing: function (t) {}, // 动画缓动函数
    action: function (v, t) {…} // 动画过程属性变化
    finishFunc: function () {} // 动画结束后调用的函数
});

旋转 180 度并抬高视角

3D 场景中的视角是由 eye (相机位置) 和 center (目标位置) 决定的，因此视角的变化改变这两个参数即可，本 Demo 使用 HT 内置的 moveCamera 方法实现。动画采用圆的参数方程计算 eye 的 x 值和 z 值，完成 180 度的旋转。在旋转过程中半径和角度都随着 t 的变化而变化，通过 ( t – 0.5 ) * Math.PI 使得角度变化范围为 [ - Math.PI / 2, Math.PI / 2] 。圆的参数方程如下所示：

旋转过程中，y 值也随 t 变化，完成 3D 场景视角的提升。finishFunc 参数用来定义该动画结束后继续调用的下一个动画，实现多个动画效果。

// 旋转 180 度并抬高视角
startRotationAnimation(onFinish) {
    let that=this;
    let r=849
    ht.Default.startAnim({
        duration: 6000,
        easing: function (t) { return t; },
        action: function (v, t) { // 圆的参数方程 半径和角度都在变
            let r1=(1 - t) * r;
            let angle=(t - 0.5) * Math.PI;
            let x=r1 * Math.cos(angle);
            let z=r1 * Math.sin(angle);
            let y=126 + (1968 - 126) * t * t * t;
            that.g3d.moveCamera([x, y, z]);
        },
        finishFunc: function () {
            if (!onFinish) {
                return;
            }
            onFinish.call(that);
        }
    });
}

在运行该动画时，需要延时调用另外两个动画完成 CPU 卡扣的抬起及消失，这样可使得动画错开执行，以达到更好的视觉效果。这部分使用 ht.Default.callLater(func, scope, args, delay) 延时调用动画函数，最后一个参数 delay 定义延迟的时间间隔。

ht.Default.callLater(()=> { this.startCap1Animation(); }, this, null, 500);
ht.Default.callLater(()=> { this.startCap2Animation(); }, this, null, 1000);

视角切换

本部分根据页面在 PC 端还是手机端打开，使用 moveCamera 方法分别切换到不同视角。以 PC 端视角切换为例，通过 getEye() 方法获取相机所在位置作为起始位置，终止位置为预定义的数值。通过 action 参数定义视角从起始位置到终点位置的切换。

// 视角切换
startMoveAngle3AnimationPC(onFinish) {
    let startPos=this.g3d.getEye();
    let endPos=[0, 728, 661];
    let that=this;
    ht.Default.startAnim({
        duration: 2000,
        easing: function (t) { return t * t; },
        action: function (v, t) {
            let x, y, z;
            x=startPos[0] + (endPos[0] - startPos[0]) * t;
            y=startPos[1] + (endPos[1] - startPos[1]) * t;
            z=startPos[2] + (endPos[2] - startPos[2]) * t;
            that.g3d.moveCamera([x, y, z]);
        },
        finishFunc: function () {…}
    });
}

CPU 外壳隐藏动画

为带来更好的视觉效果，视角切换的同时使用 ht.Default.callLater() 延迟调用 CPU 外壳隐藏动画。通过 getElevation() 获取外壳在 3D 坐标系中 y 的初始坐标，动画过程中使用 setElevation() 方法设置 y 坐标，动画结束后设置其可见属性为 false。代码如下：

easing: function (t) { return t * t; },
action: function (v, t) {
    let val=start + (end - start) * t; // start: 起始 y 坐标；end：终止 y 坐标
    that.hide1.setElevation(val);
}
finishFunc: function () {
    that.hide1.s('3d.visible', false);
}

芯片冒出及呼吸灯渲染

视角切换完成后，在 CPU 外壳隐藏的同时，CPU 内部结构逐渐冒出。与外壳隐藏相同，该部分也是通过setElevation方法完成。

action: function (v, t) {
    let e=start1Y + (end1Y - start1Y) * t
    that.up1.setElevation(e);
}

与芯片冒出动画间隔 1s, 呼吸灯渲染动画开启，使用 shape3d.blend 和 shape3d.opacity 分别设置呼吸灯染色和透明度。

easing: easing.easeBothStrong,
action: function (v, t) {
    let val=255 - (255 - endBlend) * t;
    val=val.toFixed(0);
    let blend='rgb(' + val + ',' + val + ',' + val + ')';
    let opacity=startOpa + (endOpa - startOpa) * t
    that.blend.s('shape3d.blend', blend);
    that.opacity.s('shape3d.opacity', opacity);
}

此部分动画采用 easeBothStrong 方式，即开始慢且减速, t 第四次方，代码实现如下：

easeBothStrong: function (t) {
    return (t *=2) < 1 ?
        .5 * t * t * t * t :
        .5 * (2 - (t -=2) * t * t * t);
}

PC 端结束动画

当动画结束后，PC 端重置 interactors，并启动线的流动及点位地面的旋转动画。

startAnimation() {
    setInterval(()=> {
        this.uvOffset=this.uvOffset + this.uvSpeed;
        this.line.s('top.uv.offset', [-this.uvOffset, 0]); // 线的流动
        this.rotationAngle=this.rotationSpeed + this.rotationAngle;
        this.flagReflection.setRotationY(this.rotationAngle); // 点位地面旋转
    }, 16.7);
}

移动端动画结束后，会读取手机陀螺仪数据并展示，具体原理及实现在手机传感器数据部分。

手机传感器数据

HTML5 提供了几个 DOM 事件来获得移动端方向及运动的信息，deviceorientation 提供设备的物理方向信息；devicemotion 提供设备的加速度信息。

处理方向 (orientation) 事件

要接收设备方向变化信息，需要首先注册监听 deviceorientation 事件：

window.addEventListener('deviceorientation', (e)=> {
    this.onOrientationEvent(e);
});

orientation 事件中 3 个重要值：

属性值　　含义DeviceOrientationEvent.alpha设备水平放置时，沿 z 轴的旋转角度，范围 [0,360] 。DeviceOrientationEvent.beta设备水平放置时，沿 x 轴的旋转角度，范围 [-180, 180] 。DeviceOrientationEvent.gamma设备水平放置时，沿 y 轴的旋转角度，范围 [-90, 90] 。

以下是事件处理的简单代码：

onOrientationEvent(e) {
    let alpha, beta, gamma, compass;
    let compassFlag=true;
    alpha=e.alpha ? e.alpha : 0;
    beta=e.beta ? e.beta : 0;
    gamma=e.gamma ? e.gamma : 0;
}

值得注意的是, IOS 和 Android 对手机硬件提供的 alpha 值不完全一样，所以需要借助 webkitCompassHeading 属性来判断是 IOS 还是 Android。当 webkitCompassHeading 不为空时，代表是 IOS 系统。

处理移动 (Motion) 事件

与方向事件处理类似，移动事件的处理也是首先注册监听 devicemotion：

window.addEventListener('devicemotion', (e)=> {
    this.dataTextarea.s('2d.visible', true);
    this.onMotionEvent(e);

});

移动事件包含 4 个属性：

属性值　含义DeviceMotionEvent.acceleration加速度，需要陀螺仪支持。DeviceMotionEvent.accelerationIncludingGravity重力加速度。DeviceMotionEvent.rotationRate旋转速度。DeviceMotionEvent.interval从设备获取数据的频率，单位为毫秒。

以下是事件的简单代码：

onMotionEvent(e) {
    let MAX1=2;
    let MAX2=5;

    this.acceleration=e.acceleration.x ? e.acceleration : {
        x: 0,
        y: 0,
        z: 0
    };
    this.accGravity=e.accelerationIncludingGravity.x ? e.accelerationIncludingGravity : {
        x: 0,
        y: 0,
        z: 0
    };
    this.rotationRate=e.rotationRate.alpha ? e.rotationRate : {
        alpha: 0,
        beta: 0,
        gamma: 0
    };
    this.interval=e.interval;

}

总结

芯片强则产业强。随着 5G 技术、物联网和人工智能的发展，集成电路作为最重要也是最基础的科技技术，必将获得更快地发展。随着国内信息产业的快速发展，自主研发一颗好的中国“芯”已经迫在眉睫。本文以大家熟知的 CPU 为例抛砖引玉，讲述微观世界 HT 的应用，如果你有更深入的需求和更好的想法，欢迎提出，我们进行更深入地讨论，也可以进行差异化业务定制。

2019 我们也更新了数百个工业互联网 2D/3D 可视化案例集，在这里你能发现许多新奇的实例，也能发掘出不一样的工业互联网：《分享数百个 HT 工业互联网 2D 3D 可视化应用案例 》，更多行业应用实例可以点击“阅读原文” 。