web前端常见的面试题总结

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

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

• 缓存位置

• 缓存策略

• 实际场景应用缓存策略

32.1 缓存位置

我知道的浏览器的缓存位置有Service Worker、网络请求，并且有各自的优先级，当一次查找缓存并且都没有命中的时候，才会请求网络。

32.2 缓存策略

通常浏览器的缓存策略可以分为两种：强缓存和协商缓存。并且这两种缓存策略都是通过设置 HTTP Header 来实现的

1）强缓存（有两种设置方式）

• Expires：缓存受限于本地的时间

• Cache-Control：通过max-age来设置缓存的时间期限

2）协商缓存（两种设置方式）

简单的说，如果缓存过了，就需要发起请求验证资源是否更新。即当浏览器发送请求验证时，如果资源没有发生改变，那么服务器就返回304状态码，并更新浏览器的缓存有效期。（相当于浏览器和服务器进行协商，是否返回新的数据）

• Last-Modified

Last-Modified表示本地文件最后修改日期，当 Last-Modified的值发送给服务器，循环服务器在该日期后资源是否有变更，有则返回新的资源，否则返回304状态码

• ETag

当ETag的值发送给服务器，询问该资源是否有更新，有则返回新的资源（并且ETag的资源比Last-Modified高）

32.3 实际场景应用缓存策略

一般来说，现在都会使用工具来打包代码，那么我们可以对文件名进行哈希处理，只有当代码修改之后生产新的文件名。基于此，我们就可以给代码设置缓存有效期一年Cache-Control：max-age=3153600，这样只有html文件中引入的文件名发生了改变，才回去下载新的代码，否则就一直使用缓存。

33. 插入几万个DOM，如何实现页面不卡顿？

• 使用分页技术

• 若不分页，则使用虚拟滚动技术（比如elment-ui中的scrollbar可以实现）

虚拟滚动：原理时只渲染可视区域内的内容，非可视区的则不渲染，当用户在滚动的时候就实时去替换渲染的内容。

</