摘要
马上就要毕业啦，没有参加2023年的秋招，准备在最近开始找全职或者实习工作，然后也马上过年了，总结和理一下自己的知识要点，参加2024年的春招。
页面缩放
meta viewport 如何去使用，怎么使用？
html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />主要功能：不给移动端的用户缩放页面
HTML 新特性
- 语义化标签
- 增强型表单
- canvas
- svg
- 地理位置
- 拖放API
- Storage
- worker
- socket
- dom
- 视频和音频
如何使用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获取）
- CSS1Compat：标准模式，也是默认的模式。
- BackCompat：怪异模式（混杂模式），页面以一种比较宽松的向后兼容的方式显示。
Web Worker
web worker 是运行在后台的js，独立于其他脚本，不会影响页面性能。并且看可以通过postMessage将结果回传到主线程。这样在进行比较复杂的操作的时候，不会阻塞到主线程。
如何使用：
- 检测浏览器是否支持
- 创建web worker 文件
- 创建web worker 对象
离线存储
使用场景： 在用户没有与因特网链接时，可以正常访问站点或应用，如果有网，更行用户机器上的缓存文件。
原理： HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
使用方法：
- 创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性
- 在manifest文件中编写需要离线存储的资源
- 在离线状态时，操作 window.applicationCache 进行离线缓存的操作
iframe 的优点和缺点
优点：
- 用来加载速度比较慢的内容
- 可以使脚本并行下载
- 可以跨子域通信
缺点：
- iframe会阻塞主页面onload事件
- 无法被一些搜索引擎识别
- 会产生多页面不好管理
drag API
- dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
- darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
- dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
- dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
- dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
- drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
- dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
渐进增强和优雅降级
- 渐进增强：就是针对低版本页面重构，保证基本功能，针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验
- 优雅降级：构建完整的功能，再对低版本的浏览器进行兼容