言

工業(yè)互聯(lián)網(wǎng)，物聯(lián)網(wǎng)，可視化等名詞在我們現(xiàn)在信息化的大背景下已經(jīng)是耳熟能詳，日常生活的交通，出行，吃穿等可能都可以用信息化的方式來(lái)為我們表達(dá)，在傳統(tǒng)的可視化監(jiān)控領(lǐng)域，一般都是基于 Web SCADA 的前端技術(shù)來(lái)實(shí)現(xiàn) 2D 可視化監(jiān)控，本系統(tǒng)采用 Hightopo 的 HT for Web 產(chǎn)品來(lái)構(gòu)造輕量化的 3D 可視化場(chǎng)景，該 3D 場(chǎng)景從正面展示了一個(gè)地鐵站的現(xiàn)實(shí)場(chǎng)景，包括地鐵的實(shí)時(shí)運(yùn)行情況，地鐵上下行情況，視頻監(jiān)控，煙霧報(bào)警，電梯運(yùn)行情況等等，幫助我們直觀的了解當(dāng)前的地鐵站。

系統(tǒng)中為了幫助用戶更直觀友好的瀏覽當(dāng)前地鐵站，提供了三種交互模式：

• 第一人稱模式 -- 操作就類似行人或車在行進(jìn)的效果，可以通過(guò)鍵盤鼠標(biāo)控制前進(jìn)后退。
• 自動(dòng)巡檢模式 -- 該模式下用戶不需要任何操作，場(chǎng)景自動(dòng)前進(jìn)后退來(lái)巡查當(dāng)前地鐵站的場(chǎng)景。
• 鼠標(biāo)操作模式 -- 左鍵旋轉(zhuǎn)場(chǎng)景，右鍵平移場(chǎng)景。

本篇文章通過(guò)對(duì)地鐵站可視化場(chǎng)景的搭建，動(dòng)畫代碼的實(shí)現(xiàn)，交互模式的原理解析，以及主要功能點(diǎn)的實(shí)現(xiàn)進(jìn)行闡述，幫助我們了解如何使用 HT 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的地鐵站可視化。

界面簡(jiǎn)介及效果預(yù)覽

地鐵運(yùn)行效果

地鐵從站外開到站內(nèi)的效果為透明度逐漸增加，速度逐漸降低。

漫游效果

上述為自動(dòng)巡檢的漫游效果，場(chǎng)景自動(dòng)進(jìn)行前進(jìn)旋轉(zhuǎn)。

監(jiān)控設(shè)備交互效果

當(dāng)我們點(diǎn)擊場(chǎng)景中的監(jiān)控設(shè)備時(shí)可以查看當(dāng)前設(shè)備的運(yùn)行情況，運(yùn)行數(shù)據(jù)等信息。

場(chǎng)景搭建

該系統(tǒng)中的大部分模型都是通過(guò) 3dMax 建模生成的，該建模工具可以導(dǎo)出 obj 與 mtl 文件，在 HT 中可以通過(guò)解析 obj 與 mtl 文件來(lái)生成 3d 場(chǎng)景中的所有復(fù)雜模型，當(dāng)然如果是某些簡(jiǎn)單的模型可以直接使用 HT 來(lái)繪制，這樣會(huì)比 obj 模型更輕量化，所以大部分簡(jiǎn)單的模型都是采用 HT for Web 產(chǎn)品輕量化 HTML5/WebGL 建模的方案，具體的解析代碼如下：

 1 // 分別為 obj 文件地址，mtl 文件地址
 2 ht.Default.loadObj('obj/metro.obj', 'obj/metro.mtl', {
 3 center: true,
 4 // 模型是否居中，默認(rèn)為 false，設(shè)置為 true 則會(huì)移動(dòng)模型位置使其內(nèi)容居中
 5 r3: [0, -Math.PI / 2, 0],
 6 // 旋轉(zhuǎn)變化參數(shù)，格式為 [rx, ry, rz]
 7 s3: [0.15, 0.15, 0.15],
 8 // 大小變化參數(shù)，格式為 [sx, sy, sz]
 9 finishFunc: function(modelMap, array, rawS3) {
10 if (modelMap) {
11 ht.Default.setShape3dModel('metro', array); // 注冊(cè)一個(gè)名字為 metro 的模型
12 }
13 }
14 });

上面通過(guò)加載 obj 模型之后注冊(cè)了一個(gè)名字為 metro 的模型，之后如果要使用該模型可以通過(guò)以下代碼來(lái)實(shí)現(xiàn)：

1 var node=new ht.Node();
2 node.s({
3 'shape3d': 'metro'
4 });

上面代碼新建了一個(gè) node 對(duì)象，通過(guò)設(shè)置 style 對(duì)象的 shape3d 屬性可以把模型名稱為 metro 用到該 node 對(duì)象上去，之后便是我們場(chǎng)景中看到的地鐵列車模型。

