易忘，但常问的面试题（十）

老板、帮助打榜，必逢功德 activity.juejin.cn/rank/2023/w…

61、base64对小图片能紧缩吗

Base64编码能够对一切类型的图片进行紧缩。

长处

经过将图片数据转化为Base64编码的字符串，能够将图片数据紧缩为较小的体积，然后便利在文本或网页中传输和存储。

  1. 削减HTTP恳求：将图片嵌入到HTML或CSS中，而不是作为独立的HTTP恳求加载，能够削减页面加载时刻，由于削减了HTTP恳求的数量。

  2. 减小文件巨细：Base64编码会添加图片的巨细，但它通常比原始图片小。这有助于削减页面的总体文件巨细。

  3. 便利布置：Base64编码的图片能够轻松地嵌入到网页或应用的代码中，而无需额定的图片文件。这在一些特定情况下，如单页应用或移动应用中非常有用。

缺点

将图片转化为Base64编码的字符串后，会添加字符串的长度和复杂度，或许会对传输速度和内存占用发生必定的影响。

62、 上传服务器的静态资源是否被紧缩过

一般来说，服务器端会对上传的静态资源（如图片、CSS 文件、JavaScript 文件等）进行紧缩，以削减文件巨细和进步传输速度。削减网络传输的数据量，进步页面加载速度。

当客户端（浏览器）恳求这些静态资源时，服务器会检测浏览器是否支撑紧缩，并根据情况选择是否发送紧缩后的资源。假如浏览器支撑紧缩，服务器会将紧缩后的资源发送给客户端，客户端在接纳后会自动解紧缩并运用。

留意：紧缩静态资源或许会添加服务器的处理担负，但通常情况下，这种功能丢失是能够接受的，由于它带来了更好的用户体验。

63、webwoker是什么？有什么用？什么场景能够运用？

js是单线程模型。也便是说一次只能处理一件工作，前面的工作没有完毕，后面的工作要等候前面的工作处理完毕后才干履行。

Worker接口能够创立后台使命。即能够给js运转新增线程。用于处理一些耗时、消耗功能的使命。

例如：

