html
src 和 href 的区别
都是用来引用外部的资源
区别:
- src 表示的是资源的引用,如请求 js 脚本,会阻塞页面渲染
- href 表示的是超文本引用,常用于
a
,link
标签,不会阻塞页面渲染
如何理解 HTML 语义化
- 让人更容易读懂(代码可读性)
- 有利于搜索引擎优化(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 的作用
默认情况下,脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候,文档解析就会被阻塞,在脚本下载和执行完成之后文档才能往下继续进行解析

其中蓝色代表 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)
- 可以和其他元素处于一行,不用必须另起一行
- 元素的高度、宽度及顶部和底部边距属性设置无效。(行内元素的
margin-top
、margin-bottom
和padding-top
、padding-bottom
属性设置是无效的,但是必须注意的是,对于padding-top
和padding-bottom
的设置,从显示效果上来看是增加的,但其实设置是无效的,因为它们没有撑大盒子,并不会对周围的元素产生影响)
<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;
}
- 元素的宽度就是它包含的文字、图片的宽度
常见的行内元素有:a
、input
、span
、img
、button
img
和表单元素是行内块display:inline-block
,他们既可以设置宽度高度,也能并排显示
块级元素(display:block)
- 每个块级元素都是独自占一行,其后的元素也只能另起一行,两个元素不能共用一行
- 元素的高度、宽度、行高和顶底边距都是可以设置的
- 元素的宽度如果不设置的话,默认为父元素的宽度
常见的块级元素有 div
、p
、h1...h6
、ol
、ul
、dl
、dt
、li
、table
、form
chatGPT
说一下 web workerWeb Worker 是 HTML5 中新增的 API,可以在浏览器后台线程中运行 JavaScript 代码,从而不影响页面的响应速度。在前端项目中,可以通过 Web Worker 实现如下功能:
大量计算任务:当前端需要进行大量的计算任务时,如果在主线程中执行,可能会阻塞页面的响应。使用 Web Worker 可以将这些任务放到后台线程中运行,保证页面的响应速度。
图片/视频处理:当需要对图片或者视频进行大量处理时,可以使用 Web Worker 在后台进行处理,避免占用主线程的资源,提升页面的响应速度。
长时间的数据处理:如果需要对大量数据进行操作和处理,可能需要很长时间才能完成。使用 Web Worker 可以将这些任务放到后台线程中运行,不会影响页面的响应速度。
聊天室/游戏:使用 Web Worker 可以实现聊天室和游戏等实时通信场景,避免占用主线程的资源,提升页面的响应速度。
如果面试官让你讲述 Web Worker 在项目中的应用场景,你可以从以上几个方面进行回答。例如,你可以提到在一个大型的数据可视化项目中,需要对大量的数据进行处理和渲染,而这些数据处理的过程可能会占用主线程很长时间,导致页面的响应速度很慢。通过使用 Web Worker,可以将数据处理的任务放到后台线程中进行,保证页面的响应速度。
追问我现在需要从后端请求数据量很大的 json,如何利用 web worker 进行优化,给出代码?
可以使用 Web Worker 来处理数据量很大的 JSON 数据,可以避免主线程卡顿。以下是一个简单的示例代码:
- 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
}
- 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() 方法来发送消息给主线程,再由主线程来更新页面上的内容。