動(dòng)畫代碼分析

地鐵動(dòng)畫代碼的實(shí)現(xiàn)分析

場(chǎng)景中地鐵的運(yùn)行是通過(guò) HT 提供的調(diào)度插件來(lái)實(shí)現(xiàn)，調(diào)度的具體用法可以參考 HT for Web 的調(diào)度手冊(cè)，該調(diào)度主要用于在指定的時(shí)間間隔進(jìn)行函數(shù)回調(diào)處理，回調(diào)函數(shù)的第一個(gè)參數(shù)為 data 圖元，也就是 3D 場(chǎng)景中的模型節(jié)點(diǎn)，我們可以判斷當(dāng)前 data 是否為我們剛才創(chuàng)建的 metro 那個(gè)節(jié)點(diǎn)來(lái)進(jìn)行后續(xù)的操作，場(chǎng)景中模擬了一個(gè)左開的地鐵和一個(gè)右開的地鐵，兩輛地鐵會(huì)交替出現(xiàn)。在 3D 場(chǎng)景中肯定會(huì)有坐標(biāo)系，HT 中是用 x, y, z 來(lái)分別表示三個(gè)軸，所以地鐵的運(yùn)動(dòng)肯定是改變地鐵在坐標(biāo)系中的位置來(lái)實(shí)現(xiàn)地鐵的運(yùn)行，地鐵坐標(biāo)如下圖所示：

通過(guò)上圖可以知道地鐵在 3D 場(chǎng)景中的坐標(biāo)系，如果要實(shí)現(xiàn)地鐵的移動(dòng)則只需要將地鐵往圖中所示紅色箭頭的方向進(jìn)行移動(dòng)，即 x 軸的方向，通過(guò) setX 這個(gè)方法不斷的修改地鐵的位置達(dá)到地鐵行進(jìn)的目的，代碼中通過(guò) getSpeedByX 以及 getOpacityByX 兩個(gè)方法來(lái)不斷獲取此時(shí)的列車速度以及列車透明度，以下為關(guān)鍵代碼實(shí)現(xiàn)：

 1 let metroTask={
 2 interval: 50,
 3 // 每五十秒執(zhí)行一次
 4 action: (data)=>{ // 即上文所提回調(diào)函數(shù)
 5 // 判斷當(dāng)時(shí)傳進(jìn)來(lái)的節(jié)點(diǎn)是否為地鐵列車節(jié)點(diǎn)
 6 if (data===currentMetro) {
 7 // 獲取地鐵此時(shí)的 X 軸位置以及行進(jìn)的方向
 8 let currentX=data.getX(),
 9 direction=data.a('direction');
10 // 根據(jù)當(dāng)前的 X 軸位置獲取當(dāng)前的列車速度
11 let speed=this.getSpeedByX(currentX);
12 // 根據(jù)當(dāng)前的 X 軸位置獲取當(dāng)前的列車透明度
13 let opacity=this.getOpacityByX(currentX);
14 // 判斷此時(shí) X 軸位置是否超過(guò)某個(gè)值 即地鐵是在某個(gè)范圍內(nèi)移動(dòng)
15 if (Math.abs(currentX) <=5000) {
16 // 設(shè)置當(dāng)前的透明度
17 opacity !==1 ? currentMetro.s({
18 'shape3d.transparent': true,
19 'shape3d.opacity': opacity
20 }) : currentMetro.s({
21 'shape3d.transparent': false
22 });
23 // 設(shè)置當(dāng)前的 X 軸位置
24 data.setX(currentX + direction * speed);
25 // 判斷此時(shí)地鐵的速度為 0，所以此時(shí)應(yīng)該執(zhí)行開門的動(dòng)畫
26 if (speed===0) this.doorAnimation(currentMetro, direction);
27 }
28 // 右方向地鐵開到頭，進(jìn)行復(fù)位
29 if (currentX > 5000 && direction===1) {
30 currentMetro=leftMetro;
31 currentMetro.setX(5000);
32 }
33 // 左方向地鐵開到頭，進(jìn)行復(fù)位
34 if (currentX < -5000 && direction===-1) {
35 currentMetro=rightMetro;
36 currentMetro.setX( - 5000);
37 }
38 }
39 }
40 };
41 dm3d.addScheduleTask(metroTask);

通過(guò)以上代碼可以知道地鐵在運(yùn)行的過(guò)程中，主要通過(guò)修改地鐵的 x 軸位置來(lái)產(chǎn)生前進(jìn)的動(dòng)畫，并且需要讓地鐵在某個(gè)區(qū)間內(nèi)進(jìn)行運(yùn)動(dòng)，需要判斷邊界，而且為了模擬出真實(shí)的效果需要根據(jù)地鐵當(dāng)前的位置不斷獲取當(dāng)前的列車速度以及列車透明度，以下為流程圖：

