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

老板、帮忙打榜，必逢好事 activity.juejin.cn/rank/2023/w...

61、base64对小图片能压缩吗

Base64编码可以对所有类型的图片进行压缩。

优点

通过将图片数据转换为Base64编码的字符串，可以将图片数据压缩为较小的体积，从而方便在文本或网页中传输和存储。

减少HTTP请求：将图片嵌入到HTML或CSS中，而不是作为独立的HTTP请求加载，可以减少页面加载时间，因为减少了HTTP请求的数量。
减小文件大小：Base64编码会增加图片的大小，但它通常比原始图片小。这有助于减少页面的总体文件大小。
方便部署：Base64编码的图片可以轻松地嵌入到网页或应用的代码中，而无需额外的图片文件。这在一些特定情况下，如单页应用或移动应用中非常有用。

缺点

将图片转换为Base64编码的字符串后，会增加字符串的长度和复杂度，可能会对传输速度和内存占用产生一定的影响。

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

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

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

注意：压缩静态资源可能会增加服务器的处理负担，但通常情况下，这种性能损失是可以接受的，因为它带来了更好的用户体验。

63、webwoker是什么？有什么用？什么场景可以使用？

js是单线程模型。也就是说一次只能处理一件事情，前面的事情没有完毕，后面的事情要等待前面的事情处理完毕后才能执行。

Worker接口可以创建后台任务。即可以给js运行新增线程。用于处理一些耗时、耗费性能的任务。

例如：

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.')
}

js 复制代码

//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、怎样做首页加载优化？

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

优化图片加载：使用适当的图片格式和压缩技术，以减少图片文件的大小。例如，可以使用WebP格式的图片，这种格式可以提供更好的压缩效果。同时，也可以使用图片压缩工具或在线服务对图片进行压缩。
懒加载：对于非首屏展示的图片或组件，可以采用懒加载的方式，即当用户滚动页面时才加载这些组件。这样可以减少初始加载时间，提高页面加载速度。
按需加载：对于一些非必需的组件或脚本，可以按需加载，即当用户需要时才加载。例如，可以使用动态导入（dynamic import）的方式，将组件拆分成多个文件，然后根据需要动态加载。
使用CDN：将静态资源（如图片、CSS、JS文件等）部署到CDN上，可以加速静态资源的加载速度。因为CDN服务器通常位于全球各地的数据中心，用户可以从距离自己最近的服务器获取资源，从而减少延迟。
优化CSS：避免使用过度复杂的选择器，减少不必要的CSS规则和属性。同时，可以使用CSS预处理器（如Sass、Less）或CSS模块化方案（如CSS-in-JS）来减少CSS文件的大小。
启用缓存：对于已经加载过的资源，可以使用浏览器缓存机制进行缓存，避免重复加载。同时，也可以使用服务端缓存来缓存静态资源，进一步提高加载速度。
优化JavaScript：避免在页面加载时执行大量的JavaScript代码，特别是那些与页面渲染无关的代码。可以将一些代码移到页面加载之后执行，或者使用异步加载的方式加载JavaScript文件。
使用Service Workers：Service Workers是一种浏览器技术，可以在浏览器后台运行脚本，用于缓存资源、推送消息等。使用Service Workers可以将一些静态资源缓存到浏览器中，从而在下次访问时直接从缓存中读取，而不需要重新下载资源。
利用webpack 代码分割进行优化，可以将 js进行分片，首次加载文件体积大量减少，以及资源异步加载
服务端渲染，后台将你需要绘制的页面结构以及数据全局准备好了，然后直接将资源文件返回给前端，前端只需要渲染即可。
逻辑后移，先加载页面内容，数据处理逻辑异步执行
增加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字节的开销，为了减少这些开销提升性能：

HTTP2.0会使用首部表来跟踪和存储之前发送的键值对，对于相同的数据，不再通过每次请求和响应发送；
首部表在HTTP2.0连接持续期内始终存在，由服务器和浏览器渐进的更新；
每个新的首部字段要么被追加到当前首部表的末尾，要么替换首部表之前的值；