html

src 和 href 的区别

都是用来引用外部的资源

区别：

• src 表示的是资源的引用，如请求 js 脚本，会阻塞页面渲染
• href 表示的是超文本引用，常用于a,link标签，不会阻塞页面渲染

如何理解 HTML 语义化

1. 让人更容易读懂（代码可读性）
2. 有利于搜索引擎优化（SEO）

常见的语义化标签：

<header></header>

<nav></nav>

区块 有语义化的div
<section></section>

主要区域
<main></main>

主要内容
<article></article>

侧边栏
<aside></aside>

<footer></footer>

DOCTYPE 的作用

DOCTYPE（文档类型声明）是一种在 HTML 文档中用于声明其类型和版本的元数据。它的作用是告诉浏览器如何解析文档

在 HTML4 之前，HTML 的语法比较宽松，缺乏严格的规范，因此不同的浏览器可能会以不同的方式解析同一份 HTML 文档，导致网页在不同的浏览器上呈现不同的效果。为了解决这个问题，HTML4 引入了 DOCTYPE，从而确立了一套标准规范，使得所有浏览器都能够以相同的方式解析 HTML 文档

在 HTML5 中，DOCTYPE 的作用仍然存在，但是由于 HTML5 更加灵活，允许省略 DOCTYPE 声明，浏览器会自动根据文档内容进行解析。然而，建议在 HTML5 中仍然声明 DOCTYPE，以便确保浏览器能够以正确的方式解析文档。

浏览器渲染页面的两种模式（通过document.compatMode获取）：

• CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面，在标准模式中，浏览器以其支持的最高标准呈现页
• BackCompat: 怪异模式，浏览器使用自己的怪异模式解析渲染页面。在标准模式中，浏览器以一种比较宽松的向后兼容的方式显示

浏览器的渲染模式可以通过 DOCTYPE 声明来指定，如果文档中没有指定 DOCTYPE 声明，则会默认为兼容模式

script 标签中的 defer 和 async 的作用

默认情况下，脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候，文档解析就会被阻塞，在脚本下载和执行完成之后文档才能往下继续进行解析

script三种方式对比

其中蓝色代表 js 脚本网络加载时间，红色代表 js 脚本执行时间，绿色代表 html 解析

下面是async和defer两者区别：

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

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

• 当script同时有async和defer属性时，执行效果和async一致

常见的 meta 标签有哪些

meta标签由name和content属性定义，用来描述网页文档的属性

name	作用
charset	用来描述 HTML 文档的编码类型
keywords	页面关键词
description	页面描述
refresh	页面重定向和刷新
viewport	适配移动端，可以控制视口的大小和比例
robots	搜索引擎索引方式

viewport 的 content 参数有以下几种：

• width: 宽度（数值/device-width）
• height: 高度（数值/device-height）
• initial-scale: 初始缩放比例
• minimum-scale: 允许用户缩放到的最小比例
• maximum-scale: 允许用户缩放到的最大比例
• user-scalable: 用户是否可以手动缩放(yes/no)

robots 的 content 参数有以下几种：

• all: 所有搜索引擎都可以索引
• none: 所有搜索引擎都不可以索引
• index: 允许搜索引擎索引
• noindex: 不允许搜索引擎索引
• follow: 允许搜索引擎跟踪
• nofollow: 不允许搜索引擎跟踪

html5 有哪些更新

• 语义化标签:header、footer、nav、article、section、aside
• 媒体标签：video、audio、source（指定来源 video 嵌套）
• 新的表单控件:date、email、url、number、range、search、color、tel、time、month、week、datetime、datetime-local
• 进度条：progress
• DOM 查询操作：querySelector、querySelectorAll
• web 存储
• 拖放 draggable
• 画布 canvas
• 地理定位:通过 navigator.geolocation 对象的 getCurrentPosition() 方法，可以获取当前设备的地理位置信息
• websocket
• web workers
• history API

默认情况下，哪些 HTML 元素是块级元素，哪些是内联元素（行内元素）？

内联（行内）元素（display:inline）

1. 可以和其他元素处于一行，不用必须另起一行
2. 元素的高度、宽度及顶部和底部边距属性设置无效。(行内元素的 margin-top、margin-bottom 和 padding-top、padding-bottom 属性设置是无效的，但是必须注意的是，对于 padding-top 和 padding-bottom 的设置，从显示效果上来看是增加的，但其实设置是无效的，因为它们没有撑大盒子，并不会对周围的元素产生影响)

行内元素 padding 测试

<div class="d1">我是块级元素</div>
<span class="s1">我是行内元素</span>

.s1 {
  background-color: red;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 100px;
  padding-bottom: 100px;
}

.d1 {
  background-color: green;
  height: 300px;
  width: 200px;
}

3. 元素的宽度就是它包含的文字、图片的宽度

常见的行内元素有：a、input、span、img、button

img和表单元素是行内块display:inline-block，他们既可以设置宽度高度，也能并排显示

块级元素（display:block）

1. 每个块级元素都是独自占一行，其后的元素也只能另起一行，两个元素不能共用一行
2. 元素的高度、宽度、行高和顶底边距都是可以设置的
3. 元素的宽度如果不设置的话，默认为父元素的宽度

常见的块级元素有 div、p、h1...h6、ol、ul、dl、dt、li、table、form

说一下 web worker chatGPT

Web Worker 是 HTML5 中新增的 API，可以在浏览器后台线程中运行 JavaScript 代码，从而不影响页面的响应速度。在前端项目中，可以通过 Web Worker 实现如下功能：

1. 大量计算任务：当前端需要进行大量的计算任务时，如果在主线程中执行，可能会阻塞页面的响应。使用 Web Worker 可以将这些任务放到后台线程中运行，保证页面的响应速度。

2. 图片/视频处理：当需要对图片或者视频进行大量处理时，可以使用 Web Worker 在后台进行处理，避免占用主线程的资源，提升页面的响应速度。

3. 长时间的数据处理：如果需要对大量数据进行操作和处理，可能需要很长时间才能完成。使用 Web Worker 可以将这些任务放到后台线程中运行，不会影响页面的响应速度。

4. 聊天室/游戏：使用 Web Worker 可以实现聊天室和游戏等实时通信场景，避免占用主线程的资源，提升页面的响应速度。

如果面试官让你讲述 Web Worker 在项目中的应用场景，你可以从以上几个方面进行回答。例如，你可以提到在一个大型的数据可视化项目中，需要对大量的数据进行处理和渲染，而这些数据处理的过程可能会占用主线程很长时间，导致页面的响应速度很慢。通过使用 Web Worker，可以将数据处理的任务放到后台线程中进行，保证页面的响应速度。

---

追问我现在需要从后端请求数据量很大的 json，如何利用 web worker 进行优化，给出代码？

可以使用 Web Worker 来处理数据量很大的 JSON 数据，可以避免主线程卡顿。以下是一个简单的示例代码：

1. worker.js（Web Worker 线程的代码）：

// 监听主线程的消息
self.addEventListener('message', function (e) {
  var data = e.data

  // 模拟数据处理的耗时操作
  var processedData = processData(data)

  // 将处理后的数据发送给主线程
  self.postMessage(processedData)
})

// 处理数据的函数
function processData(data) {
  // 对数据进行处理
  // ...
  return processedData
}

2. index.html（主线程的代码）：

// 创建 Web Worker 对象
var worker = new Worker('worker.js')

// 监听 Web Worker 发送回来的消息
worker.addEventListener('message', function (e) {
  var processedData = e.data

  // 将处理后的数据渲染到页面上
  renderData(processedData)
})

// 请求数据
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText)

    // 将数据发送给 Web Worker 进行处理
    worker.postMessage(data)
  }
}
xhr.open('GET', 'data.json', true)
xhr.send()

在这个示例中，当主线程需要处理数据量很大的 JSON 数据时，首先会创建一个 Web Worker 对象，并且向其发送数据。Web Worker 在后台线程中处理数据，然后将处理后的数据发送给主线程，主线程再将数据渲染到页面上。

需要注意的是，Web Worker 线程中没有访问 DOM 的权限，所以在 Web Worker 线程中无法直接操作页面上的元素。但是可以使用 postMessage() 方法来发送消息给主线程，再由主线程来更新页面上的内容。