上圖所示的為地鐵進(jìn)站時(shí)候的流程，當(dāng)?shù)罔F?？客戤呹P(guān)門后需要進(jìn)行出站，此時(shí)我們只需要把地鐵位置重新設(shè)置一下不為 0 即可，以下為部分代碼實(shí)現(xiàn)：

1 currentMetro.setX(direction * 10); // 設(shè)置出站列車的位置

當(dāng)執(zhí)行上面那句代碼之后上方的 metroTask 調(diào)度任務(wù)執(zhí)行到 getSpeedByX 這個(gè)方法之后獲取到的 speed 速度不為 0，因此此時(shí)會(huì)繼續(xù)執(zhí)行地鐵行進(jìn)的動(dòng)畫，此時(shí)的速度就是由慢至快，透明度由深至淺。以下為開門動(dòng)畫執(zhí)行流程：

自動(dòng)巡檢代碼的實(shí)現(xiàn)分析

系統(tǒng)中自動(dòng)巡檢的實(shí)現(xiàn)主要是通過(guò)修改 3D 場(chǎng)景中的 eye 以及 center 的值，HT 中提供了 rotate，walk 兩個(gè)方法來(lái)控制視角的旋轉(zhuǎn)以及視角的行進(jìn)，rotate 方法在非第一人稱模式時(shí)，旋轉(zhuǎn)是以 center 為中心進(jìn)行旋轉(zhuǎn)，也就是圍繞中心物體旋轉(zhuǎn)，當(dāng)為第一人稱時(shí)旋轉(zhuǎn)以 eye 為中心進(jìn)行旋轉(zhuǎn)，也就是旋轉(zhuǎn)眼睛朝向方向。walk 函數(shù)同時(shí)改變 eye 和 center 的位置，也就是 eye 和 center 在兩點(diǎn)建立的矢量方向上同時(shí)移動(dòng)相同的偏移量。該系統(tǒng)中我沒有采用 rotate 函數(shù)而是自己實(shí)現(xiàn)了視角的旋轉(zhuǎn)，因?yàn)樵镜?rotate 函數(shù)旋轉(zhuǎn)某個(gè)角度會(huì)馬上旋轉(zhuǎn)過(guò)去而不會(huì)有一個(gè)旋轉(zhuǎn)的過(guò)程，所以我重新實(shí)現(xiàn)了旋轉(zhuǎn)的方法，該系統(tǒng)中視角旋轉(zhuǎn)是通過(guò)不斷修改 center 的數(shù)值來(lái)實(shí)現(xiàn)，具體實(shí)現(xiàn)過(guò)程原理如下圖所示：

部分實(shí)現(xiàn)代碼如下：

 1 rotateStep() {
 2 // 即上圖輔助點(diǎn) C
 3 let fromCenter=this.fromCenter;
 4 // 即上圖 B 點(diǎn)
 5 let toCenter=this.toCenter;
 6 // 每幀轉(zhuǎn)一度
 7 let rotateValue=this.rotateFrame || Math.PI / 180;
 8 // 輔助點(diǎn) C 與 B 點(diǎn)之間建立一個(gè)方向向量
 9 let centerVector=new ht.Math.Vector2(toCenter.x - fromCenter.x, toCenter.y - fromCenter.y);
10 let centerVectorLength=centerVector.length();
11 // 此時(shí)旋轉(zhuǎn)百分比
12 let rotatePercent=rotateValue * this.stepNum / this.curRotateVal;
13 if (rotatePercent >=1) {
14 rotatePercent=1;
15 this.stepNum=-2;
16 }
17 let newLength=rotatePercent * centerVectorLength;
18 centerVector.setLength(newLength);
19 let newCenterVector=centerVector.add(fromCenter);
20 // 獲取旋轉(zhuǎn)過(guò)程中 center 的點(diǎn)信息
21 let newCenterPosition=[newCenterVector.x, this.personHeight, newCenterVector.y];
22 // 設(shè)置當(dāng)前 center 的大小
23 this.g3d.setCenter(newCenterPosition);
24 }

通過(guò)上述代碼就實(shí)現(xiàn)了場(chǎng)景中的視角旋轉(zhuǎn)，并且可以通過(guò)修改 rotateValue 的值控制旋轉(zhuǎn)的速度。

電梯動(dòng)畫代碼的實(shí)現(xiàn)分析