//main.js 主线程
//传递一个数字给worker线程。worker线程核算处理完毕后，回来一个信息给主线程。
if (window.Worker) {   //这一步比较重要，兼容性判断。
        //1.创立一个worker线程。
	const myWorker = new Worker("worker.js");
        //2.向worker线程发送数据，值能够是number,string,boolean ,file,blob 等
	  myWorker.postMessage(10000000000);
        //3.监听后台使命，
	myWorker.onmessage = function(e) {
	    result.textContent = e.data;
	    console.log('Message received from worker');
	}
       //4.当离开页面的时候，或者需求完毕worker时(比方使命完结时)，
        //能够完毕Worker线程，不用占用资源       
       // myworker.terminate();
       //5.当myWorker异常时的时候，会触发onerror事情    
        myWorker.onerror = function() {
             console.log('There is an error with your worker!');
        }
} else {  //这一步非常重要。具体代码根据需求更具自己的事务写。
	console.log('Your browser doesn't support web workers.')
}

//worker.js  worker 线程
// 程序处理完毕后回来一个结果给主线程。//0 能够加载其他js进来，比方ajax.
//importScripts('ajax.js','b.js')  
//1.监听主线程
onmessage = function(e) {
  console.log('Worker: Message received from main script');
    接纳来自主线程发送过来的数据
    let num = e.data;
//运用for循环模仿一个耗时、耗功能的使命。（假如这个for循环放在主线程，那么页面很或许会卡死，
//影响用户体验）。for(let i = 0;i<=num;i++){
    if(i==num){
       //2.向主线程发送数据
        postMessage('使命完结啦！')
    }
}
//3.worker 线程也能够调用close 方法来完毕worker线程。
// close()
 //4.相同的，在worker 线程中也能够监听错误信息。
onerror = function(err){
    console.log(err)
}

运用场景

Web Worker 能够在很多场景下运用，特别是在需求处理很多数据或核算密集型使命时。

  • 图画处理：Web Worker 能够用于处理图画操作，如旋转、裁剪、缩放、滤镜等。这能够进步图画处理的功能和呼应速度。
  • 数据处理：Web Worker 能够用于处理很多数据，如数据集的过滤、排序、概括、转化等。这能够进步数据处理的功率和准确性。
  • 核算密集型使命：Web Worker 能够用于处理核算密集型使命，如模仿、优化、预测、计算等。这能够进步核算使命的速度和精度。
  • 实时通讯：Web Worker 能够用于实现实时通讯，如聊天室、游戏、视频会议等。这能够进步实时通讯的稳定性和功能。
  • 离线缓存：Web Worker 能够用于离线缓存，能够将常用的资源预先下载到客户端本地缓存中，并在无法访问互联网时运用缓存中的资源。这能够进步应用程序的可用性和呼应速度，尤其是在移动设备上。
  • 多线程处理：Web Worker 能够用于实现多线程处理，如并行核算、使命分发、负载均衡等。这能够进步系统的并发性和可伸缩性。

64、 怎样做首页加载优化？

当进入该网页并且发送网络恳求获取到资源今后 网页从没有内容到内容第一次渲染的时刻 （当然是能够没有内容的）称为 首屏

  1. 优化图片加载：运用适当的图片格局和紧缩技术，以削减图片文件的巨细。例如，能够运用WebP格局的图片，这种格局能够供给更好的紧缩作用。一起，也能够运用图片紧缩工具或在线服务对图片进行紧缩。

  2. 懒加载：关于非首屏展现的图片或组件，能够采用懒加载的方法，即当用户滚动页面时才加载这些组件。这样能够削减初始加载时刻，进步页面加载速度。

  3. 按需加载：关于一些非必需的组件或脚本，能够按需加载，即当用户需求时才加载。例如，能够运用动态导入（dynamic import）的方法，将组件拆分成多个文件，然后根据需求动态加载。

  4. 运用CDN：将静态资源（如图片、CSS、JS文件等）布置到CDN上，能够加快静态资源的加载速度。由于CDN服务器通常位于全球各地的数据中心，用户能够从间隔自己最近的服务器获取资源，然后削减延迟。

  5. 优化CSS：防止运用过度复杂的选择器，削减不用要的CSS规矩和属性。一起，能够运用CSS预处理器（如Sass、Less）或CSS模块化方案（如CSS-in-JS）来削减CSS文件的巨细。

  6. 启用缓存：关于现已加载过的资源，能够运用浏览器缓存机制进行缓存，防止重复加载。一起，也能够运用服务端缓存来缓存静态资源，进一步进步加载速度。

  7. 优化JavaScript：防止在页面加载时履行很多的JavaScript代码，特别是那些与页面渲染无关的代码。能够将一些代码移到页面加载之后履行，或者运用异步加载的方法加载JavaScript文件。

  8. 运用Service Workers：Service Workers是一种浏览器技术，能够在浏览器后台运转脚本，用于缓存资源、推送消息等。运用Service Workers能够将一些静态资源缓存到浏览器中，然后在下次访问时直接从缓存中读取，而不需求从头下载资源。

  9. 运用webpack 代码分割 进行优化，能够将 js进行分片 ，首次加载文件体积很多削减，以及资源异步加载

  10. 服务端渲染 ，后台将你需求绘制的页面结构以及数据大局预备好了，然后直接将 资源文件回来给前端，前端只需求渲染即可。

  11. 逻辑后移，先加载页面内容，数据处理逻辑异步履行

  12. 添加loading动画作用

65、了解HTTP2吗？

HTTP2.0的意图便是经过支撑恳求与呼应的多路复用来削减延迟、经过紧缩HTTP首部字段将协议开销降至最低，一起添加对恳求优先级和服务器端推送的支撑，HTTP2.0不会改动HTTP的语义、HTTP方法、状况码、URI和首部字段等这些核心概念，可是HTTP2.0修改了数据传输的方法和数据格局化的方法。

多路复用

在HTTP1.x中，假如客户端想发送多个并行的恳求以改善功能，就必须运用多个TCP衔接，HTTP2.0实现了多路复用，客户端和服务器能够把HTTP消息分解为互不依靠的帧，然后乱序发送，最终在另一端把它们从头拼装起来。这样就能够只运用一个TCP衔接即可并行发送多个恳求和呼应。

恳求优先级

把HTTP消息分解为很多独立的帧之后，就能够经过优化这些帧的交织和传输次序，进一步提高功能，为了做到这一点，每个流都能够带着有31bites的优先值。服务器能够根据流的优先级，操控资源的分配，而在呼应数据预备好之后，优先将最高优先级的帧发送给浏览器。

服务器推送

在HTTP2.0，服务器能够额定的向浏览器推送资源，当浏览器恳求资源A时，而服务器知道它很或许也需求资源B，服务器能够在浏览器发送恳求前，自动将资源推送给客户端。这个功能能够帮助客户端将资源B放进缓存。

首部紧缩

HTTP1.x的每一次通讯都会带着一组首部，用于描绘传输的资源及其属性，这通常会添加500-800字节的开销，为了削减这些开销提高功能：

  1. HTTP2.0会运用首部表来盯梢和存储之前发送的键值对，关于相同的数据，不再经过每次恳求和呼应发送；
  2. 首部表在HTTP2.0衔接继续期内始终存在，由服务器和浏览器渐进的更新；
  3. 每个新的首部字段要么被追加到当时首部表的结尾，要么替换首部表之前的值；