web前端面试题总结笔记-10.9

HTML和CSS部分

1.清除浮动的几种方式

        /* 最好方法使用:after */

        div:after{
            content: '';
            clear: both;
            display: block;
            width: 0;
            height: 0;
        }

        /* 或者新建一个空元素来清除浮动 */

        .clear{
            clear: both;
            height: 0;
            line-height: 0;
            font-size: 0;
        }

        /* 给父元素增加overflow属性 */

        .over-flow{
            over-flow: auto;
            zoom: 1; /*处理兼容性问题*/
        }

2.引入样式link与import区别

    <!--link方式-->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!--import方式-->
    <style type="text/css">
        @import url(style01.css);
    </style>

• 区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• 区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

3.CSS画三角形

div{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom-color: red;/*下边框，向上的三角形*/
        }

4.不使用border新建一个一像素的直线

<div style="height:1px; background-color: red; overflow: hidden; width: 100%"></div>

5.HTML5新特性

<li>语义化标签 nav header footer section aside</li>
<li>绘图的canvas</li>
<li>媒体的video和audio</li>
<li>localStorage与sessionStorage</li>
<li>表单控件：calendar、date、time、email、url、search</li>
<br/>
<h3>html5 与 html可以使用标签或者doctype区分</h3>
<br>
<h3>语义化使HTML结构更清晰，便于浏览器解析，利于SEO搜索，使代码更好理解，便于维护</h3>

6.CSS3动画

            /*2D转换 transform*/
            transform: translate(-20px, -20px); /*坐标内移动*/
            transform: rotate(45deg); /*旋转*/
            transform: scale(0.8); /*缩放*//*给定的宽度（X 轴）和高度（Y 轴）参数。transform: scale(2,4);*/
            transform: skew(0, 20deg); /*倾斜*/
            transform: matrix(0, 0, 0, 0, 0, 0); /*把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素*/

            /*3D转换*/
            transform: rotateX(120deg); /*元素围绕其 X 轴以给定的度数进行旋转*/
            transform: rotateY(120deg); /*元素围绕其 Y 轴以给定的度数进行旋转*/

            /*transition 过渡效果*/
            transition-property: all; /*执行动画对应属性 color background*/
            transition-duration: 5s; /*动画持续时间*/
            transition-timing-function: linear; /*动画变化的速率 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier */
            transition-delay: 5s; /*延迟多久开始动画*/
            transition: all 5s linear 5s;

            /*animation 动画*/
            animation-name: name;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 5s;
            animation-iteration-count: infinite; /*指定元素播放动画的循环次数 infinite | <number>*/
            animation-direction: normal; /*指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。*/
            animation-play-state: paused; /*控制元素动画的播放状态*/
            animation: name 5s linear 5s infinite normal paused;

7.CSS垂直和水平居中的几种方式

<section style="position: relative">
    不固定宽高<br/>
    position: absolute;<br/>
    top: 50%;<br/>
    left: 50%;<br/>
    margin-left: -25%;<br/>
    margin-top: -25%;<br/>
    <style>
        #div1{
            width:15vw;
            height: 15vw;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25%;
            margin-top: -25%;
            background-color: #666666;
        }
    </style>
    <div id="div1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
    </div>
</section>
<section>
    不固定宽高<br/>
    transform:translate(50%,50%)
    <style>
        #div2{
            width:15vw;
            height: 15vw;
            overflow: hidden;
            transform:translate(50%,50%);
            background-color: #666666;

        }
    </style>
    <div id="div2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
    </div>
</section>
<section style="position: relative">
    固定宽高<br/>
    position: absolute;<br/>
    left: 0;<br/>
    top: 0;<br/>
    bottom: 0;<br/>
    right: 0;<br/>
    margin: auto;<br/>
    <style>
        #div3{
            width:15vw;
            height: 15vw;
            overflow: hidden;
            background-color: #666666;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;

        }
    </style>
    <div id="div3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
    </div>
</section>
<section style="display: flex;
            justify-content: center;
            align-items: center;">

    父元素使用：<br/>
    display: flex;<br/>
    justify-content: center;<br/>
    align-items: center;<br/>
    <style>
        #div4{
            width:15vw;
            height: 15vw;
            overflow: hidden;
            background-color: #666666;
        }
    </style>
    <div id="div4">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
    </div>
