2024 高级前端面试题之 HTML 「精选篇」

---

1. 如何理解HTML语义化

• 用正确的标签做正确的事情。
• HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
• 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读。
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2. H5的新特性有哪些

• 拖放(Drag)API【下面有详细讲解 => 3】

• 画布(Canvas) AP

• 地理(Geolocation) API

• 音频、视频API(audio , video)

• localStorage 和 sessionStorage

• WebWorker, WebSocket【下面有详细讲解 => 2】

• 新的一套标签 header , nav , footer , aside , article , section

• web worker 是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过 postMessage 传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了

• HTML5 History两个新增的API：history.pushState 和 history.replaceState，两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新

  Hash 就是 url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。 可以为 hash 的改变添加监听事件：

  window.addEventListener("hashchange", funcRef, false
  

• WebSocket 使用 ws 或 wss 协议，WebSocket 是一个持久化的协议，相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。

  WebSocket 并不限于以 Ajax (或 XHR )方式通信，因为 Ajax 技术需要客户端发起请求，而 WebSocket 服务器和客户端可以彼此相互推送信息；XHR 受到域的限制，而 WebSocket 允许跨域通信。

  // 创建一个Socket实例
  var socket = new WebSocket('ws://localhost:8080');
  // 打开Socket
  socket.onopen = function(event) {
    // 发送一个初始化消息
    socket.send('I am the client and I\'m listening!');
    // 监听消息
    socket.onmessage = function(event) {
      console.log('Client received a message',event);
    };
    // 监听Socket的关闭
    socket.onclose = function(event) {
      console.log('Client notified socket has closed',event);
    };
  }
  // 关闭Socket....
  // socket.close()
  

3. 说一下 HTML5 Drag API

• 被拖动元素可以触发的事件
  • dragstart：在开始拖放被拖放元素时触发（拖拽开始）
  • darg：在正在拖放被拖放元素时触发（拖拽事件）
  • dragend：在整个拖放操作结束时触（拖拽结束）
• 拖动到的目标对象可以触发的事件
  • dragenter：在被拖放元素进入某元素时触发（拖拽进入）
  • dragover：在被拖放在某元素内移动时触发（悬浮事件）
  • dragleave：在被拖放元素移出目标元素时触发（拖拽离开）
  • drop：在目标元素停止拖拽时触发（丢弃事件）【需要在dragover中调用e.preventDefault()；才能触发drop】

4. iframe有那些缺点

• iframe 会阻塞主页面的onLoad事件；
• 搜索引擎的检索程序无法解读这种页面，不利于SEO;
• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载；
• 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过j，动态给 iframe 添加 src 属性。

5. 如何实现浏览器内多个标签页之间的通信

1. 使用 WebSocket 可以实现多个标签页之间的通信
2. 调用 localStorage
   • 在一个标签页里面使用 localStorage.setItem(key,value) 添加（修改、删除）内容
   • 在另一个标签页里面监听 storage 事件
   • 即可得到 localstorge 存储的值，实现不同标签页之间的通信
3. 调用 cookie + setInterval()

   将要传递的信息存储在 cookie 中，每隔一定时间读取 cookie 信息，即可随时获取要传递的信息。

具体demo见【】

6. 简述一下src与href的区别

• src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

• src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素

  <script src =”index.js”>

  当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，img 图片和frame等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部

• href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

  <link href=”common.css” rel=”stylesheet”/>
  

  那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载css，而不是使用 @import 方式。

7. 网页制作会用到的图片格式有哪些

png-8，png-24，jpeg，gif，svg，WebP（）

Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

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

• script：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
• defer：浏览器指示脚本在文档被解析后执行，script 被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行。
• async：同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async 属性下的脚本是乱序的，对于 script 有先后依赖关系的情况，并不适用

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析

9. 说一下 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应式的，直到脚本执行完成后， 页面才变成可响应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面你的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了

如何创建 web worker

10. 用一个div模拟textarea的实现

给 div 添加 contenteditable=true 即可

11. 介绍下资源预加载 prefetch/preload

都是告知浏览器提前加载文件(图片、视频、js、css等)，但执行上是有区别的。

• prefetch：利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。

  <link href="/js/xx.js" rel="prefetch">
  

• preload：可以指明哪些资源是在页面加载完成后即刻需要的，浏览器在主渲染机制介入前就进行预加载，这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。

  <link href="/js/xxx.js" rel="preload" as="script">
  

  需要 as 指定资源类型目前可用的属性类型：

  • audio：音频
  • video: 视频文件。
  • document：一个将要被嵌入到 或