場(chǎng)景中電梯是一個(gè) obj 模型，3D 模型是由最基礎(chǔ)的三角形面拼接合成，例如 1 個(gè)矩形可以由 2 個(gè)三角形構(gòu)成，1 個(gè)立方體由 6 個(gè)面即 12 個(gè)三角形構(gòu)成，以此類推更復(fù)雜的模型可以由許多的小三角形組合合成。因此 3D 模型定義即為對(duì)構(gòu)造模型的所有三角形的描述，而每個(gè)三角形由三個(gè)頂點(diǎn) vertex 構(gòu)成，每個(gè)頂點(diǎn) vertex 由 x, y, z 三維空間坐標(biāo)決定，HT 中使用 vs 數(shù)組記錄構(gòu)成三角面的所有頂點(diǎn)坐標(biāo)，所以如果想要讓電梯運(yùn)行起來(lái)，只需要把所有的頂點(diǎn)坐標(biāo)往電梯運(yùn)行的方向進(jìn)行平移，以下為部分關(guān)鍵偽代碼：

 1 // vs 指的是構(gòu)成電梯模型所有的三角面頂點(diǎn)坐標(biāo)數(shù)組
 2 // 由于場(chǎng)景中電梯的運(yùn)行方向?yàn)橥鶎?duì)角線右上方運(yùn)動(dòng)，所以只需要修改 x 軸以及 y 軸坐標(biāo)值
 3 // xStep yStep 為每次電梯運(yùn)動(dòng)的距離
 4 setInterval(()=>{
 5 // i+3 是因?yàn)?vs 數(shù)組的順序?yàn)?x, y, z 軸 所以每次 i 偏移三個(gè)單位大小
 6 for (let i=0, l=vs.length; i < l; i=i + 3) {
 7 // 該頂點(diǎn)坐標(biāo)下一個(gè) x 軸坐標(biāo)的值
 8 let nextX=vs[i] - xStep;
 9 // 該頂點(diǎn)坐標(biāo)下一個(gè) y 軸坐標(biāo)的值
10 let nextY=vs[i + 1] + yStep;
11 vs[i]=nextX < -0.5 ? 0.5 - (Math.abs(nextX) - 0.5) : nextX;
12 vs[i + 1]=nextY > 0.5 ? -0.5 + (Math.abs(nextY) - 0.5) : nextY;
13 }
14 },
15 200);

電梯運(yùn)動(dòng)動(dòng)畫如下圖所示：

監(jiān)控功能展示及介紹

視頻監(jiān)控

當(dāng)點(diǎn)擊場(chǎng)景中的攝像頭之后右側(cè)頂部會(huì)顯示出當(dāng)前攝像頭的監(jiān)控畫面，以下為實(shí)現(xiàn)效果圖:

煙霧報(bào)警監(jiān)控

煙霧報(bào)警會(huì)根據(jù)后臺(tái)實(shí)時(shí)傳遞過(guò)來(lái)的狀態(tài)值來(lái)變換當(dāng)前煙霧報(bào)警模型的顏色，紅色為報(bào)警狀態(tài)，以下為實(shí)現(xiàn)效果圖:

電視列車到站時(shí)間監(jiān)控

日常地鐵站中會(huì)有專門的電視來(lái)展示下一班地鐵到站的時(shí)間表，該系統(tǒng)中也模擬該效果，不過(guò)該系統(tǒng)暫時(shí)做了電視的模型，時(shí)間暫無(wú)對(duì)接，以下為效果圖：

場(chǎng)景監(jiān)控交互

3D 場(chǎng)景中交互是比較簡(jiǎn)單的，主要是點(diǎn)擊攝像頭展示 2D 監(jiān)控面板，在 2D 界面中主要是切換三種交互模式，三種交互模式為互斥的關(guān)系，以下是 3D 交互注冊(cè)事件代碼:

 1 g3d.mi((e)=>{
 2 let {
 3 g2d,
 4 dm2d
 5 }=this;
 6 // 為點(diǎn)擊類型
 7 if (e.kind==='clickData') {
 8 // data 為當(dāng)前點(diǎn)擊的圖元
 9 let data=e.data;
10 // 當(dāng)前圖元的 shape3d 類型
11 let shape3d=data.s('shape3d');
12 // 判斷當(dāng)前 shape3d 類型是否為攝像頭
13 if (shape3d && shape3d.indexOf('攝像頭') > 0) {
14 let cameraPanel=dm2d.getDataByTag('cameraPanel');
15 // toggle 切換攝像頭 2d 面板
16 g2d.isVisible(cameraPanel) ? cameraPanel.s('2d.visible', false) : cameraPanel.s('2d.visible', true);
17 }
18 }
19 // 為點(diǎn)擊 3d 場(chǎng)景背景類型
20 if (e.kind==='clickBackground') {
21 let cameraPanel=dm2d.getDataByTag('cameraPanel');
22 // 隱藏?cái)z像頭 2d 面板
23 g2d.isVisible(cameraPanel) && cameraPanel.s('2d.visible', false);
24 }
25 });

