nternet Explorer，也就是大家所熟悉的IE瀏覽器，其年歲可能都比眾讀者大了，IE已發行版本曾用于以下版本Windows：Windows 95、Windows NT 4.0、Windows 98、Windows 98 Second Edition、Windows ME、Windows 2000、Windows XP、Windows Server 2003、Windows Vista、Windows 7、Windows8。IE 1.0首次提供給Windows 95用戶，并由此開始了IE與Windows的捆綁，隨后的2.0、3.0……直到如今的都是如此。

如今，那個大家所熟悉的Internet Explorer已經沒了，取而代之的是Microsoft Edge。相比第一代IE的青澀，如今的Microsoft Edge成熟了太多。現在就讓我們追憶一下歷代IE版本，簡單地回顧一下它們給瀏覽器市場帶來的影響：

Internet Explorer 1

第一代IE瀏覽器于1995年8月16日發布，它在Windows 95的Microsoft Plus!中提供選擇安裝，對該研發團隊微軟僅僅投入了六個人。

Internet Explorer 2

1995年11月22日，微軟IE2發布。IE2支持當時所有Windows，并且于1996年1月發布支持蘋果的Mac OS版。IE2開始支持Javascript、Cookies、SSL、RSS和NMTP等技術和協議。

Internet Explorer 3

在距離IE問世將近一周年的1996年8月13日，微軟IE3發布了，開發該版本時，IE團隊的人數已經達到了100人。IE3仍然支持所有Windows，并且于1997年1月8日發布Mac OS版IE3.01。

IE3開始支持CSS，加入ActiveX控件和JavaApplet，并且能顯示GIF和JPEG格式圖片文件，支持MIDI文件播放。使得網頁在當時看來非常生動有趣。IE 3.0發布一周內下載量就突破了100萬次，對當時的瀏覽器霸主網景（Netscape）產生了不小的威脅，揭開了第一次瀏覽器大戰的序幕。

Internet Explorer 4

1997年9月，微軟發布IE4，支持Windows 95、98和Windows NT。也正是從IE4開始，IE徹底集成在Windows系統作為默認瀏覽器。

IE4是IE比較“劃時代”的版本，桌面上出現了IE的LOGO——"銀色立體環圍繞深藍色e"。更重要的是IE4有了微軟自己的排版引擎Trident，使IE4相比當時的瀏覽器啟動更快。IE4支持當時幾乎所有的網頁技術，使得網頁顯示更全面。同時IE4為用戶提供了更多的選項，使得用戶可以根據自己的習慣靈活設置，這使得在第一次瀏覽器大戰中IE大獲全勝。而網景公司及Netscape Navigator瀏覽器徹底退出主流市場。

Internet Explorer 5

1999年3月18日，IE5發布。IE5相比IE4，增加了當時更多的先進技術，諸如支持XML、XSL、并可將HTML網頁存為MHTML等諸多功能。在Windows XP的早期版本Windows Whistler測試版中，還有IE5.6，不過正式版Windows XP即被IE6取代，所以原則上IE5.6并不是IE的正式版。

Internet Explorer 6

2001年8月27日，微軟最后一款命名“Microsoft Internet Explorer”的IE發布。IE6增強了DHTML，以及對CSS 1、DOM 1和SMIL 2.0等的部分支持，MSXML也提升到了3.0版本。由于IE6的種種新特性，并且網頁開發技術也大大提高。當時的網頁開始多樣化、豐富化。為了與Windows XP的Luna界面協調，IE6的LOGO變為淺藍色。

但是微軟在發布IE6后5年內沒有為其進行功能修正或升級版本，IE6的各種缺陷開始一一浮現，但微軟過于自信，沒有修正這些問題。在這種背景下，許多公司大致分為兩個方向進行改進：一是在IE6基礎上擴充功能。二是憑借自己的實力研發新的瀏覽器。就此開始了第二次瀏覽器大戰，越來越多的瀏覽器被人們熟知并且替換IE6成為默認瀏覽器。