</section>
<section style="display: grid">
    grid布局<br/>
    父元素：display:grid;<br/>
    子元素：align-self: center;<br/>
    justify-self: center;<br/>
    <style>
        #div5{
            width:15vw;
            height: 15vw;
            overflow: hidden;
            background-color: #666666;
            align-self: center;
            justify-self: center;

        }
    </style>
    <div id="div5">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
    </div>
</section>
<section style="display: table">
    父盒子宽高为100%<br/>
    table布局<br/>
    父元素：display:table;<br/>
    子元素：display:table-cell
    text-align: center;<br/>
    verical-align: middle;<br/>
    <style>
        #div6{
            width:15vw;
            height: 15vw;
            overflow: hidden;
            background-color: #666666;
            display: table-cell;
            text-align: center;
            vertical-align: middle;

        }
    </style>
    <div id="div6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
    </div>
</section>

 

 

JavaScript

1.闭包

function f() {
        var i = 0;
        function f1() {
            i++;
            return console.log(i);
        }
    }
    //f1访问了构造函数f里的变量i
    //就是闭包

2.JS继承的几种方式

<script>
    var main = document.getElementById('main');

    function log(s, color) {
        this.color = color || '';
        var p = document.createElement('p');
        p.setAttribute('class', this.color);
        p.innerHTML = s;
        main.appendChild(p);
    }


    // JS继承实现方式

    //定义一个动物类
    function Animal(name) {
        //属性
        this.name = name || 'Animal';
        //实例方法
        this.sleep = function () {
            return this.name + '正在睡觉！';
        }
    }

    //原型方法
    Animal.prototype.eat = function (food) {
        return this.name + '正在吃' + food;
    }
    var ani = new Animal('cat');
    //Test Code
    log(ani.eat('fish'));

    // 1.原型链继承
    // 核心：将父类的实例作为子类的原型
    // 特点
    //     父类新增原型方法/原型属性，子类都能访问到
    //     简单、易于实现
    //
    //     无法实现多继承
    //     无法向父类构造函数传参
    log('原型链继承', 'red')

    function Cat() {
    }

    Cat.prototype = new Animal();
    Cat.prototype.name = 'cat';
    Cat.prototype.eateat = function (food) {
        return 'cat又吃' + food;
    }
    //
    //Test Code
    var cat = new Cat();
    log(cat.name);
    log(cat.eat('fish'));
    log(cat.sleep());
    log(cat.eateat('fish'));
    log(cat instanceof Animal); //true
    log(cat instanceof Cat); //true

    // 2.构造继承
    // 核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类
    // 特点：
    //     可以实现多继承（call多个父类对象）
    //     创建子类实例时，可以向父类传递参数
    //
    //     缺点只能继承父类的实例属性和方法，不能继承原型属性/方法
    //     无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
    log('构造继承', 'red')

    function Cat1(name) {
        Animal.call(this);
        this.name = name || 'Tom';
    }

    //Test Code
    var cat1 = new Cat1();
    log(cat1.name);
    log(cat1.sleep());
    log(cat1 instanceof Animal); //false
    log(cat1 instanceof Cat1); //true

    // 3.实例继承
    // 核心：为父类实例添加新特性，作为子类实例返回
    // 不支持多继承
    log('实例继承', 'red');

    function Cat2(name) {
        var instance = new Animal();
        instance.name = name || 'Tom';
        return instance;
    }

    //Test Code
    var cat2 = new Cat2();
    log(cat2.name);
    log(cat2.sleep());
    log(cat2 instanceof Animal); // true
    log(cat2 instanceof Cat2); // false

    // 4.拷贝继承
    // 支持多继承
    // 效率低，内存占用高（因为要拷贝父类属性）
    log('拷贝继承', 'red');
    function Cat3(name) {
        var animal = new Animal();
        for (var p in animal) {
            Cat3.prototype[p] = animal[p];
        }
        Cat3.prototype.name = name || 'Tom';
    }

    // Test Code
    var cat3 = new Cat3();
    log(cat3.name);
    log(cat3.sleep());
    log(cat3 instanceof Animal); // false
    log(cat3 instanceof Cat3); // true

    // 5.组合继承
    // 核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用
    // 弥补了方式2的缺陷，可以继承实例属性或方法，也可以继承原型属性和方法
    // 不存在引用属性共享问题
    // 可传参
    // 函数可复用
    // 缺点 调用了两次父类构造函数，生成了两份实例

    log('组合继承', 'red');
    function Cat4(name) {
        Animal.call(this);
        this.name =name || 'Tom';
    }
    Cat4.prototype = new Animal();
    //组合继承也需要修复构造函数指向
    Cat4.prototype.constructor = Cat4;
    var cat4 = new Cat4();
    log(cat4.name);
    log(cat4.sleep());
    log(cat4 instanceof Animal); // true
    log(cat4 instanceof Cat4); // true

    // 6.寄生组合继承
    // 核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法或属性，避免组合继承的缺点
    // 堪称完美
    // 实现较为复杂

    log('寄生组合继承','red');
    function Cat5(name) {
        Animal.call(this);
        this.name = name || 'Tom';
    }
    (function () {
        //创建一个没有实例方法的类
        var Super =function () {

        };
        Super.prototype = Animal.prototype;
        //将实例作为子类的原型
        Cat5.prototype = new Super();
    })();

    Cat5.prototype.constructor =Cat5;

    // Test Code
    var cat5 = new Cat5();
    log(cat5.name);
    log(cat5.sleep());
    log(cat5 instanceof Animal); // true
    log(cat5 instanceof Cat5); //true