總結(jié)

工業(yè)互聯(lián)網(wǎng)將人，數(shù)據(jù)和機(jī)器連接起來(lái)，地鐵站 3D 可視化系統(tǒng)則是一個(gè)很好的展現(xiàn)，HT 的輕量化，數(shù)據(jù)的可視化，機(jī)器的可視化，資產(chǎn)的管理化幫助我們更好的監(jiān)控。而物聯(lián)網(wǎng)將通過(guò)各種信息傳感設(shè)備，實(shí)時(shí)采集任何需要監(jiān)控、連接、互動(dòng)的物體或過(guò)程等各種需要的信息，通過(guò)與 HT 的結(jié)合更好的展現(xiàn)出可視化的優(yōu)勢(shì)，當(dāng)然地鐵站還可以與 VR 進(jìn)行結(jié)合，在各地科技展會(huì)中我們可以見到各種 VR 場(chǎng)景操作，HT 中也可以結(jié)合 VR 設(shè)備進(jìn)行操作，可以戴上設(shè)備在地鐵站中漫游，讓人有身臨其境的感覺，由于場(chǎng)景本身的輕量化，所以 VR 場(chǎng)景下的流暢性也是十分的高，讓用戶不會(huì)有頭暈的感覺。當(dāng)然系統(tǒng)本身也可以在移動(dòng)端運(yùn)行，以下為移動(dòng)端運(yùn)行截圖：

程序運(yùn)行截圖：

記得那個(gè)曾被萬(wàn)千網(wǎng)民掛在口中的上網(wǎng)神器——Internet Explorer嗎？

Internet Explorer，生于1995年，卒于2019年。

2019年4月9日，微軟發(fā)布了新版Edge瀏覽器預(yù)覽版，之所以倍受關(guān)注，一個(gè)很重要原因就是新版不再使用EdgeHTML內(nèi)核（老版Edge瀏覽器內(nèi)核），轉(zhuǎn)而采用全新的Chromium內(nèi)核。

換句話說(shuō)，微軟正式棄用了自己沿用24年之久的IE，轉(zhuǎn)而拜倒在谷歌的石榴裙下！

只要上網(wǎng)就離不開瀏覽器，當(dāng)然每個(gè)人的喜好不同，有喜歡360的，有喜歡QQ的，但它們都有一個(gè)共同特點(diǎn)，那就是Chromium內(nèi)核。事實(shí)上在互聯(lián)網(wǎng)的歷史舞臺(tái)上，也曾出現(xiàn)過(guò)很多種瀏覽器。

Netscape、IE、Safari、Opera、Firefox、Chrome……，在最為鼎盛的時(shí)期，甚至很多媒體也都在熱衷轉(zhuǎn)載一些“XXX瀏覽器爭(zhēng)霸賽”、“最快瀏覽器花落誰(shuí)家”……一類的文章，那時(shí)的人們似乎都想搞明白一件事——誰(shuí)才是最快的瀏覽器！

終于，當(dāng)“最快瀏覽器”桂冠從Opera正式變更給Chrome之后，世界一下子變清靜了！

一邊是憑借Windows占據(jù)大量市場(chǎng)份額的IE，另一邊則是Chrome以及它的衍生瀏覽器伙伴（比如360瀏覽器、QQ瀏覽器、搜狗瀏覽器、獵豹瀏覽器……）。

此時(shí)如果你碰巧打開了一組下載網(wǎng)站，那么就會(huì)發(fā)現(xiàn)，滿滿一屏幾乎再難看到其他品牌的瀏覽器，市場(chǎng)出現(xiàn)了兩極分化！

IE是Windows自帶的一款瀏覽器，除了上網(wǎng)之外，Windows的很多地方也都會(huì)用到它。但作為一款上網(wǎng)工具來(lái)說(shuō)，IE的確不是什么最優(yōu)選擇。

速度慢、功能單一、不支持?jǐn)U展（Win10 Edge支持?jǐn)U展，但數(shù)量很少）、穩(wěn)定性差，以至于對(duì)大多數(shù)人來(lái)說(shuō)，它的作用恐怕只有一個(gè)——那就是下載其他瀏覽器。

觀眾們的選擇讓微軟有些尷尬，于是秉承了公司所有希望于一身的新一代瀏覽器Microsoft Edge橫空出世，But……

幾年時(shí)間過(guò)去，Edge的境遇似乎并不比它的前任好多少，甚至很多用戶都在想方設(shè)法地卸載Edge，哦……它太煩人了！那么IE到底經(jīng)歷了什么？這還得從它的源頭說(shuō)起。

Internet Explorer 1（1995年）