Internet Explorer 7

2005年7月27日，伴隨著Windows Vista Beta的發布，IE7 Beta 1版問世。第二年10月18日，Windows Vista正式版發布。IE7相比IE6在安全、網頁瀏覽和用戶體驗上都有很大的增強。IE7增加了網絡釣魚過濾、支持選項卡瀏覽、支持非ASCII域名訪問，加入了搜索引擎以便查找、支持PNG Alpha通道等眾多新功能。對HTML4.01和CSS 2加強支持，徹底取消Gopher功能。但是IE7的改進仍遠遠落后其他瀏覽器，且IE7在處理PNG Alpha通道時會使CPU使用率瞬間飆升至100%，加上后來Windows Vista的失敗，使得IE7成為IE系列中較失敗的版本。

從IE7開始，IE全稱變為"Windows Internet Explorer"，IE的LOGO又變成了具有毛玻璃效果的"黃色環圍繞藍色e"，此后的IE8仍沿用IE7的LOGO。

Internet Explorer 8

2009年3月19日，IE8發布，IE8相對于IE7用戶界面除了有一些較小變動外基本一致，功能上增加了InPrivate瀏覽支持，使得用戶隱私不會泄露，同時用新版的SmartScreen篩選器替換掉IE7的釣魚網站過濾器，新的SmartScreen篩選器不但對網站的不安全內容進行過濾，而且會對已下載的文件進行檢查以查看是否有惡意軟件。但由于在HTML5、CSS 3等技術方面仍落后于其他瀏覽器對手。所以從實際上說IE8并不是一個成功的IE，只是由于IE8是支持Windows XP最后的IE，而某些Windows 7用戶也沒有更新至IE9、IE10甚至IE11，從而使得IE8擁有較高的市占率。

Internet Explorer 9

