web前端常见的面试题总结

2)底层原理

function myInstanceof(left, right) {

left = left.proto;

right = right.prototype;

while (true) {

if (left === null || left === undefined) {

return false

}

if (left === right) {

return true

}

//即上面均不满足时，继续往原型链上查找

left = left.proto;

}

}

参考文章：[https://zhuanlan.zhihu.com/p/105487552](()

[](()30. 手写封装一个jsonp

function jsonp(url, data, callback) {

//产出随机的回调函数名（因为可能有多个请求，这里可以区别开来）

var funcName = ‘jsonp_’ + Date.now() + Math.random().toString().substr(2, 5);

//如果存在其他传入参数，需要进行拼接

if (typeof data === ‘object’) {

var tempArr = [];

for (var key in data) {

var value = data[key];

tempArr.push(key + ‘=’ + value)

}

//将数组以&拼接成字符串，如name=h$age=21

data = tempArr.join(‘&’)

}

var script = document.createElement(‘script’)

script.src = url + ‘?’ + data + ‘callback=’ + funcName

document.body.appendChild(script);

//这里得到请求的数据，在回调函数中执行处理

window[funcName] = function (data) {

callback(data)

}

}

//使用

jsonp(‘http:127.0.0.1:3000/api’, {}, function (res) {

console.log(res)

})

参考文章：

[https://blog.csdn.net/weixin_40483654/article/details/106434990](()

[](()31.有几种方式可以实现存储功能？分别有什么有优缺点？什么是Service Worker？

[](()31.1 实现的存储功能

实现存储功能：Cookie、localStorage、sessionStorage、indexDB

| 特性 | Cookie | localStroage | sessionStorage | indexDB |

| — | — | — | — | — |

| 数据生命周期 | 一般由服务器生成，可以设置过期事件 | 除非被清理，否则一直存在 | 页面关闭时就被清理 | 除非被清理，否则一直存在 |

| 数据存储大小 | 4kb | 5mb | 5mb | 无限 |

| 与服务端的通信 | 会一直携带在请求头 | 不参与下 | 不参与 | 不参与 |

PS：没有大量的数据需求的话，可以使用localStorage和sessionStorage，对于不怎么改变的数据，尽量使用localStorage。

[](()31.2 什么是Service Worker

• Service Worker是运行在浏览器背后的独立线程，一般可以用来实现缓存功能，使用Service Worker的话，传输协议必须使用HTTPS。

• 使用Service Worker实现缓存一般分为三个步骤：

1）首先要注册Service

2）监听install，拿到需要缓存的文件

3）下次用户访问的时候就可以通过拦截请求方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据

[](()32.浏览器中的缓存机制

• 缓存可以是性能优化中简单高效的一种方式

• 对于一个数据请求，分为3个阶段，分为网络请求、后端处理、浏览器响应。浏览器缓存可以帮助我们在第一和第三步中优化性能。比如直接使用缓存而不发请求，或者发请求但后端的数据与前端一致，那么就没有必要再将数据回传回来，这样就减少可数据响应。

接下来我们将通过以下几个方面来探讨浏览器的缓存机制

• 缓存位置

• 缓存策略

• 实际场景应用缓存策略