1995年8月16日，微軟發(fā)布了IE1，與現(xiàn)在不同的是。當(dāng)時(shí)的IE和Windows還沒有多少聯(lián)系，僅僅是Windows 95 Plus中的一個(gè)可選項(xiàng)，當(dāng)然這也與當(dāng)時(shí)的市場(chǎng)環(huán)境有關(guān)，那時(shí)能夠上網(wǎng)的電腦太少了。

Internet Explorer 2（1995年）

IE1發(fā)布僅僅幾個(gè)月后，IE2就面世了。

與現(xiàn)在的如日中天不同，那時(shí)的瀏覽器市場(chǎng)幾乎都被網(wǎng)景公司的Netscape Navigator所把持，大約90%的市場(chǎng)份額都集中在Netscape手上，甚至許多網(wǎng)站的開發(fā)只能與Navigator兼容，否則就會(huì)出現(xiàn)顯示異常。

正是基于這一原因，IE2在開發(fā)過(guò)程中也融入了很多與Navigator兼容的特性，比如從Navigator中導(dǎo)入書簽、支持Navigator的HTML、Javascript、Cookies、SSL、NMTP，以便網(wǎng)頁(yè)能夠呈現(xiàn)與Navigator一致的效果。

而這一年，微軟做出的一大壯舉，就是推出了適配于MAC OS的MAC版IE。

Internet Explorer 3（1996年）

IE3是微軟首個(gè)有實(shí)力挑戰(zhàn)Netscape Navigator的瀏覽器，為了這一目標(biāo)，微軟逆向設(shè)計(jì)了Javascript，創(chuàng)造出一個(gè)完全不同的版本JScript，JScript支持ActiveX、插件、128位加密、CSS，還能顯示GIF動(dòng)畫。

其中IE3中一個(gè)不得不提的特色，就是能夠處理流媒體音頻而無(wú)需其他第三方插件。

正是基于這樣的信心把持，IE3上線僅僅一周，就收獲到了100萬(wàn)次下載量，這對(duì)于當(dāng)時(shí)的瀏覽器霸主（Netscape）也產(chǎn)生了不小震動(dòng)。

Internet Explorer 4（1997年）

IE4是微軟第一款集成在Windows里的瀏覽器，同時(shí)也支持了當(dāng)時(shí)所有的Windows升級(jí)。

IE4在微軟歷史上具有很多劃時(shí)代意義，比如首款在Windows中集成的瀏覽器、首次擁有了自己的排版引擎Trident、首次采用了IE經(jīng)典LOGO（銀色環(huán)圍繞深藍(lán)色e）等等。

而IE4的性能也不可小覷，相比其他品牌瀏覽器，IE4的啟動(dòng)速度更快、網(wǎng)頁(yè)展示更全面，幾乎支持了當(dāng)時(shí)所有的網(wǎng)頁(yè)技術(shù)，也給予了用戶更多的選項(xiàng)空間。

不過(guò)也許是樹大招風(fēng)吧，IE4最終引發(fā)了美國(guó)的反壟斷調(diào)查，在當(dāng)時(shí)可以說(shuō)轟動(dòng)了全球！

Internet Explorer 5（1999年）

時(shí)隔兩年后的IE5，融入了更多先進(jìn)技術(shù)，比如XML/XSL，同時(shí)也首次支持將HTML網(wǎng)頁(yè)保存為MHTML。

由于Win98的銷售火爆，IE5很快成為當(dāng)年市場(chǎng)占有率及使用率最高的瀏覽器產(chǎn)品。

不過(guò)隨著越來(lái)越多的安全公司發(fā)現(xiàn)IE5隱藏的漏洞，微軟也開始逐步重視起IE的安全問(wèn)題來(lái)，并且首次以SP包（Service Pack）的形式對(duì)IE進(jìn)行安全性升級(jí)。

同年捆綁于Windows Me銷售的IE5.5更是直指安全與打印兩項(xiàng)，相反其他功能上的變化乏善可陳。

Internet Explorer 6（2001年）

IE6可以說(shuō)是微軟的功臣，正是由于和IE6的競(jìng)爭(zhēng)失利，Netscape才最終徹底敗下陣來(lái)。

然而當(dāng)時(shí)的微軟也不敢掉以輕心，因?yàn)镺pera、Firefox的發(fā)展同樣迅猛，最要命的是，盡管IE6的市場(chǎng)份額接近9成，但也同樣因?yàn)榘踩┒炊裘阎?，以至?006年的PC World將IE6評(píng)為史上最差勁的科技產(chǎn)品。

盡管如此，IE6在技術(shù)上的進(jìn)步也是不可否認(rèn)的。

IE6支持增強(qiáng)的DHTML，以及對(duì)CSS1、DOM1、SMIL2.0的部分支持，MSXML也提升到3.0版。

