前端：每天5道面试题（html）

1. 对 HTML 语义化的理解

合理的使用正确的 HTML 标签，更好的描述页面结构和含义，有利于搜索引擎的理解，也便于开发者更好的操作和维护。

优点

• 有利于 SEO
• 便于阅读和维护
• 结构清晰
• 用户体验好

2. script 标签中 defer 和 async 的区别

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析

特点

defer
当 script 中有 defer 属性时，脚本的加载过程和文档加载是异步发生的，等到文档解析完(DOMContentLoaded 事件发生)脚本才开始执行

async
当 script 有 async 属性时，脚本的加载过程和文档加载也是异步发生的。但脚本下载完成后会停止 HTML 解析，执行脚本，脚本解析完继续 HTML 解析。

3. img 的 srcset 属性的作⽤？

用于浏览器根据宽、高和像素密度来加载相应的图片资源,为图片的响应式提供了一种解决办法

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

4. 对 web worker 的理解

worker 是 HTML5 提供的一种在后台运行 JavaScript 脚本的机制，它可以让 JavaScript 代码在独立的线程中运行，不会阻塞主线程，从而提高网页的性能和响应速度

1. 创建 Worker 文件： 首先，你需要创建一个独立的 JavaScript 文件，该文件将包含你想要在后台线程中执行的代码。例如，你可以创建一个名为 worker.js 的文件。

   // worker.js
   
   self.onmessage = function (e) {
     var data = e.data
     // 在这里处理接收到的消息，并进行相应的计算或处理
     var result = doSomeHeavyProcessing(data)
     self.postMessage(result) // 将处理结果发送回主线程
   }
   
   function doSomeHeavyProcessing(data) {
     // 在这里编写需要在后台线程中执行的耗时任务
     // 例如，复杂的计算、数据处理等
     return processedData
   }
   

2. 在主线程中创建 Worker： 在你的主页面或主线程的 JavaScript 文件中，通过 new Worker() 构造函数创建一个新的 Worker 线程，并指定要执行的 Worker 文件路径。

   // main.js
   
   var myWorker = new Worker('worker.js')
   

3. 与 Worker 进行通信： 你可以通过 postMessage() 方法向 Worker 发送消息，并通过在 Worker 文件中设置 onmessage 事件来接收消息，并在其中执行相应的任务。

   // main.js
   
   myWorker.postMessage(someData) // 向 Worker 发送消息
   myWorker.onmessage = function (e) {
     var result = e.data
     // 处理从 Worker 返回的结果
   }
   

4. 终止 Worker： 当不再需要 Worker 时，你可以调用 terminate() 方法来终止 Worker 线程。

   // main.js
   
   myWorker.terminate() // 终止 Worker
   

5. 渐进增强和优雅降级之间的区别

渐进增强

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级

直接构建完整功能,对低版本游览器进行兼容