前端面试总结（三）

最新推荐文章于 2024-04-28 00:21:21 发布

原创最新推荐文章于 2024-04-28 00:21:21 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

1. 双向绑定watcher的内部实现

2. vue虚拟dom的底层渲染原理

3. HTTP缓存策略

对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存

HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，我将其分为两大类(强制缓存，对比缓存)

4. ES6 Class

由下面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数。所以可以认为ES6中的类其实就是构造函数的另外一种写法！

class Animal{
    constructor(name,age){
        console.log("啦啦啦，今天天气好晴朗");//当实例化对象时该行代码会执行。
        this.name = name;
        this.age = age;
        this.doSomething = function(){
        	console.log(this.name,this.age)
        }
    }
    say(){

    	console.log(this.name)
    }
}

module.exports = Animal

var Animal = require('./animal')
var animal = new Animal('小狗','27')
class Cat extends Animal{
    constructor(name,age){
        super(name,age)
        this.doSomething = function(){
            console.log(this.age)
        };
        this.dd = function(){
            console.log(this.name)
        }
    }
    say(){

        console.log(this.age,'-----------')
    }
}

// Cat.prototype - > {} -> Animal.prototype //原型链

animal.doSomething()  //  小狗，27 
animal.say()  //小狗，调用原型上的方法，this指向调用对象

var cat1 = new Cat('小猫','12')

cat1.doSomething()  //  覆盖父类方法，12
cat1.say() // 调用原型上的方法  小猫
cat1.dd() // 调用自己的实例方法 小猫

module.exports = Cat

5. promise如何实现多线程

6. 动画canvas

7. JS多线程如何实现

1.子线程进行计算，不能进行 DOM BOM操作，所有js里集成的对象都在js线程里，而并非worker线程

2.子线程不能跨域，文件需放在同路径中

3.子线程不能套子线程

4.子线程不和主线程共享数据，而是复制一份儿哪怕是对象

var oW = new Worker('c.js');
oW.postMessage(12);  //向子线程发送数据
oW.onmessage = function(ev){ //接收字线程发送过来的数据
alert(ev.data);  //17
};

//子线程c.js
this.onmessage = function(ev){  //接收主线程发送过来的数据
this.postMessage(ev.data+5);  //向主线程发送数据
};

<body>
<input type="text" name="ipt" id="ipt" value="" />
<button id="start">start</button>
<button id="stop">stop</button>
<button id="ale">alert</button>
<script type="text/javascript">
    var ipt = document.getElementById("ipt");
    var stop = document.getElementById("stop");
    var start = document.getElementById("start");
    var ale = document.getElementById("ale");
    var worker = new Worker("./worker.js");
    worker.onmessage = function(event){  // 主线程监听子线程传过来的数据
        console.log(event.data)
        ipt.value = event.data;
    };
    stop.addEventListener("click",function(){

        console.log('stop')

        //用于关闭worker线程
        worker.terminate(); //子线程停止
    });
    start.addEventListener("click",function(){

        console.log('start')
        worker.postMessage(ipt.value) // 主线程传输数据给子线程

        //开起worker线程

    });
    ale.addEventListener("click",function(){
        alert("i'm a dialog");
    });
</script>
</body>


worker.js文件
var i = 0;
function mainFunc(){
    i++;
    //把i发送到浏览器的js引擎线程里
    this.postMessage(i);
}
this.onmessage= function(ev){
    console.log(ev.data) //接受主线程传输过来的数据
}
var id = setInterval(mainFunc,1000);

8. html语义化标签

h1-h6、 p、header 、 footer、em、strong、article

9. 如何消除两个行内元素之间的间距

回车换行符不要出现在两个标签之间，而是出现在标签内部

10. typeof{} === 'object', typeof[] === 'object' , // 都是true

[5,9,1] === [5,9,1], [1,9,1] === [3,9,1], //都是false

{}==={}, {a:1} === {a:1} //语法错误

11. while(true) 无线循环

12.html标签是否能够自定义，标签所包含的属性是否支持自定义，如果可以自定义，那么怎么实现

13. 盒子模型有时候会出现设置背景，边框无法撑大和设置内外间距异常，一般来说倒是此类问题的原因

14. 如何用一个标签实现类似“------------------------第三方登陆----------------------”这种情况，请写出代码

15. new 的作用

1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
3.执行构造函数的代码。
4.返回新对象（后台直接返回）;