后端开发教程 - Java、Spring Boot 实战 - msg200.com
热门 HTML 面试问题及详细解答🌺🌴😃🤽🏨🏖️ 第二部分
这是热门 HTML 面试题的第二部分。今天我们回顾一些有趣的主题，例如 Canvas、Location API、FileReader API 等等。
开始吧💫
这次活动的目的是什么beforeunload？
在用户尝试导航到另一个页面或关闭窗口之前触发beforeunload。它用于执行一些最终检查，或提示用户执行这些操作时可能产生的一些副作用。
location.hash以下页面中的值是什么：
http://www.example.com/index.html#part1
返回location.hashURL 的锚点部分。因此在这种情况下它将返回#part1
当发生变化时会触发哪个事件location.hash？
hashchange当 URL 的片段标识符发生变化时触发该事件。
如果浏览器第一次执行以下命令会发生什么？
navigator.geolocation.getCurrentPosition(function(pos) {})
第一次它将请求用户的许可以查询设备的当前位置。
我们如何使用 FileReader 对象读取文件的内容？
我们需要创建一个事件input type=file处理程序，用于处理用户从文件系统或拖放区域中选择一个或多个文件的操作。然后，我们需要一个onchange事件处理程序来传递 File 对象列表。接下来，要读取文件内容，我们需要使用：
const reader = new FileReader();
reader.onload = function(e) {
// e.target.result will contain the image data
}
reader.readAsDataURL(file);
我们通过将一些文件从桌面拖到指定区域来触发拖拽事件。如何在drop事件处理程序中访问这些文件？
如果用户正在拖动文件，这些文件将驻留在事件dataTransfer对象中，例如：e.dataTransfer.files；
服务器发送事件（SSE）和 Websockets 之间有什么区别？
使用 Websockets，服务器和浏览器可以建立双向通信（发送和接收）。使用 SSE，只有服务器可以将数据推送到浏览器，而浏览器则不能。
我们如何获得 2d Canvas 的上下文？
我们需要调用 Canvas getContext API：
let ctx = canvas.getContext('2d');
该<canvas>元素是否遵循盒子模型？
否。<canvas>不使用 CSS 盒子模型。如果你在画布上绘制内容，它可能会溢出容器。
当放大 SVG 图像和 JPG 图像时会发生什么？
JPG 会像素化，看起来很模糊。SVG 会保持其清晰度和质量。
我们如何直接操作<canvas>元素内的鼠标指针？
通过使用指针锁 API，我们可以显示/隐藏指针，将其锁定在一个地方或控制它的移动。
<video>我们希望在元素加载第一帧时显示加载器。如何找到这些信息？
由于<video>元素是，HTMLMediaElement我们可以使用它networkState或readyState属性来检索有关视频元素状态的信息。
<source>元素中的多个子元素的用途是什么<video>？
对于每个<source>元素，我们指定一个视频，以便浏览器依次尝试每个视频并使用其可以支持的第一个视频格式。
这两个脚本标签有什么区别？：
<script src="app.js" defer></script>
<script src="app.js" async></script>
指定defer脚本在页面解析完成后执行。另一方面，async指定脚本与页面其余部分异步执行，例如，当页面加载时，它将立即执行。