2011年3月14日，微軟發布IE9，IE9采用了新的JavaScript引擎Chakra，使網頁加載速度很快，同時利用顯卡GPU加速文字和圖形的渲染、使CPU的負擔也大大減輕。另外IE9開始支持HTML5和CSS 3(如SVG矢量圖形、Canvas圓角、原生支持AAC、MP3音頻和H.264視頻解碼等。同時在安全方面也增加了跟蹤保護、ActiveX篩選等功能，使得IE9的安全性較以前的IE也大大提高。可以說IE9終于在性能表現上縮短了與其他對手的差距。IE9使用Trident 5.0內核。IE9同時在界面上也做了比較大的修改，使其更加簡潔。

雖然IE9可以說是IE的一次大革新，但相對于WebKit內核瀏覽器來說對HTML5標準支持仍然不夠，且64位的IE9未采用新的Chakra引擎，這使得64位IE9除了在界面上是IE9，用戶體驗卻和64位IE8一樣糟糕，這使得許多Windows 7 64位系統用戶只用32位IE9。

Internet Explorer 10

2011年4月11日，IE10發布。IE10在IE9的基礎上，改進了Chakra引擎，使得網頁加載速度較IE9更快。HTML5支持上較IE9更多更全面。加入拼寫更正功能但在中文版該功能無效。安全方面新增Do Not Track、增強保護模式和嚴格的P3P驗證。SmartScreen掃描也從IE擴展到整個Windows 8系統。同時Windows UI IE10為觸屏設備設計。支持將網站固定到開始屏幕。使網站就如同應用一樣點磁貼就能運行。且64位桌面IE10也采用了Chakra引擎，并且可以通過打開增強保護模式強制使用64位。而64位Windows UI IE10始終運行在64位模式。總體上來說，IE10在很多方面的性能基本上與WebKit內核瀏覽器和新的Blink內核瀏覽器相當，甚至要更好一點。

Internet Explorer 11

2013年6月26日，IE11發布。IE11在IE10的基礎上再次擴大對HTML5和CSS 3的支持，且添加的這些新特性多數均是非常新潮的特性，使得IE11在顯示HTML5網頁時基本不出現到處不支持的問題。IE11在功能上新增對Google的SPDY協議的支持，對Chakra進行了更多優化，硬件加速渲染相比IE9和IE10更快，在同樣多加載項的情況下，IE11網頁加載速度已超過WebKit和Blink內核瀏覽器，支持在后臺智能預判并迅速在內存中取出已經看過的網頁而不需要重新連接網站加載。

始終啟用選項卡瀏覽，地址欄上不再有"兼容性視圖"按鈕，使用全新的UA繞開網站用來判斷舊版IE的CSS Hack，而使IE在瀏覽舊版網站時返回與FireFox相同的頁面。全新的F12開發人員工具以新穎的界面和非常直觀的圖形化指示幫助開發人員迅速對網站運行情況進行監控并及時優化，尤其是"仿真"功能類似過去的"兼容性視圖"，但功能更強大，可以在PC中顯示與Windows Phone或XBox相同的頁面，更改頁面顯示方向和分辨率，還可以模擬GPS定位以測試網站跟蹤位置功能是否正常。更重要的是IE11支持設備選項卡同步，使得在多個相同帳戶上使用的設備通過IE11能夠訪問不是本設備的選項卡。

2015年3月，微軟公司正式宣布放棄IE瀏覽器，成立 Project Spartan 的嶄新項目，著手開發下一代瀏覽器。

2015年4月，微軟產品發布會宣布 Project Spartan 項目正式定名為 Microsoft Edge 瀏覽器。

2016年1月12日起，微軟停止為IE8/9/10 這些舊版本的IE 瀏覽器提供技術支持。

Windows 10年度更新還有半個月即將正式推送，在新版本中Edge瀏覽器成為微軟的一個重點，微軟近日在一篇博客中寫道，Edge瀏覽器擁有業內最高效的視頻播放功能，充分利用了Windows 10系統平臺的功能，從而確保在視頻播放的時候讓CPU處于非常低的使用頻率上。這種新功能是否能讓Edge贏回市場呢？

本文雖然是追憶IE瀏覽器，但筆者當年基本都沒有使用IE瀏覽網站 。你呢？你瀏覽網頁用的是IE瀏覽器嗎？

發現一個有趣的事情，竟然能在瀏覽器console里顯示SVG圖片和SVG動畫！

我迫不及待的要把這寫出來，我想知道是否還有其他人之前也發現了這個用法。同時也為這個功能感到興奮。

我是在經過一系列的錯誤debug、測試和研究中偶然發現了可以在console里顯示SVG圖片，不僅僅能顯示，而能夠運行SVG動畫。下面是一個動畫效果截圖：

這是在谷歌瀏覽器(Safari瀏覽器也可以)console里呈現的動畫。這個動畫并不是我寫的，是借用了這個動畫技巧。

當發現這個功用時，我一下子迷住了。我一直在想可以在什么地方用到它。

我的實現方法

我把它分享出來，是希望有人能夠繼續發掘它，看看它是否還有什么其他用法，我們可以相互學習。但首先我要聲明的是，我對這個發現的研究還非常的基礎。我不知道也許我是否在做傻事或犯了明顯的錯誤。

我的幾個有限的發現是：

• 好像不能使用HTML標簽(顯示圖片、創建鏈接或其它)

• 可以用CSS來修飾，但有些屬性不行，比如 height，在 Chrome/Safari 里不行，但在 Firefox 可以

• CSS keyframe 動畫好像不行

• CSS transitions 可以用 (如果我沒記錯的話), 但我沒發現如何有效的使用它

• 使用SVG作為背景圖片是完全沒問題，但在火狐瀏覽器里不行。

• 使用 base64 圖片沒問題

• Safari 總是 repeat svg背景圖片，即使指定了 no-repeat

• 如果給圖片配了標題，你需要使用 padding 將文章和圖片隔開。

• 如果輸出的文字里面有鏈接，SVG圖片的位置會出現錯誤。

• SMIL動畫好用！但好像有限制，具體我還不清楚。

• 當使用 SMIL 動畫時，刷新頁面有時并不能刷新這些動畫，你需要關閉、重新開啟console ([cmd+option+i] for macOS])

