08_如何解决浏览器的兼容性问题？浏览器调优都用到过哪些方法

2020-04-15  本文已影响0人  沐向

一、常见的浏览器内核

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

二、常见的兼容性问题

1、html 兼容性问题

问题：HTML5新的语义标签在低版本的老IE浏览器中存在兼容性问题

解决方案：引用第三方解析库

<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

2、css 兼容性问题

（1）常见问题

问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度

问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）

问题五：图片默认有间距

问题六：标签最低高度设置min-height不兼容

问题七：透明度的兼容css设置

问题八：IE6下div高度无法小于10px

<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>

问题九：鼠标的手势也有问题

问题十：chrome下默认会将小于12px的文本强制按照12px来解析

-webkit-text-size-adjust: none;

（2）css hack

我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.

CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。

1、IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。

<!--  lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->

<!-- [if IE]>
   你想要执行的代码 
<![endif]-->

<!-- [if lt IE 8]>
   你想要执行的代码 
<![endif]-->

<!-- [if ! IE 8]>
   你想要执行的代码 
<![endif]-->

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 有危险*/

说明：在标准模式中

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.formElement;//鼠标来的地方，同样后面的为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
}

三、常见的浏览器调优方法：

优化原则：

1、减少http请求，合理设置 HTTP缓存

http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。

减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

2、应用浏览器缓存

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />

localStorage核心API：

localStorage.setItem(key, value) //设置记录
localStorage.getItem(key) //获取记录
localStorage.removeItem(key) //删除该域名下单条记录
localStorage.clear() //删除该域名下所有记录

注：localStorage对象的属性值只能是字符串，json对象可以借助JSON类，将对象转换成字符串保存，然后在取出来的时候将json字符串转换成真正可用的json对象格式。

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

对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。

6、CSS放在页面最上部，javascript放在页面最下面

head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document complete 时，或者特定区块后引入和执行 JavaScript。而 CSS 应当写在 head 中，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。

上一篇下一篇

猜你喜欢

热点阅读