老铁们，大家好，相信还有很多朋友对于谷歌浏览器查看frame和谷歌浏览器查看保存的密码的相关问题不太懂，没关系，今天就由我来为大家分享分享谷歌浏览器查看frame以及谷歌浏览器查看保存的密码的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

本文目录

1. IE浏览器兼容问题的几点写法分享
2. 如何使用requestanimationframe对浏览器性能进行调优
3. Google和百度哪个能抓取Iframe里的内容

一、IE浏览器兼容问题的几点写法分享

用户使用的浏览器五花八门，我们要保证每一种浏览器都能兼容我们的代码，不能要求用户去改变浏览器，那么就得在我们的代码上下功夫。此时我们要用到hack。

HACK就是针对不同的浏览器写不同的HTML、CSS样式，从而使各种浏览器达到一致的渲染效果。

下面我们就分别了解一下HTML的hack和CSS的hack。

HTML的hack由注释<!---->演变而来，在高级浏览器中注释不会被加载，把IE浏览器的兼容代码写在注释中，IE浏览器会识别。

①用于写兼容的注释，标签内首位都要加！感叹号。

④不加比较单词，表示只兼容这一个版本；

比较单词：lt=less than(小于)、lte=less than or equal(小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)

<!--[if IE 6]><p>只有IE6认识我<／p><![endif]-->只要记住这一个模板就知道HTML的兼容怎么写了，下面我们列举几个：

<h1>大于等于IE9的浏览器能看到</h1>

<![endif]--><!--[if lte IE 8]>

<h1 class="red">您的浏览器版本过低，IE8及以下版本不支持新样式，请更新浏览器</h1>

<![endif]-->单独写给IE6的解决兼容问题的HTML代码：<!--[if IE 6]>

<script src="js/iepng.js?1.1.11" type="text/javascript"></script>

<script type="text/javascript">

EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');

<![endif]-->（二）、CSS的hack

CSS的hack包括：属性的hack和选择器的hack

设置css的hack要注意的是css样式的层叠性，给同一个元素设置的兼容写法必须写在后面，否则会被层叠掉。

hack符：-或_，当做前缀写在属性前面，中间不加空格

在属性名前面加短横-或者下划线_(原理：高级浏览器及其他浏览器会认为这个前缀符号是一个unknown property name)，未知的属性名，不会报错，不予加载。

background:red;//高级浏览器识别_background:pink;//仅IE6识别

