帶你走進微軟棄子-IE瀏覽器的前世今生

nternet Explorer，也就是大家所熟悉的IE瀏覽器，其年歲可能都比眾讀者大了，IE已發(fā)行版本曾用于以下版本W(wǎng)indows：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已經(jīng)沒了，取而代之的是Microsoft Edge。相比第一代IE的青澀，如今的Microsoft Edge成熟了太多。現(xiàn)在就讓我們追憶一下歷代IE版本，簡單地回顧一下它們給瀏覽器市場帶來的影響：

Internet Explorer 1

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

Internet Explorer 2

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

Internet Explorer 3

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

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

Internet Explorer 4

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

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

Internet Explorer 5

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

Internet Explorer 6

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

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

Internet Explorer 7

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

從IE7開始，IE全稱變?yōu)?Windows Internet Explorer"，IE的LOGO又變成了具有毛玻璃效果的"黃色環(huán)圍繞藍色e"，此后的IE8仍沿用IE7的LOGO。

Internet Explorer 8

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

Internet Explorer 9

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

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

Internet Explorer 10

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

Internet Explorer 11

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

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

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

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

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

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

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

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

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

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

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

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

我的實現(xiàn)方法

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

我的幾個有限的發(fā)現(xiàn)是：

好像不能使用HTML標簽(顯示圖片、創(chuàng)建鏈接或其它)
可以用CSS來修飾，但有些屬性不行，比如 height，在 Chrome/Safari 里不行，但在 Firefox 可以
CSS keyframe 動畫好像不行
CSS transitions 可以用 (如果我沒記錯的話), 但我沒發(fā)現(xiàn)如何有效的使用它
使用SVG作為背景圖片是完全沒問題，但在火狐瀏覽器里不行。
使用 base64 圖片沒問題
Safari 總是 repeat svg背景圖片，即使指定了 no-repeat
如果給圖片配了標題，你需要使用 padding 將文章和圖片隔開。
如果輸出的文字里面有鏈接，SVG圖片的位置會出現(xiàn)錯誤。
SMIL動畫好用！但好像有限制，具體我還不清楚。
當使用 SMIL 動畫時，刷新頁面有時并不能刷新這些動畫，你需要關(guān)閉、重新開啟console ([cmd+option+i] for macOS])

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

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

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

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

www.qieban.cn 專業(yè)web前端團隊。

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

#1.用css@keyframes動畫

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

<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能夠動畫的屬性。
你已經(jīng)知道并且很舒服的css動畫。

#2.用smil動畫

對于構(gòu)建于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特定特性，比如在沒有手動同步持續(xù)時間/延遲的情況下啟動動畫。或者交互的東西，比如在點擊時啟動動畫。

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

#3.用javascript動畫

使用JavaScript，您可以訪問請求動畫框架(或其他循環(huán))之類的東西，因此您可以通過快速變化的屬性值來動畫。還有一些框架可以用來與svg一起工作，它通常擁有內(nèi)置動畫的內(nèi)容。或者是與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中工作，也許您的動畫與您所接收到的數(shù)據(jù)和類似的數(shù)據(jù)有關(guān)。
無論如何，您需要javascript，因為您需要邏輯或數(shù)學或者其他真正可能存在的東西。
您對javascript感興趣
為你解決一些錯誤
。
您的動畫的范圍相當大/復(fù)雜，您需要抽象和組織javascript可以提供。

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

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

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

在線咨詢

上一篇：2017年HTML5前端十個發(fā)展方向預(yù)測
下一篇：前端基礎(chǔ)：43道JavaScript面試題，適合查漏

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

帶你走進微軟棄子-IE瀏覽器的前世今生

您的項目需求