前端知识点（面试可看） —— HTML

摘要

马上就要毕业啦，没有参加2023年的秋招，准备在最近开始找全职或者实习工作，然后也马上过年了，总结和理一下自己的知识要点，参加2024年的春招。

页面缩放

meta viewport 如何去使用，怎么使用？

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

主要功能：不给移动端的用户缩放页面

HTML 新特性

1. 语义化标签
2. 增强型表单
3. canvas
4. svg
5. 地理位置
6. 拖放API
7. Storage
8. worker
9. socket
10. dom
11. 视频和音频

如何使用Canvas

Canvas是HTML5中新增的一种特性，简要意思来说是画布，通过JS来绘制2D图形。

详细可以看我这篇文章：把Canvas捡起来吧！

cookie、sessionStorage和localStorage的区别

	cookie	sesstionStorage	localStorage
初始化	客户端或者服务器	客户端	客户端
过期时间	手动设置	关闭页面过期	永不过期
在当前浏览器会话中是否保持不变	取决于是否过了过期时间	否	是
是否会随着HTTP请求发送给服务器	是	否	否
大小	4kb	5MB	5MB
访问权限	任意	任意	当前页面

script、script async 和 defer 区别

script HTML中解析，被提取后立即执行
script async 脚本提取、执行与HTML解析过程并行，有可能在HTML解析完成之前执行完毕。
script defer 仅提取过程和HTML解析并行，如果包含多个defer，将会顺序执行。

perogressive rendering

perogressive rendering也叫做渐进式渲染，用于提高网页性能，提高用户感知力。

如何做到呢？

• 图片懒加载
• 异步加载HTML片段
• 确定显示内容的优先级，可以使用DOMContentLoaded/load事件加载其他资源和内容。

为什么把CSS样式链接放在head之间

首先，是规范要修。其次，这种做法可以让页面逐步呈现，提高用户体验。可以防止页面阻塞时没有央视，或者空白。

为什么把JS标签放在body之前

script标签在解析时，会阻塞HTML的执行，所以放在底部，让HTML先出现在页面中给用户看，提高体验度。最好的做法是使用defer属性，放在head中。

DOCTYPE的作用

DOCTYPE是HTML5中一种标准通用标记语言的文档声明类型，主要是告诉浏览器应该以什么样的文档类型来解析文档。（主要有html和xhtml两种）

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

1. CSS1Compat：标准模式，也是默认的模式。
2. BackCompat：怪异模式（混杂模式），页面以一种比较宽松的向后兼容的方式显示。

Web Worker

web worker 是运行在后台的js，独立于其他脚本，不会影响页面性能。并且看可以通过postMessage将结果回传到主线程。这样在进行比较复杂的操作的时候，不会阻塞到主线程。

如何使用：

1. 检测浏览器是否支持
2. 创建web worker 文件
3. 创建web worker 对象

离线存储

使用场景： 在用户没有与因特网链接时，可以正常访问站点或应用，如果有网，更行用户机器上的缓存文件。

原理： HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

使用方法：

1. 创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性
2. 在manifest文件中编写需要离线存储的资源
3. 在离线状态时，操作 window.applicationCache 进行离线缓存的操作

iframe 的优点和缺点

优点：

1. 用来加载速度比较慢的内容
2. 可以使脚本并行下载
3. 可以跨子域通信

缺点：

1. iframe会阻塞主页面onload事件
2. 无法被一些搜索引擎识别
3. 会产生多页面不好管理

drag API

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
• dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
• dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

渐进增强和优雅降级

• 渐进增强：就是针对低版本页面重构，保证基本功能，针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验
• 优雅降级：构建完整的功能，再对低版本的浏览器进行兼容