整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

带你走进微软弃子-IE浏览器的前世今生

带你走进微软弃子-IE浏览器的前世今生

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中,以便它能够工作。