永辉面试题

最新推荐文章于 2023-11-02 05:04:03 发布

gaofan_long

最新推荐文章于 2023-11-02 05:04:03 发布

阅读量1.5k

点赞数

文章标签：面试 javascript html5

本文链接：https://blog.csdn.net/gaofan_long/article/details/112802223

版权

1. css写一个三角形，写一个梯形？

2. js的宏任务和微任务的执行顺序？输出下面的值的顺序？

3. new 的过程是怎么样？

4. 数组的常用方法，map和filter手写一下实现？

5. call 和apply ,bind 的区别？

6. 箭头函数了解吗？

7. 一个url从访问到浏览器绘制的过程？再往深说一下，涉及到缓存相关的，怎么处理？

8. script标签有defer和async这两个标签是什么意思？

2. js的宏任务和微任务的执行顺序？输出下面的值的顺序？

3. new 的过程是怎么样？

5. call 和apply ,bind 的区别？

6. 箭头函数了解吗？

7. 一个url从访问到浏览器绘制的过程？再往深说一下，涉及到缓存相关的，怎么处理？

8. script标签有defer和async这两个标签是什么意思？

项目经验：

架构是如何设计的？

数据埋点是如何实现的，如何封装？

表现：回答的不太好啊！！

面试内容：

1. css写一个三角形，写一个梯形？

答：这个是利用的div的border是一个梯形的原理，如果不给div设置宽度和高度，只设置border , 自border会向内延申，就是一个三角形，然后只保留一边，其他的颜色设置为透明，就是一个三角形了？

如果是梯形，只要加上宽度和高度，就可以写一个梯形了。

2. js的宏任务和微任务的执行顺序？输出下面的值的顺序？

console.log('start')
setTimeout(function() {
    Promise.resolve().then(function() {
        console.log('promise3')
    }).then(function() {
        console.log('promise4')
    })
    console.log('setTimeout1')
}, 0)

setTimeout(function() {
    console.log('setTimeout2');
}, 0)

Promise.resolve().then(function() {
    console.log('promise1')
}).then(function() {
    console.log('promise2')
})
console.log('end');

结果： start end , promise1, promise2, setTimeout1 ,promise3, promise4, setTimeout2

原因：先执行同步任务，输出start, end , 再执行异步任务， promise.resolve被立即调用了，所以，是promise1, promise2, 再执行setTimeout ，输出setTimeout1，其中的Promise是setTimeout的微任务，所以继续执行promise3, promise4, 最后执行setTimeout2

3. new 的过程是怎么样？

创建一个空对象，将它的引用赋给 this，继承函数的原型。
通过 this 将属性和方法添加至这个对象
最后返回 this 指向的新对象，也就是实例（如果没有手动返回其他的对象）

4. 数组的常用方法，map和filter手写一下实现？

function filte(arr, callback) {
    if (!arr || !callback) {
        return;
    }
    let narr = [];
    for (let i = 0; i < arr.length; i++) {
        if (callback(i)) {
            narr.push(arr[i]);
        }
    }
    console.log(narr);
}
var arr = [1, 2, 3, 4];
filte(arr, item => item < 3);

function map(arr) {
    if (!arr) {
        return
    }
    let newarr = [];
    for (let i = 0; i < arr.length; i++) {
        console.log(typeof arr[i]);
        if (typeof arr[i] === "number") {
            newarr.push(Math.sqrt(arr[i]))
        }
    }

    return newarr;
}

let arr1 = [4, 9, 16, 25];
console.log(map(arr1));

5. call 和apply ,bind 的区别？

三者都能改变对象的this指向， call和apply都是直接对函数的调用，bind是返回的是一个函数，因此后面还需要()来进行调用才可以。

call的和apply的第一个参数都是对象，apply后面传入的是数组， call后面传入的是一一对应的参数。

6. 箭头函数了解吗？

不能用作构造函数？

7. 一个url从访问到浏览器绘制的过程？再往深说一下，涉及到缓存相关的，怎么处理？

从输入URL到渲染出整个页面的过程包括三个部分：

1、DNS解析URL的过程

2、浏览器发送请求与服务器交互的过程

3、浏览器对接收到的html页面渲染的过程

一、DNS解析URL的过程

DNS解析的过程就是寻找哪个服务器上有请求的资源。因为ip地址不容易记忆，一般会使用URL域名（如www.baidu.com）作为网址。DNS解析就是将域名翻译成IP地址的过程。

具体过程：

1）浏览器缓存：浏览器会按照一定的频率缓存DNS记录

　　2）操作系统缓存：如果浏览器缓存中找不到需要的DNS记录，就会取操作系统中找

　　 3）路由缓存：路由器也有DNS缓存

　　 4）ISP的DNS服务器：ISP有专门的DNS服务器应对DNS查询请求

　　 5）根服务器：ISP的DNS服务器找不到之后，就要向根服务器发出请求，进行递归查询

二、浏览器与服务器交互过程

　　1）首先浏览器利用tcp协议通过三次握手与服务器建立连接

　　http请求包括header和body。header中包括请求的方式（get和post）、请求的协议（http、https、ftp）、请求的地址ip、缓存cookie。body中有请求的内容。

　　2）浏览器根据解析到的IP地址和端口号发起http的get请求.

　　3）服务器接收到http请求之后，开始搜索html页面，并使用http返回响应报文

　　4）若状态码为200显示响应成功，浏览器接收到返回的html页面之后，开始进行页面的渲染

三、浏览器页面渲染过程

　　1）浏览器根据深度遍历的方式把html节点遍历成dom 树

　　2）将css解析成CSS DOM树

　　3）将dom树和CSS DOM树构造成render树

　　4）JS根据得到的render树计算所有节点在屏幕中的位置，进行布局（回流）

　　5）遍历render树并调用硬件API绘制所有节点（重绘）

补充：构造render渲染树的过程

从DOM树的根节点开始遍历每个可见的节点。
对于每个可见的节点，找到CSS树中的对应的规则，并且应用他们。
根据每个可见的节点及其对应的样式，组合生成渲染树。

8. script标签有defer和async这两个标签是什么意思？

现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。
好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染。
但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。

defer: