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 代码在独立的线程中运行,不会阻塞主线程,从而提高网页的性能和响应速度
-
创建 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 }
-
在主线程中创建 Worker: 在你的主页面或主线程的 JavaScript 文件中,通过
new Worker()
构造函数创建一个新的 Worker 线程,并指定要执行的 Worker 文件路径。// main.js var myWorker = new Worker('worker.js')
-
与 Worker 进行通信: 你可以通过
postMessage()
方法向 Worker 发送消息,并通过在 Worker 文件中设置onmessage
事件来接收消息,并在其中执行相应的任务。// main.js myWorker.postMessage(someData) // 向 Worker 发送消息 myWorker.onmessage = function (e) { var result = e.data // 处理从 Worker 返回的结果 }
-
终止 Worker: 当不再需要 Worker 时,你可以调用
terminate()
方法来终止 Worker 线程。// main.js myWorker.terminate() // 终止 Worker
5. 渐进增强和优雅降级之间的区别
渐进增强
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级
直接构建完整功能,对低版本游览器进行兼容