hack符： `~!@#$% ^&*()+= [ ]|<>,.中的任一字符，作为前缀写在属性前面

background:red;//高级浏览器识别！background:pink;//仅IE6、7识别③只兼容IE8的hack

hack符：\0/，必须写在属性值与分号之间，中间不加空格

background:red;//高级浏览器识别background:pink\0/;//仅IE8识别④兼容IE8、9、10的hack

hack符：\0，必须写在属性值与分号之间，中间不加空格

background:red;//高级浏览器识别background:pink\0;//IE8、9、10识别⑤兼容IE6、7、8、9、10

hack符：\9，必须写在属性值与分号之间，中间不加空格

给选择器添加hack，这个选择器中的样式都是IE兼容样式，其他高级浏览器不识别，同理给同一个选择器设置的兼容样式要写在高级浏览器可识别的常规样式后面，否则会被层叠

hack符：* html，*和html之间有空格，再加一个空格，后面写选择器

<！--兼容写法-->* html.box{

hack符：，英文逗号，写在选择器后面，不加空格

border: 10px solid red;③兼容IE6以外的其他版本的hack

hack符：html>body，写在选择器前面，与选择器之间有一个空格隔开

hack符：html>/**/或html~/**/,写在选择器前面，与选择器之间有一个空格隔开

}用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10中的各种兼容性问题。

在网站前端写代码的过程中，很多时间IE各个版本的兼容问题很难整。现在百度与谷歌都有了一行解决这种兼容性的代码了。如下面的。

百度也应用了这种方案去解决IE的兼容问题

2<htmlxmlns=;

4<metahttp-equiv=Content-Typecontent=“text/html;charset=utf-8″>

5<metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7>

6<title>百度一下，你就知道</title>

7<script>varwpo={start:newDate*1,pid:109,page:‘superpage’}</script>

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度，右键查看源码看下！我们可以看下文件头是否存在这样一行代码！

这句话的意思是强制使用IE7模式来解析网页代码！

8<metahttp-equiv=“X-UA-Compatible”content=“IE=8″>

2. Google Chrome Frame也可以让IE用上Chrome的引擎:

9<metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>

10<metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!_ IE7 mode _>

12<metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!_ IE7 mode _>

4.强制IE8使用IE6或IE5模式来解析

13<metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!_ IE6 mode _>

14<metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!_ IE5 mode _>

5.如果一个特定版本的IE支持所要求的兼容性模式多于一种，如：

15<metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>

二、如何使用requestanimationframe对浏览器性能进行调优

写缓动函数用到requestAnimationFrame函数，之前了解过一些，但总觉得又不是很了解，所以翻译一篇老外的文章，以便学习分享。 requestAnimationFrame是什么？以前我们做动画需要一个定时器，每间隔多少毫秒就做出一些改变。现在有个好消息：浏览器厂商已经决定提供一个专门做动画的方法，即requestAnimationFrame()，而且基于浏览器的层面也能更好的进行优化。但是呢，这只是一个做动画的基础API，即不基于DOM元素的style变化，也不基于canvas，或者WebGL。所以，具体的动画细节需要我们自己写。我们为什么要用它？对于同时进行的n个动画，浏览器能够进行优化，把原本需要N次reflow和repaint优化成1次，这样就实现了高质量的动画。举个例子，现在有基于JS的动画，还有基于CSS的transitions，或者SVG SMIL. Plus，如果浏览器的某个tab正在运行这样一个动画，然后你切到另一个tab，或者干脆最小化，总之就是你看不见它了，这时浏览器就会停止动画。这将意味着更少的CPU，GPU和更少的内存消耗，这样电池的使用寿命就大大延长了。如何使用它？复制代码代码如下:// shim layer with setTimeout fallback window.requestAnimFrame=(function(){ return window.requestAnimationFrame window.webkitRequestAnimationFrame window.mozRequestAnimationFrame window.oRequestAnimationFrame window.msRequestAnimationFrame function(/* function*/ callback,/* DOMElement*/ element){ window.setTimeout(callback, 1000/ 60);};})();// usage:// instead of setInterval(render, 16)....(function animloop(){ render(); requestAnimFrame(animloop, element);})();注意：这里我使用了“requestAnimFrame”，因为规范仍在不断变化中，我并不想任由规范摆布。 requestAnimationFrame API复制代码代码如下: window.requestAnimationFrame(function(/* time*/ time){// time~=+new Date// the unix time},/* optional bounding elem*/ elem);先给出Chrome和Firefox的版本复制代码代码如下: window.mozRequestAnimationFrame([callback]);// Firefox window.webkitRequestAnimationFrame(callback[, element]);// Chrome参数： callback:（FF可选，Chrome必选）下次repaint调用的函数，函数的第一个参数是当前时间 element：（FF无）意译一下吧：其实就是画布了，而那个‘画'，是动画。（the element that visually bounds the entire animation）。对canvas和WebGL来说，它就是<canvas>元素，对于DOM节点来说，你可以不管它，如果你想稍微进行一下优化，也可以传个参数进来。它到底靠不靠谱啊？现在，Webkit实现（Nightly Safari和 Chrome Dev Channel可用）和Mozilla实现（FF4可用）有一些的差异，Mozilla的实现有一个Bug。事实上，FF动画的帧数是这么算的：1000/(16+ N) fps，其中N是callback的执行时间，单位为毫秒。如果你的callback执行时间为1000ms，那么它最高的帧数也就只有1fps。如果你的callback执行时间为1ms，那么帧数差不多就是60fps。这个bug肯定会被修复，也许就是FF4的下一个版本吧。Chrome10没有time参数（added in m11.弱弱的问下，m11是什么？），FF目前没有element参数。我看了下火狐的那个bug，大概就是说： FF的mozRequestAnimationFrame()永远不可能达到60fps，即使你的callback执行时间小于1000/60毫秒。举个例子：复制代码代码如下: function callback(time){ window.mozRequestAnimationFrame(callback); doWork();}如果doWork()耗时1000/60毫秒，那么帧数大约是30fps，而同样的动画如果使用setTimeout(callback, 16)，帧速则是60fps。似乎callback总是在callback执行完毕后的大约16ms再次开始执行，而不是在callback开始执行后的16ms再次开始执行，如果是后者，且计算又够快的话，就能产生60fps的帧数。如果你是规范控，传送门在此话不多说，首先来个经典的动画函数：复制代码代码如下: function animate(element, name, from, to, time){ time= time 800;//默认0.8秒 var style= element.style, latency= 60,//每60ms一次变化 count= time/ latency,//变化的次数 step= Math.round((to- from)/ count),//每一步的变化量 now= from; function go(){ count--; now= count? now+ step: to; style[name]= now+'px'; if(count){ setTimeout(go, latency);}} style[name]= from+'px'; setTimeout(go, latency);}姑且不论这个函数的设计存在局限性，如只能对以px为单位的样式进行修改。仅从函数的实现上来看，这可以是一个非常经典的动画理念，其基本逻辑由以下部分组成：获取起点值from和终点值to，通过动画需要进行的时间time，以及每侦间隔latency的要求，计算出值的改变次数count和每次改变的量step。开启setTimeout(fn, latency);来步进到下一侦。在下一侦中，设置属性步进一次，如果动画还没结束，再回到第2步继续下一侦。这个函数工作得很好，服务了千千万万的站点和系统，事实上jQuery的animate函数的核心也无非是setInterval函数。但是，随着现在系统复杂度的稳步上升，动画效果也越来越多，同时对动画的流畅度也有了更多的重视，这导致上面的函数会出现一些问题。例如同时打开100个动画效果，根据上面的函数，很明显会有100个定时器在同时运行，这些定时器之间的调度会对性能有轻微的影响。虽然在正常的环境中，这些许的影响并不会有什么关系，但是在动画这种对流畅度有很高要求的环境下，任何细微的影响都可能产生出不好的用户体验。在这样的情况下，有一些开发者就发明了一种基于统一帧管理的动画框架，他使用一个定时器触发动画帧，不同的动画来注册这些帧，在每一帧上处理多个动画的属性变化。这样的好处是减少了定时器调度的开销，但是对于动画框架的开发者来说，统一帧管理、提供监听帧的API等，都是需要开发和维护的。浏览器的直接支持最终，浏览器厂商们发现这件事其实可以由他们来做，并且基于浏览器层面，还可以有更多的优化，比如：对于一个侦中对DOM的所有操作，只进行一次Layout和Paint。如果发生动画的元素被隐藏了，那么就不再去Paint。于是，浏览器开始推出一个API，叫做requestAnimationFrame，关于这个函数，MDC的相关页面有比较详细的介绍，简单来说，这个函数有2种使用方法：调用requestAnimationFrame函数，传递一个callback参数，则在下一个动画帧时，会调用callback。不传递参数地直接调用该函数，启动动画帧，下一个帧触发时，会同时触发window.onmozbeforepaint事件，可以通过注册该事件来进行动画。第2种方法由于依赖于Firefox自己的事件，且beforepaint事件还没进入到标准中，所以不推荐使用，还是使用第1种方式比较好。此时，我们的动画逻辑可以变成这样：记录当前时间startTime，作为动画开始的时间。请求下一帧，带上回调函数。下一帧触发时，回调函数的第一个参数为当前的时间，再与startTime进行比较，确定时间间隔ellapseTime。判断ellapseTime是否已经超过事先设定的动画时间time，如果超过，则结束动画。计算动画属性变化的差值differ= to- from，再确定在ellapseTime的时候应该变化多少step= differ/ time* ellapseTime。计算出现在应该变化到的位置Math.round(from+ step)，并重新对样式赋值。继续请求下一帧。新的动画函数下面就是一个全新的动画函数：复制代码代码如下: function animate(element, name, from, to, time){ time= time 800;//默认0.8秒 var style= element.style, startTime= new Date; function go(timestamp){ var progress= timestamp- startTime; if(progress>= duration){ style[name]= to+'px'; return;} var now=(to- from)*(progress/ duration); style[name]= now.toFixed()+'px'; requestAnimationFrame(go);} style[name]= from+'px'; requestAnimationFrame(go);}到这一步，还剩一个问题，那就是并不是每个浏览器都支持requestAnimationFrame函数的，所以再做一个简单的修正。根据Firefox的特性来看，其mozRequestAnimationFrame提供的最高FPS为60，并且会根据每一帧的计算的耗时来进行调整，比如每一帧计算用了1s，那他只会提供1FPS的动画效果。而Chrome的高版本同样也实现了这个函数，叫webkitRequestAnimationFrame，可以预见未来还会有Opera的oRequestAnimationFrame和IE的msRequestAnimationFrame，所以这里一并做一个简单的兼容处理：复制代码代码如下: requestAnimationFrame= window.requestAnimationFrame window.mozRequestAnimationFrame window.webkitRequestAnimationFrame window.msRequestAnimationFrame window.oRequestAnimationFrame function(callback){ setTimeout(callback, 1000/ 60);};

三、Google和百度哪个能抓取Iframe里的内容

1、< IFRAME>标签内容可完全被百度和谷歌搜索引擎抓取，不过百度和谷歌都提到过：不建议使用frame和iframe框架结构，通过iframe显示的内容可能会被百度和谷歌丢弃，所以，如果要做网站优化的话，不要将有用信息放在Iframe中或swf以及js中，这些都对蜘蛛或机器人不友好。< IFRAME>标签对搜索引擎十分不友好而已。另外< IFRAME>标签影响了搜索引擎的收录和快照，所以各位站长尽量不要用< IFRAME>标签来调用外部页面，是在需要的话，可以使用JS或< object>标签，随便说一句，使用< object>标签的话，用手机浏览网站的话，调用页面是不显示的!

2、那为什么要少用< IFRAME>呢？因为：

iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM元素的创建慢了 1-2个数量级。

使用 iframe的页面一般不会包含太多 iframe，所以创建 DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload事件以及连接池(connection pool)。

及时触发 window的 onload事件是非常重要的。onload事件触发使浏览器的“忙”指示器停止，告诉用户当前网页已经加载完毕。当 onload事件加载延迟后，它给用户的感觉就是这个网页非常慢。

window的 onload事件需要在所有 iframe加载完毕后(包含里面的元素)才会触发。在 Safari和 Chrome里，通过 JavaScript动态设置 iframe的 SRC可以避免这种阻塞情况。

浏览器只能开少量的连接到web服务器。比较老的浏览器，包含 Internet Explorer 6& 7和 Firefox 2，只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+和 Opera 9+可同时对一个域名打开 4个连接，Chrome 1+, IE 8以及 Firefox 3可以同时打开 6个。你可以通过这篇文章查看具体的数据表：Roundup on Parallel Connections.

有人可能希望 iframe会有自己独立的连接池，但不是这样的。绝大部分浏览器，主页面和其中的 iframe是共享这些连接的。这意味着 iframe在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe里的内容是没有主页面的内容重要的。这时 iframe中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe的 SRC。

美国前 10大网站都使用了 iframe。大部分情况下，他们用它来加载广告。这是可以理解的，也是一种符合逻辑的解决方案，用一种简单的办法来加载广告服务。但请记住，iframe会给你的页面性能带来冲击。只要可能，不要使用 iframe。当确实需要时，谨慎的使用他们。

关于谷歌浏览器查看frame的内容到此结束，希望对大家有所帮助。