</script>

3.JS的各种位置

    //clientHeight表示的是可视区域的高度，不包含border和滚动条(css height + css padding)
    console.log('clientHeight：'+document.getElementById('div').clientHeight);
    //Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容
    console.log('scrollHeight：'+document.getElementById('div').scrollHeight);
    //HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数
    console.log('offsetHeight：'+document.getElementById('div').offsetHeight);
    //clientTop一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的
    console.log('clientTop：'+document.getElementById('div').clientTop);
    //Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
    console.log('scrollTop：'+document.documentElement.scrollTop);
    //HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离
    console.log('offsetTop：'+document.getElementById('div').offsetTop);
    

4.JS拖拽

<script>
    window.onload = function () {
        var oDiv = document.getElementsByTagName("div")[0];

        /*鼠标点击的位置距离DIV左边的距离 */
        var disX = 0;
        /*鼠标点击的位置距离DIV顶部的距离*/
        var disY = 0;
        oDiv.onmousedown = function () {
            var e = e || window.event;
            disX = e.clientX - oDiv.offsetLeft;
            disY = e.clientY - oDiv.offsetTop;

            document.onmousemove = function (e) {
                var e = e || window.event;
                // 横轴坐标
                var leftX = e.clientX - disX;
                // 纵轴坐标
                var topY = e.clientY - disY;

                if (leftX < 0) {
                    leftX = 0;
                }
                /* 获取浏览器视口大小 document.document.documentElement.clientWidth*/
                else if (leftX > document.documentElement.clientWidth - oDiv.offsetWidth) {
                    leftX = document.document.documentElement.clientWidth - oDiv.offsetWidth;
                }

                if (topY < 0) {
                    topY = 0;
                }
                else if (topY > document.documentElement.clientHeight - oDiv.offsetHeight) {
                    topY = document.documentElement.clientHeight - oDiv.offsetHeight;
                }
                oDiv.style.left = leftX + "px";
                oDiv.style.top = topY + "px";
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    }
</script>

5.Cookie使用

window.onload = function () {
        document.cookie = "userID=10000";
        document.cookie = "name1=10000";
        //document.cookie = "name2=10000";
        document.cookie = "username=John Smith; expires=Thu, 18 Dec 2019 12:00:00 GMT; path=/";
        // expires:过期时间
        //移除Cookie name2
        //document.cookie = "name2=1;expires=-1";
        alert(document.cookie);

        //exdays: 过期天数
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return "";
        }

        function removeCookie(key) {
            setCookie(key, "", -1);
        }

        removeCookie("name2");
        setCookie('userID', '123', 600);

        alert(getCookie("userID"));
    }

6.Promise简化ajax异步处理

function myXHR(method, url, data) {
    var requset = new XMLHttpRequest();
    return new Promise((resolve, reject) => {
        requset.onreadystatechange = function () {
            if (requset.readyState === 4) {
                if (requset.status === 200) {
                    resolve(requset.responseText);
                }
                else {
                    reject(requset.status);
                }
            }
        }
        requset.open(method, url);
        requset.send(data);
    });
}

var p = myXHR('GET', 'url:');
p.then(responseText => {
    console.log(responseText);
}).catch(status => {
    console.log(new Error(status));
})

7.RAF（requestAnimationFrame）的使用

<div id="myDiv" style="background-color: lightblue;width: 0;height: 50px;line-height: 50px;">0%</div>
<button id="btn">run</button>

    //显示器刷新率60Hz，so最平滑动画的最佳循环间隔为1000ms/60=16ms
    //requestID = requestAnimationFrame(callback);
    //requestAnimationFrame不需要设置时间间隔
    //回调函数作为参数传入，会返回一个整数（定时器的编号），可以传递给cancelAnimationFrame用于取消这个函数的执行
    //IE 9- 不支持该方法
    var timer1 = requestAnimationFrame(function () {
    });
    var timer2 = requestAnimationFrame(function () {
    });
    var timer3 = requestAnimationFrame(function () {
    });
    console.log(timer1);//1
    console.log(timer2);//2
    console.log(timer3);//3
    //cancelAnimationFrame
    cancelAnimationFrame(timer1);
    cancelAnimationFrame(2);
    cancelAnimationFrame(3);

    //兼容IE
    if (!window.requestAnimationFrame) {
        var lastTime = 0;
        window.requestAnimationFrame = function (callback) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        }
    }

    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }

    //示例
    var myDiv = document.getElementById('myDiv');
    var btn = document.getElementById('btn');
    var timer;
    btn.onclick = function () {
        myDiv.style.width = '0';
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
            if (parseInt(myDiv.style.width) < 500) {
                myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
                myDiv.innerHTML = parseInt(myDiv.style.width) / 5 + ' %';
                timer = requestAnimationFrame(fn);
            } else {
                cancelAnimationFrame(timer);
            }
        });
    }