其他諸如Windows Messenger、圖片大小自動(dòng)調(diào)整、錯(cuò)誤報(bào)告、P3P、阻止網(wǎng)頁(yè)彈窗，以及與Windows XP相同外觀的Luna界面（僅在XP系統(tǒng)中運(yùn)行才會(huì)出現(xiàn)）等等，都給予了新用戶無(wú)限想像。

正是由于IE6的種種新特性，那時(shí)的網(wǎng)頁(yè)才開始變得多樣化、豐富化，這其中IE6功不可沒。

Internet Explorer 7（2005年）

盡管IE6引領(lǐng)了很多技術(shù)先河，但當(dāng)時(shí)的瀏覽器市場(chǎng)其實(shí)已經(jīng)四分五裂。

網(wǎng)景被Mozilla基金會(huì)收購(gòu)，進(jìn)而開發(fā)Firefox瀏覽器，蘋果則利用Webkit內(nèi)核開發(fā)了自己的Safari瀏覽器，Opera也在借助Webkit內(nèi)核打造“世界最快瀏覽器”，此外包括傲游、360、QQ、搜狗等在內(nèi)的一眾國(guó)產(chǎn)套殼瀏覽器，也都在市場(chǎng)中摩拳擦掌，種種情形逼迫著微軟不得不做出改變。

2005年7月27日，伴隨Windows Vista的發(fā)布，IE7 Beta1問(wèn)世。和先前的IE6相比，IE7增加了網(wǎng)絡(luò)反釣魚過(guò)濾、選項(xiàng)卡瀏覽、中文域名訪問(wèn)等等新功能，并且提供了HTML4.01以及CSS2的加強(qiáng)支持。

但I(xiàn)E7的改進(jìn)仍然遠(yuǎn)遠(yuǎn)落后于其他瀏覽器，其ACID2和ACID3渲染測(cè)試成績(jī)慘不忍睹，HTML5測(cè)試更是僅有可憐的27分。

Internet Explorer 8（2009年）

歷經(jīng)了Vista的慘敗之后，微軟勵(lì)精圖治推出了全新一代操作系統(tǒng)Windows 7，對(duì)應(yīng)的IE8也終于面向終端用戶。

和IE7相比，IE8并沒有在界面上做出太多改動(dòng)，更多還是體現(xiàn)在功能與安全性方面。

比如新版SmartScreen篩選器（替換IE7的釣魚網(wǎng)站過(guò)濾器）、全新InPrivate瀏覽支持（隱私模式）、兼容性視圖引入（確保舊版網(wǎng)站頁(yè)面顯示正確）、自動(dòng)崩潰恢復(fù)（網(wǎng)頁(yè)出錯(cuò)后仍能恢復(fù)之前的瀏覽狀態(tài)）等等。

盡管如此，一直廣為詬病的HTML5、CSS3兼容性仍遜于其他對(duì)手，而IE7時(shí)代讓人撓頭的假死問(wèn)題，在IE8中被無(wú)限放大，以至于很多國(guó)產(chǎn)瀏覽器以“防假死”為手段對(duì)標(biāo)IE。種種不利，令I(lǐng)E8再難獲取用戶的青睞。

Internet Explorer 9（2011年）

2011年3月14日，微軟發(fā)布了IE9，新版IE采用了全新Javascript引擎Chakra，使得網(wǎng)頁(yè)加載速度更快。同時(shí)利用顯卡GPU加速文字及圖形渲染，來(lái)綜合提高網(wǎng)頁(yè)瀏覽速度。

多標(biāo)簽瀏覽網(wǎng)頁(yè)CPU占用率超高的問(wèn)題，在IE9中得到明顯緩解，同時(shí)HTML5支持、CSS3（如SVG矢量圖形、Canvas圓角、H.264視頻解碼）、Trident 5.0引擎、跟蹤保護(hù)、ActiveX篩選等一眾新功能的加入，讓IE9終于在性能上追平對(duì)手。

除此之外，IE9的界面設(shè)計(jì)也和前版大為不同，大面積采用Aero特效，使得其在外觀效果上與Win7渾然一體。

同時(shí)IE9還增加了很多與操作系統(tǒng)相匹配的功能，比如Jumplist跳轉(zhuǎn)菜單、將網(wǎng)頁(yè)P(yáng)in到任務(wù)欄上、獨(dú)立下載管理器等等。

然而或許是幸福來(lái)得太遲了，在用戶早已熟悉其他瀏覽器的時(shí)代，一個(gè)僅僅是性能“追平”對(duì)手的瀏覽器是很難再獲用戶青睞的。最終，集外觀與性能于一身的IE9，在市場(chǎng)反應(yīng)上表現(xiàn)平平。

Internet Explorer 10（2012年）

