web开发中常常越到不少ie浏览器的问题,需要在开发中常常去注意的,记录一下,遇到的同学需要小心:
1 背景图 cache的问题:
几年前,站点的pv突然上到了千万,当时只有一台服务器,结果服务器垮掉了,加了4台后,服务器依然垮掉。找了半天原因都不知道原因,后来对页面抓包,当时用的是httpwatch抓包发现打开页面会对一个背景图会频繁的请求。导致服务器支持不住!ie没有对背景图进行cache,而是不停的发包去请求,当时一个li用到的背景图,页面里总共有20来个li,结果请求量可想而知了。20*1000万,服务器支持不了。杯具!
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}在页面的开头执行如下一段js来代码来规避这个
http://evil.che.lu/2006/09/25/no-more-ie6-background-flicker
2 innerhtml中图片缓存的问题:
在背景图过后不久,又遇到来一个一个图片cache的问题。导致服务器流量涨了不少,不过这次没有造成事故。json得到一些数据后,
拼凑了一段innerHtml,里面有好几个li,用到一张相同的图片,原以为只会请求一次,结果呢,请求了好几次(并没有等于li的次数),奇怪得很,
后来得知ie对于innerHtml中图片的缓存有问题,第一张图片请求回来后,并没有立即加入到cache中,可能需要过一段时间才会起作用,一般是200ms。
通过在组装innerHtml的前面加载这张图片来避免这个问题。
http://support.microsoft.com/kb/319546
3 img的src为空的问题:
再后来又遇到了这个奇怪的问题,页面中有个img的标签,其src设置为空,然后通过js来控制其src属性。在ie浏览器下,
通过抓包发现会浏览器会多向当前页面的根目录发起依次http请求,真是奇怪!后来查询后得知,ie认为img的src为空是一种错误的url格式,
于是发起向根目录的请求。呵呵,下次有同学发现类似的怪请求的时候需要注意啦。
通过给img的src设置一个合法的url地址来避免这个问题。
http://www.nczonline.net/blog/2009/12/22/protect-ie-from-empty-img-src/
4 jsonp导致ie crash的问题:
为了更好的提高用户体验,jquery1.4对jsonp开启了缓存模式,不是每次请求都带上一个时间戳,从而是的服务器可以缓存的请求在浏览器端得到缓存,
可是不带时间戳会导致ie浏览器直接crash。
在jquery1.4使用jsop时自带一个时间戳吧,或者尽量避免使用jsop的形式的请求。
ie上引起crash的情况还是比较多的,不过一般都可以针对性的给予规避!
HTML5的富媒体体验,浏览器厂商更多的需要在硬件层来加速各种体验了,下面来看看ie9是如何在硬件层来进行加速的吧:
Johnson在文中表示,IE9图形硬件加速能够应用到每个网页上的所有内容,图像,背景,边框,SVG的内容,HTML5视频和音频,使用Windows的DirectX图形API。在7月份发布的第三个平台预览版,IE9介绍了硬件加速应用在HTML5画布中。
IE9在渲染HTML页面中使用硬件加速的主要步骤:
[caption id="attachment_537" align="aligncenter" width="916" caption="ie浏览器html渲染过程"][/caption]
内容绘制:IE9加快了第一阶段的内容渲染,使用Windows的Direct2D和DirectWrite子系统。 加快这一阶段使用GPU(图形处理单元),提高了最常见的HTML元素的显示性能:文本,图像,背景和边框,让文字和矢量图形的显示更流畅。
页面组成:在第二阶段IE9使用Direct3D。加快这一阶段利用GPU的最显着的优势:能够以极高的速度绘制位图图像。此外,由于GPU为图像保留的私有内存,让网页图像重绘的速度非常快。
桌面组成:经过浏览器呈现的网页内容组成。Windows Vista和Windows 7使用GPU通过桌面窗口管理器(DWM)来完成最后的屏幕显示。由于IE9使用DirectX和唯一的DirectX,使得IE9和DWM有更好的互动关系。
在IE9中,开发人员能够使用完整的硬件加速。实际上,完整利用GPU是一项极具挑战性的工作,直接写至中级层和库而取代操作系统的本地支持就更加困难了,但是Windows的DirectX在对3D游戏的支持中获取了大量的经验,是当前最高性能的GPU渲染系统。
当你使用其它支持硬件加速的浏览器测试IE Test Drive网站上的项目时,你会发现其性能在某些方面能与IE9不分上下,但是在很多方面相差甚多。这种差距就反应了完整硬件加速和部分硬件加速之间的区 别。因为IE支持最新出现的Web标准,它们也可以使用完整的硬件加速。
HTML5视频的硬件加速就是一个例子,在MIX10大会上,微软演示了使用硬件加速视频的效果;3月份的时候微软还演示了在一台上网本上播放两个高清720p视频,而且仅占用了极少的CPU,其它浏览器却累惨了CPU,还出现了丢帧显现。
转自:http://www.iefans.net/ie9-tuxingjiasu/
IE下的到的innerHTML出来的结果同firefox等其它浏览器下的结果不一样,标签大写,属性没有了引号,最后一个标签加上结束符...,程序除了问题,找了半天不知道是那里的原因,在firefox下尝试一直都是没有问题的,后来才知道用户使用的是ie8的浏览器,抓包一看,问题果然是在innerHTML的获取上,ie下做了不少的手脚,于是问题出现了:
No "quotes" on some attributes (id and class in this example);
UPPERCASE tags;
Ending list item tags </li> only appear on the last list item.
呵呵,只好对ie进行特殊处理了。stainlessvision给出的解决方式是:
依据dom树的接点类型进行处理,如果是文本就进行html转义,将"<"转换为“<”,将“>”转换为">"
将原本的注释节点加上html的注释 <!-- + -->
对于含有子节点的节点,先将标签小写,然后对每一个属性都加上“,对于style和contenteditable进行加引号,然后递归处理子节点就行
innerXHTML = function($source,$string,$appendage) {
// (v0.4) Written 2006 by Steve Tucker, http://www.stevetucker.co.uk
if (typeof($source) == 'string') $source = document.getElementById($source);
if (!($source.nodeType == 1)) return false;
var $children = $source.childNodes;
var ...
Thom Holwerda 曾发表博文《Internet Explorer Turns 15 》,为我们讲述了15年以来IE沧桑的发展历程。叶欣(网名)对此文进行了翻译,现转载于此,全文如下:
IE9 beta版发布日期临近,回顾一下微软这个浏览器的历史,正是时候。首版于1995年8月6日发行,IE今天不知不觉已经15岁了。一段沧桑的历史,于下面。
我相对较年轻,因此我的IE体验始于美好回忆中的Netscape;Netscape今天依然存在,历经巨大的改变,它成了今天我们所熟知的火狐。IE是微软对网景的成功和互联网的日益流行所作出的回应。
然而,那一浏览器不是从零写起的。作为其传统的办事作风,微软获得了Spyglass Mosaic的代码库许可,从它开始建造IE。有趣的就是,在某种程度上,IE和Netscape(也就是火狐)是近亲。Marc Andreessen,Netscape的创始人,也是Mosaic的开发人员。
竞争跟着发生了,它促使IE和Netscape同时飞速发展。那时的微软在浏览器领域还不是 一个跟随者——它们也制订标准。IE 3.0首先引入了对CSS的支持,IE5引入了XMLHttpRequest,Ajax的基础。同时,Netscape通过发明blink 和 marquee等标签给让浏览体验更上一层。记得这一时候,微软发布了Comic Sans(一个似手写的字体)。
IE4发行的时候,微软做了一个3米高的巨幅”e”图标,挂在Netscape大厦破夜,上 面写着”We Love You——来自IE团队”。 Netscape把图标去掉,在顶上放置了一个巨大的恐龙图标,写下了”Netscape 72, Microsoft 18″——指的是当时它们各自的浏览器市场份额。
Netscape的笑料很快终止了。微软IE成为了更好的浏览器,而且从一开始就是免费发行的。最有力的是,它成了Windows的一部分,相当大地打消了人们下载其它浏览器的念头。IE成了占支配地位的浏览器,一度占领着96%的市场份额。
如无任何竞争可言,发展会趋于停滞。历史的使命落在了Firefox(火狐)——原先叫作Phoenix(凤凰)—身上。浴火重生,不辱使命。微软还在那儿。浏览器大战回来了!
而我们,身为用户的我们,则是这场竞争当中最大的受益者。
英文原文:http://www.osnews.com/story/23690/Internet_Explorer_Turns_15
微软的开发人员在Win95系统中加入Internet Explorer时一定没有想到,这款软件竟然改变了人们浏览互联网的方法,从Windows 95 OSR2 开始,它是随所有新版本的Windows操作系统附送的缺省浏览器.迄今为止,它依然是使用最广泛的网页浏览器,以下是一些珍贵的历史图像,让我们一起回味这青涩的Internet历史吧.
在写javascript的时候,常常会为了ie做一些特殊的事情,如使用canvas,一些ie下特有的插件啥的。这些事情在其它的浏览器又不需要,如何来只是根据ie浏览器选择对应的javascript代码呢。
ie浏览器提供了条件注释来实现这个目的。
1 如何根据浏览器的类型做一些不同的事情?
Web服务器使用useragent,如browsermatch。BrowserMatch regex [!]env-variable[=value] [[!]env-variable[=value]] ...
譬如在服务器配置压缩的时候,针对一些浏览器做一些特殊的设置,
# Netscape 4.x 有一些问题...
BrowserMatch ^Mozilla/4 gzip-only-text/html
2 能否在前端来做一些条件判断的东东?
尤其是在加载一些为特定浏览器编写的javascript和css的时候(尤其是ie),能否直接在浏览器中来做条件过滤。
ie5以及其后的版本都支持条件注释
好处:
1) 一些低版本浏览器没有支持的特性,低版本浏览器都不回去进行解析和下载。
2) 跨浏览器,向后兼容。
条件注释的语法:
1 向后隐藏的。低版本浏览器不支持的话,就不会做任何的事情。ie5以后的版本会判断条件是否为真来解释执行注释中的代码。
<!--[if expression]> HTML <![endif]-->
<!--[if IE 8]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->
当浏览器的版本号是ie8的时候才会执行下面的代码。
2 向后兼容的。低版本浏览器也会来进行解释执行。
<![if expression]> HTML <![endif]>
由于注释部分不是合法的html标签,所以会被低版本的浏览器忽略。因此代码会被执行。
<![if lt IE 9]>
<p>Please upgrade to Internet Explorer version 9.</p>
<![endif]>
条件注释中常常使用到的条件判断:
Item
Example
Comment
IE
[if IE]
The string "IE" is a feature corresponding to the version of Internet Explorer used ...
ie是一个让人无语到抓狂的浏览器。之前有一个qpak的后缀的文件,在ie下访问http://localhost/aa.qpak的时候,即使http的头部已经配置为content-type:application/octet-stream。依然没有作用,ie还是打开这个文件了,照说已经将文件类型说明为二进制类型,ie应该启动下载对话框才是,但是事与愿违。ie依然回去sniff嗅探这个文件里面的格式,从而直接进行展示。无奈之下,只好先修改mime的类型,修改为content-type:application/oct-stream,这个时候能够正常的下载了。
但是这个也并不是最好的解决方案,最好还是设置一下Content-Disposition,告诉ie来强制下载为好。修改web服务器apache的配置,通过filematch增加响应的http头部:
<Files *.qpak>
ForceType application/octet-stream
Header set Content-Disposition attachment
</Files>
事情ok了!
但是还是要说明的是,有的时候程序是通过一个php或者其它的方式来动态的吐出下载内容的话,即使你加了Content-Disposition: attachment,还必须不要设置cache头部为No-cache,expire为0,这样的结果会导致在ie下提示你下载失败。
这个问题曾经调试了一早上。杯具啊!
如果想要下载的时候提供一个默认的能够打开的程序,同时能够提供一个友好的文件名,使用Content-Disposition: attachment头部后面带的filename参数的后缀名可以解决这个问题,譬如qpak的话,指定了Content-Disposition: attachment; filename="aaa.qpak"就会使用电脑管家来打开这个文件,同时。
附赠:Content-Disposition的解释:
19.5.1 Content-Disposition The Content-Disposition response-header field has been proposed as a means for the origin server to suggest a default filename if the user requests that the content is saved to a file. This usage is derived from ...
来看看ie上什么插件最流行吧:来源:《Internet Explorer 8 性能调查白皮书》
流行度
加载项
1
Google 工具栏
2
Windows Live 登录助手
3
Adobe Acrobat Reader
4
Windows Live 工具栏
5
雅虎工具栏
6
Java 插件
7
迅雷下载管理器
8
金山网盾
9
AVG 安全防护工具栏
10
Skype
11
Norton Internet Security
12
McAfee VirusScan
13
Kapersky Internet Security
14
MSN 工具栏
15
QQ 工具栏
16
百度工具栏
17
AskBar
18
Google Browser Address Error Redirector
19
Spybot Search and Destroy
20
Adware.StickyPops