8.js怎么控制一次加载一张图片，加载完后再加载下一张（监控图片是否加载完成）

// 方法一
var obj=new Image();
obj.src="URL";
obj.onload=function(){
    alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
    document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}

// 方法二
var obj=new Image();
obj.src="URL";
obj.onreadystatechange=function(){
    if(this.readyState=="complete"){
        alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
        document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
    }
}

9.Job queue 的执行顺序

//在Job queue中的队列分为两种类型：macro-task和microTask。

    // macro-task队列包含任务: a1, a2 , a3
    // micro-task队列包含任务: b1, b2 , b3
    //
    // 执行顺序为，首先执行marco-task队列开头的任务，也就是 a1 任务，执行完毕后，
    // 在执行micro-task队列里的所有任务，也就是依次执行***b1, b2 , b3***，执行完后清空micro-task中的任务，
    // 接着执行marco-task中的第二个任务，依次循环。

    //macro-task队列真实包含任务：
    //script(主程序代码),setTimeout, setInterval, setImmediate, I/O, UI rendering
    //micro-task队列真实包含任务：
    //process.nextTick, Promises, Object.observe, MutationObserver

    //举例
    setTimeout(function () {
        console.log(1)
    }, 0);

    new Promise(function (resolve, reject) {
        console.log(2);
        resolve();
    }).then(function () {
        console.log(3)
    }).then(function () {
        console.log(4)
    });

    process.nextTick(function () {
        console.log(5)
    });

    console.log(6);
    //输出2,6,5,3,4,1
    //这里要注意的一点在定义promise的时候，promise构造部分是同步执行的，这样问题就迎刃而解了。
    // 首先分析Job queue的执行顺序：
    //
    // script(主程序代码)——>process.nextTick——>promise——>setTimeout
    //
    //     I) 主体部分： 定义promise的构造部分是同步的，
    // 因此先输出2 ，主体部分再输出6（同步情况下，就是严格按照定义的先后顺序）
    //
    // II)process.nextTick: 输出5
    //
    //     III）promise： 这里的promise部分，严格的说其实是promise.then部分，输出的是3,4
    //
    //     IV) setTimeout ： 最后输出1
    //
    //     综合的执行顺序就是： 2——>6——>5——>3——>4——>1

10.原生ajax的请求过程

function getXHR() {
        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject('Msxml2.XMLHTTP');//MSXML3
            } catch (e) {
                try {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP')
                }
                catch (e) {
                    alert('不支持');
                }
            }
        }
        return xhr;
    }

    var xhr = getXHR();
    xhr.open('GET', url, true);//true 是否异步
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var data = xhr.responseText;
                console.log(data);
            }
        }
    }
    xhr.onerror = function () {
        console.log('error');
    }
    xhr.send();//发送请求

（JavaScript部分未完成，待更新）