八、如何解决浏览器的兼容性问题？浏览器调优都用到过哪些方法 · 40个JavaScript面试必考点

## 一、常见的浏览器内核常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit ![](http://nhfcloms-deveopler.oss-cn-beijing.aliyuncs.com/dwwb/portal/project/1635153476674/01.png) ## 二、常见的兼容性问题 ### 1、html 兼容性问题 **问题：HTML5新的语义标签在低版本的老IE浏览器中存在兼容性问题** 解决方案：引用第三方解析库 ``` <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> ``` ### 2、css 兼容性问题 #### （1）常见问题 **问题一：不同浏览器的标签默认的外补丁和内补丁不同** - 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大 - 解决方案：css里 `*{margin:0;padding:0;}` - 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0 **问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大** - 问题症状:常见症状是ie6中后面的一块被顶到下一行 - 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 - 备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。 **问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度** - 问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度 - 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 - 备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高 **问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）** - 问题症状：ie6里的间距比超过设置的间距 - 解决方案：在display:block;后面加入display:inline;display:table; - 备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:table。 **问题五：图片默认有间距** - 问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加上问题一中提到的通配符也不起作用。 - 解决方案：使用float属性为img布局 - 备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道 **问题六：标签最低高度设置min-height不兼容** - 问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容 - 解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;} - 备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。 **问题七：透明度的兼容css设置** - 问题症状：IE9以下浏览器不能使用opacity - 解决方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); **问题八：IE6下div高度无法小于10px** - 问题症状：比如定义一条高2px的线条，FF和IE7都正常，但IE6就是10px - 解决方案：添加overflow属性或设置fontsize大小为高度大小。如： ``` <div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div> <div style="height:2px;font-size:2px;background:#000000;width:778px;"> </div> ``` **问题九：鼠标的手势也有问题** - 问题症状：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持 - 解决方案：统一使用cursor:pointer **问题十：chrome下默认会将小于12px的文本强制按照12px来解析** - 解决方案：添加属性 ``` -webkit-text-size-adjust: none; ``` #### （2）css hack 我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. 　　CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。　　 **1、IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才会执行里边的代码。** ```     ``` **2、CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important FireFox不能识别 * _ \9** ``` /* CSS属性级Hack */ color:red; /* 所有浏览器可识别*/ _color:red; /* 仅IE6 识别 */ *color:red; /* IE6、IE7 识别 */ +color:red; /* IE6、IE7 识别 */ *+color:red; /* IE6、IE7 识别 */ [color:red; /* IE6、IE7 识别 */ color:red\9; /* IE6、IE7、IE8、IE9 识别 */ color:red\0; /* IE8、IE9 识别*/ color:red\9\0; /* 仅IE9识别 */ color:red \0; /* 仅IE9识别 */ color:red!important; /* IE6 不识别!important 有危险*/ ``` 说明：在标准模式中 - “-″减号是IE6专有的hack - “\9″ IE6/IE7/IE8/IE9/IE10都生效 - \0″ IE8/IE9/IE10都生效，是IE8/9/10的hack - “\9\0″ 只对IE9/IE10生效，是IE9/10的hack **3、选择器前缀法，顾名思义，就是给选择器加上前缀。** ``` *html #demo { color:red;} /* 仅IE6 识别 */ *+html #demo { color:red;} /* 仅IE7 识别 */ body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */ :root #demo { color:red\9; } : /* 仅IE9识别 */ ``` #### （3）css reset CSS Reset，意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值，通常为了避免重复定义元素样式，需要进行重置默认样式（CSS Reset） ``` body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } ``` ### 3、javascript 兼容性问题 **（1）获取屏幕宽高** ``` var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽 var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽 //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框 var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽 var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高 var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高 var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离 var screenH=window.screen.height;//屏幕分辨率的高 var screenW=window.screen.width;//屏幕分辨率的宽 var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox） var screenXX=window.screenX;//FireFox相对于屏幕的X坐标 var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox） var screenYY=window.screenY;//FireFox相对于屏幕的y坐标 ``` **（2）event事件问题** ``` document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持； var e=ev; console.log(e); } document.onclick=function(){//谷歌和IE支持，火狐不支持； var e=event; console.log(e); } document.onclick=function(ev){//兼容写法； var e=ev||window.event; var mouseX=e.clientX;//鼠标X轴的坐标 var mouseY=e.clientY;//鼠标Y轴的坐标 } ``` **（3）DOM节点相关的问题** ``` //DOM节点相关，主要兼容IE 6 7 8 function nextnode(obj){//获取下一个兄弟节点 if (obj.nextElementSibling) { return obj.nextElementSibling; } else{ return obj.nextSibling; }; } function prenode(obj){//获取上一个兄弟节点 if (obj.previousElementSibling) { return obj.previousElementSibling; } else{ return obj.previousSibling; }; } function firstnode(obj){//获取第一个子节点 if (obj.firstElementChild) { return obj.firstElementChild;//非IE678支持 } else{ return obj.firstChild;//IE678支持 }; } function lastnode(obj){//获取最后一个子节点 if (obj.lastElementChild) { return obj.lastElementChild;//非IE678支持 } else{ return obj.lastChild;//IE678支持 }; } ``` **（4）document.getElementsByClassName问题** ``` //通过类名获取元素 document.getElementsByClassName('');//IE 6 7 8不支持； //这里可以定义一个函数来解决兼容问题，当然别在这给我提jQuery... //第一个为全局获取类名，第二个为局部获取类名 function byClass1(oClass){//全局获取，oClass为你想要查找的类名，没有“.” var tags=document.all?document.all:document.getElementsByTagName('*'); var arr=[]; for (var i = 0; i < tags.length; i++) { var reg=new RegExp('\\b'+oClass+'\\b','g'); if (reg.test(tags[i].className)) { arr.push(tags[i]); }; }; return arr;//注意返回的也是数组，包含你传入的class所有元素； } function byClass2(parentID,oClass){//局部获取类名，parentID为你传入的父级ID var parent=document.getElementById(parentID); var tags=parent.all?parent.all:parent.getElementsByTagName('*'); var arr=[]; for (var i = 0; i < tags.length; i++) { var reg=new RegExp('\\b'+oClass+'\\b','g'); if (reg.test(tags[i].className)) { arr.push(tags[i]); }; }; return arr;//注意返回的也是数组，包含你传入的class所有元素； } ``` **（5）获取元素的非行间样式值** ``` //获取元素的非行间样式值 function getStyle(object,oCss) { if (object.currentStyle) { return object.currentStyle[oCss];//IE }else{ return getComputedStyle(object,null)[oCss];//除了IE } } ``` **（6）设置监听事件** ``` //设置监听事件 function addEvent(obj,type,fn){//添加事件监听，三个参数分别为对象、事件类型、事件处理函数，默认为false if (obj.addEventListener) { obj.addEventListener(type,fn,false);//非IE } else{ obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了 }; } function removeEvent(obj,type,fn){//删除事件监听 if (obj.removeEventListener) { obj.removeEventListener(type,fn,false);//非IE } else{ obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了 }; } ``` **（7）元素到浏览器边缘的距离** ``` //在这里加个元素到浏览器边缘的距离，很实用 function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框） var ofL=0,ofT=0; while(obj){ ofL+=obj.offsetLeft+obj.clientLeft; ofT+=obj.offsetTop+obj.clientTop; obj=obj.offsetParent; } return{left:ofL,top:ofT}; } ``` **（8）阻止事件传播** ``` //js阻止事件传播，这里使用click事件为例 document.onclick=function(e){ var e=e||window.event; if (e.stopPropagation) { e.stopPropagation();//W3C标准 }else{ e.cancelBubble=true;//IE.... } } ``` **（9）阻止默认事件** ``` //js阻止默认事件 document.onclick=function(e){ var e=e||window.event; if (e.preventDefault) { e.preventDefault();//W3C标准 }else{ e.returnValue='false';//IE.. } } ``` **（10）关于EVENT事件中的target** ``` //关于event事件中的target document.onmouseover=function(e){ var e=e||window.event; var Target=e.target||e.srcElement;//获取target的兼容写法，后面的为IE var from=e.relatedTarget||e.fromElement;//鼠标来的地方，同样后面的为IE... var to=e.relatedTarget||e.toElement;//鼠标去的地方 } ``` **（11）鼠标滚轮滚动事件** ``` //鼠标滚轮事件 //火狐中的滚轮事件 document.addEventListener("DOMMouseScroll",function(event){ alert(event.detail);//若前滚的话为 -3，后滚的话为 3 },false) //非火狐中的滚轮事件 document.onmousewheel=function(event){ alert(event.detail);//前滚：120，后滚：-120 } ``` ## 三、常见的浏览器调优方法： #### 优化原则： - dns是否通过缓存减少查询时间 - 网络请求走最近的网络环境 - 相同的静态资源缓存 - 减小请求的大小 - 服务端渲染优化 #### 1、减少http请求，合理设置 HTTP缓存 http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。 - 简单的图片效果可以使用html+css、canvas或者svg来替换。 - 合并CSS、合并javascript、合并图片（webpack等包管理工具） - 图片格式，大小选择，图片优化 #### 2、应用浏览器缓存 - http缓存（文件级缓存） ``` <meta http-equiv="Cache-Control" content="max-age=7200" /> <meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" /> ``` - cookie: 储存在用户本地终端上的数据(通常经过加密)有长度和个数限制，浏览器端也可以通过document.cookie来获取cookie，并通过js浏览器端也可以方便地读取/设置cookie的值。 - localStorage: localStorage是html5的一种新的本地缓存方案，目前用的比较多，一般用来存储ajax返回的数据，加快下次页面打开时的渲染速度。localStorage大小有限制，不适合存放过多的数据，如果数据存放超过最大限制会报错，并移除最先保存的数据。localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据 **localStorage核心API**： ``` localStorage.setItem(key, value) //设置记录 localStorage.getItem(key) //获取记录 localStorage.removeItem(key) //删除该域名下单条记录 localStorage.clear() //删除该域名下所有记录 ``` 注：localStorage对象的属性值只能是字符串，json对象可以借助JSON类，将对象转换成字符串保存，然后在取出来的时候将json字符串转换成真正可用的json对象格式。 - sessionStorage： sessionStorage和localstorage类似，但是浏览器关闭则会全部删除，api和localStorage相同，实际项目中使用较少。 - application cache application cahce是将大部分图片资源、js、css等静态资源放在manifest文件配置中。当页面打开时通过manifest文件来读取本地文件或是请求服务器文件。 #### 3、启用压缩在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。采用网上在线压缩工具（jQuery MiniUI）自己压缩或者通过webpack、gulp等打包工具进行压缩处理。 #### 4、CSS Sprites CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。 CSS Sprites为一些大型的网站节约了带宽，提高了用户的加载速度和用户体验，不需要加载更多的图片 #### 5、LazyLoad Images 对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。 - jqueryLazyload方式 - echo.js方式 #### 6、CSS放在页面最上部，javascript放在页面最下面 head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document complete 时，或者特定区块后引入和执行 JavaScript。而 CSS 应当写在 head 中，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。