下面就是我在測試時使用的一個SVG動畫，請打開谷歌瀏覽器的console觀看，火狐瀏覽器暫時不能正確顯示輸出：

代碼中 %c 后的空格是用來 “糾正” Safari瀏覽器在padding-left: 100%時repeat背景的bug。我使用了font-size 來確定顯示區域的大小，這是因為 height 不起作用。

你對此有什么想法？是不是覺得也很有趣？你也發現了console里的這些用法嗎？請留言告訴我。

--------------------

www.qieban.cn 專業web前端團隊。

畫svg是有點獨特的，因為有三種截然不同的方式可以接近動畫它。

#1.用css@keyframes動畫

svg元素可以以css為對象，并使用css進行樣式化。意思是，您可以通過@keyframes來應用動畫。就像這樣：

<svg viewBox="0 0 127.9 178.4">
 <path id="left-leg" d="M37.6,138.8c0 ... " /></svg>

.left-leg {
 function fill() { [native code] }: orange;
 animation: dance 2s infinite alternate;}@keyframes dance {
 100% {
 transform: rotate(3deg);
 }}

#如果.你可以選擇這樣的動畫。

• 動畫相當簡單。

• 您只需要動畫css能夠動畫的屬性。

• 你已經知道并且很舒服的css動畫。

#2.用smil動畫

對于構建于svg中的動畫有一個語法。下面是一個非常簡單的例子：

<svg viewBox="0 0 127.9 178.4">
 <path d="M37.6,138.8c0 ... ">
 <animate attributeName="function fill() { [native code] }" dur="5000ms" to="#f06d06" function fill() { [native code] }="freeze" /> 
 </path></svg>

這是個大教程所有這些都是Smil。

#如果.你可以選擇這樣的動畫。

• 您需要動畫css不能的屬性，比如

  形狀本身

  。

• 您需要其他smil特定特性，比如在沒有手動同步持續時間/延遲的情況下啟動動畫。或者交互的東西，比如在點擊時啟動動畫。

在這里小編給前端小白推薦一個前端學習路線，和一些學習資料

#3.用javascript動畫

使用JavaScript，您可以訪問請求動畫框架(或其他循環)之類的東西，因此您可以通過快速變化的屬性值來動畫。還有一些框架可以用來與svg一起工作，它通常擁有內置動畫的內容。或者是與svg一起工作的動畫框架。像n.SnapSVG，n.GreenSock，n.SVG.js，或Velocity.js。

下面是一個例子：

<svg id="robot" viewBox="0 0 127.9 178.4">
 <circle id="left-pupil" cx="34.4" cy="15.4" r="4.8" /></svg>

var s=Snap("#robot");var leftPupil=s。select("#left-pupil");leftPupil。animate({
 r: 50，function fill() { [native code] }: "lightgreen"}， 1000);

#如果.你可以選擇這樣的動畫。

• 無論如何，您都在javascript中工作，也許您的動畫與您所接收到的數據和類似的數據有關。

• 無論如何，您需要javascript，因為您需要邏輯或數學或者其他真正可能存在的東西。

• 您對javascript感興趣

  為你解決一些錯誤

  。

• 您的動畫的范圍相當大/復雜，您需要抽象和組織javascript可以提供。

你最終不會使用svg影響你的選擇嗎？

的確是。如果您使用SVG-as-，您將無法使用來自另一個樣式表的CSS動畫。但是，SMIL動畫會在一些瀏覽器中工作(在撰寫本文時，Chrome是，Firefox No)。如果svg文件中嵌入的css能夠工作或某天工作，我不會感到驚訝。javascript也許不是。

如果你在css背景-圖片中使用svg，我想這是類似于上面的故事。如果您使用內聯<svg>所有的可能性都向你敞開。如果您使用svg通過object或iframe您需要將腳本/樣式嵌入到svg中，以便它能夠工作。