伴隨Windows 8的登場(chǎng)，IE也迎來(lái)了一個(gè)新紀(jì)元。IE10在Windows 8中是以兩個(gè)獨(dú)立版本呈現(xiàn)，分別是桌面版IE10和Metro版IE10。

其中桌面版面向鍵鼠用戶，Metro版面向觸屏用戶。和IE9相比，微軟改進(jìn)了Chakra引擎，使得IE10的網(wǎng)頁(yè)加載速度更快，同時(shí)HTML5支持也要比IE9更加全面。

從某種意義上說(shuō)，桌面版IE10才是IE系列瀏覽器的正式繼任者，而Metro版由于取消了Flash（初版不支持，后期版本開始啟用Flash）、Silverlight技術(shù)，轉(zhuǎn)而支持HTML5，在Win8整體市場(chǎng)反響平平的情況下，也沒有獲得成功！

Internet Explorer 11（2013年）

IE11發(fā)布于2013年10月17日，集成于Windows 8.1中。和IE10一樣，IE11同樣也分為桌面版和Metro版（后改名為Modern UI）兩個(gè)版本。

IE11在IE10基礎(chǔ)上，再次擴(kuò)大對(duì)HTML5和CSS3的支持，且添加的很多新特性都是非常新潮的（如HTML5拖放、HTML5全屏、CSS邊框圖、媒體加密、視頻碼率控制、WebGL等）。

可以說(shuō)從這一版開始，IE11已經(jīng)沒有很明顯的“代差”，真正進(jìn)入到“軟性較力”的階段。

Modern版變化更大，相比上一代IE10，IE11 Modern版無(wú)論在界面還是操縱方式上都有了巨大改進(jìn)。

選項(xiàng)卡由上調(diào)到下，并且可以通過(guò)設(shè)置始終顯示選項(xiàng)卡。早就該有的收藏夾按鈕姍姍來(lái)遲，至少不用再像上一版一樣返回到桌面版后才能把網(wǎng)頁(yè)收藏。

除此之外，追蹤保護(hù)、下載管理器的加入，讓Metro版終于第一次在功能上與桌面版看齊，而這也是IE10時(shí)代最受用戶詬病的地方。

Microsoft Edge（2015年）

Windows 8的慘敗讓微軟重新審視起自己的產(chǎn)品，如何讓鍵鼠用戶和觸屏用戶在同一個(gè)UI下共同相處，成為微軟一直在思考的一個(gè)問(wèn)題。

隨著2015年Windows 10的上市，一個(gè)全新的瀏覽器產(chǎn)品——Microsoft Edge開始全面替代IE。和前代IE不同，Edge從誕生之日起就加入了很多新意。

首次將觸屏版與鍵鼠版合二為一、閱讀模式、插件支持、標(biāo)簽縮略圖、臨時(shí)擱置（即將當(dāng)前已打開網(wǎng)頁(yè)先行擱置稍后再看）、添加筆記、與Cortana互動(dòng)（比如一鍵查詢、獲取解答、語(yǔ)音朗讀等等）。

這其中插件支持是Edge的最大看點(diǎn)，可以說(shuō)它和Chrome之間只差了一個(gè)擴(kuò)展的距離！

未來(lái)（2019年）

雖然Edge秉承了微軟的很多期待，但不得不承認(rèn)的是，對(duì)于一款軟件產(chǎn)品來(lái)說(shuō)，Edge的時(shí)間周期太長(zhǎng)了。

從2015年第一版上線，到2017年整個(gè)市場(chǎng)上可供Edge下載并使用的擴(kuò)展僅僅只有百余。而微軟強(qiáng)調(diào)的理由是，用戶反饋與擴(kuò)展安全性是微軟最為看重的。

但筆者想說(shuō)的是，相比Chrome應(yīng)用市場(chǎng)中數(shù)以萬(wàn)計(jì)的擴(kuò)展來(lái)說(shuō)，Edge連最起碼的使用體驗(yàn)都無(wú)法給予用戶，那么用戶憑什么要選擇你呢？

2019年4月9日，微軟正式開放了新版Edge（Chromium內(nèi)核）的預(yù)覽版下載。

從早期體驗(yàn)者的反饋來(lái)看，即便尚處內(nèi)測(cè)期，新版Edge的體驗(yàn)及整體穩(wěn)定性就已經(jīng)不遜于老版。而另一個(gè)令人期待的變化是，由于采用了通用化內(nèi)核，這也就意味著Chrome商店中數(shù)以萬(wàn)計(jì)的擴(kuò)展，都可以無(wú)縫安裝到新Edge瀏覽器中。

同時(shí)開發(fā)者也不用再像以前那樣，單獨(dú)生成一個(gè)Edge版本。退而居其次，給大家更多的選擇，這是否會(huì)是微軟的一個(gè)正確抉擇呢？讓我們一同拭目以待吧！

(編輯：CP)