浏览器工作原理和兼容方案

浏览器的工作原理

    1.解析HTML构建DOM树

    2.构建渲染树

    3.对渲染树进行布局

    4.绘制渲染树

 浏览器加载资源的顺序：

                          最高级：html,css,font

                          然后：js，xhr

                          然后是多媒体：图片-语音-视频

                          最后：prefetch预加载的资源

                          根据实际的规则，浏览器会对加载的资源顺序有所调整：

                          同步的xhr请求优先级最高

                          如果图片的视图在可见范围之内，优先加载图片

浏览器的兼容；

      1.CSS兼容

        CSS Reset 

        HTML 标签在浏览器中都有默认的样式，不同的浏览器的默认样式存在差别

        CSS Reset:就是指开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，从而尽可能地避免跨浏览器的差异，例如下代码：

 body{
                line-height:1.4;
                color:#333;
                font-family:arial;
                font-size: 12px;
                background:white;
            }
            input,textarea,select{
                font-size:12px;
                font-size:100%;
                font-family:arial;
                font-family:inherit;
            }
            body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
                margin:0;
            }
            h4,h5,h6{
                font-size:1em;
            }
            ul,ol{
                padding-left:0;
                list-style-type:none;
            }
            /*image with no-border*/
            a img{border:0;}
            img{border:0;}

CSS  Hack ：指的是不同的浏览器对css解析结果不相同，导致相同的css输出的页面效果不同

CSS hack的写法大致归纳为3种：条件hack、属性级hack、选择符级hack。

                                                              条件hack：语法：

                                                              属性级hack：语法：

                                                              选择符级hack：语法：

  

2.js兼容方案：  

 1.键盘检测兼容写方法
                  var key = e.keyCode || e.which || e.charCode;
                2.阻止冒泡事件冒泡的兼容
                  e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;
                3.鼠标箭头事件对象的兼容
                  obj.onclick = function(evt){
                        var e = evt || event;
                                alert(e);
                            }
                4.阻止浏览器默认事件兼容
                  e.preventDefault?e.preventDefault():e.returnValue = false;
                5.获取非行间样式的兼容写法
                  function getStyle(obj,sName){
                  if(obj.currentStyle){
                  return obj.currentStyle[sName];
                  }else{
                  return getComputedStyle(obj,false)[sName];
                  }
                  }
                6.ajax核心对象的兼容写法
                  let xhr;
                  if (window.ActiveXObject) { //ie
                        xhr = new ActiveXObject("Microsoft.XMLHttp");
                    } else { //非ie
                        xhr =  new XMLHttpRequest();
                }