html

zfh大约 8 分钟约 2373 字...

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三种方式对比
script三种方式对比

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

下面是asyncdefer两者区别:

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

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

  • script同时有asyncdefer属性时,执行效果和async一致

常见的 meta 标签有哪些

meta标签由namecontent属性定义,用来描述网页文档的属性

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 嵌套)
  • 新的表单控件:dateemailurlnumberrangesearchcolorteltimemonthweekdatetimedatetime-local
  • 进度条:progress
  • DOM 查询操作:querySelector、querySelectorAll
  • web 存储
  • 拖放 draggable
  • 画布 canvas
  • 地理定位:通过 navigator.geolocation 对象的 getCurrentPosition() 方法,可以获取当前设备的地理位置信息
  • websocket
  • web workers
  • history API

默认情况下,哪些 HTML 元素是块级元素,哪些是内联元素(行内元素)?

内联(行内)元素(display:inline)

  1. 可以和其他元素处于一行,不用必须另起一行
  2. 元素的高度、宽度及顶部和底部边距属性设置无效。(行内元素的 margin-topmargin-bottompadding-toppadding-bottom 属性设置是无效的,但是必须注意的是,对于 padding-toppadding-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;
}
  1. 元素的宽度就是它包含的文字、图片的宽度

常见的行内元素有:ainputspanimgbutton

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

块级元素(display:block)

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

常见的块级元素有 divph1...h6oluldldtlitableform

说一下 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
}
  1. 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() 方法来发送消息给主线程,再由主线程来更新页面上的内容。

上次编辑于:
本站勉强运行 小时
本站总访问量
網站計數器