HTML
DOM
- 文档对象模型，包含文档、节点、和元素
- 所有的元素都是节点，但是节点还包含注释、文本等
- 常用DOM操作：querySelector、appendChild、removeChild等
BOM
- 浏览器对象模型，主要提供了一些浏览器对象
- 包含window、navigator、history、screen、location、frame等
事件模型
- addEventListener 方法用于添加事件，removeEventListener或者通过AbortController对象可以删除事件
- 事件执行顺序为先捕获阶段 -> 目标元素 -> 冒泡阶段
- e.preventDefault 方法用于阻止默认事件
- e.stopPropagation 方法用于阻止事件冒泡
- 将监听事件绑定到父元素以实现对多个子元素的同时监听，该方式被称为事件委托，好处是可以节省内存，只需要绑定一次事件
HTML5
- 新增语义化标签：header、footer、section、video、audio等
- video
- video 可以直接使用src属性，也可以在子元素 source 中使用 src 属性
- 当有多个 source 子元素时，会默认使用第一个能加载成功得到资源播放
- controls 用于控制播放工具栏
- crossorigin 用于控制跨域，属性值表示是否携带认证信息
- loop、muted、poster 等属性表示字面意思
- preload 支持 none不预加载、metadata 预加载媒体的元数据、auto 预加载整个视频
- 支持监听的重点事件：loadeddata、pause、play、seeking、ended
- 可以使用的开源工具：video.js
- audio
- 用法和属性与video类似
- duration 表示音频文件的长度
- currentTime 表示当前的播放时间点
- 可以使用的开源工具：howler.js
- canvas
- 生成的是位图，受屏幕分辨率影响，默认宽高为300/150
- 需要获取canvas元素，然后通过 getContext 获取上下文
- 常用方法有moveTo、lineTo、stroke、rect、fillRect、clearRect等
- drawImage 方法用于渲染图片，toDataURL 方法可以将画布内容转成 Data URI
- 通过 CSS 样式设置宽高为 canvas 宽高的一半来解决模糊问题
- 优化手段1（减少绘制量）：减少重绘区域（如局部绘制）、分层绘制（区分静态元素和动态元素）、避免浮点数（小数坐标会进行抗锯齿处理）。
- 优化手段2（内存角度）：使用对象池（预先创建对象，避免频繁创建和销毁）、使用离屏canvas（在Worker线程中处理复杂的计算）
- 优化手段3（动画角度）：使用requestAnimationFrame（浏览器优化渲染时机），使用节流等（如在滚动或缩放中）
- 优化手段4（硬件加速）：复杂的绘制，可以使用webGL进行，如three.js。（CPU降低，但是内存占用更高）
- svg
- 生成的是矢量图，可自由缩放，由标签组成，可以在标签上绑定事件
- 常用元素有 rect、text、path、line、circle、g、foreignObject
- svg 的width和height属性定义svg的宽高，viewBox设置画布中展示的内容大小
- history
- 用于操作浏览器在标签页访问的会话历史记录
- 提供了back、forward、go、pushState、replaceState等方法
- 支持popstate事件，用于监听history发生的变化
- hisotry对象无法复写，且历史记录存在上限
- pushState和replaceState是不会触发popstate事件的，因此在路由里需要手动去触发页面或者组件渲染
- geolocation
- navigator.geolocaiton 主要通过 getCurrentPosition 方法获取当前地理位置信息
- 包含经纬度、海拔、移动速度、方向等信息
- 通过 watchPosition 方法监听变化，clearWatch 清除
- 本地存储
- localStorage
- 持久化存储，不手动删除或者清除浏览器缓存的话会一直存在
- 存储空间可以达到5M，所有内容都是以key value字符串的形式存储
- 提供 setItem、getItem、removeItem、clear等方法
- Cookie
- 由服务端返回Set-Cookie的header设置，在前端也可以通过document.cookie设置
- document.cookie 无法访问带有 HttpOnly 的 Cookie
- 存储空间为 4KB，由 max-age 或者 expires 设置过期时间
- sessionStorage
- 在当前浏览器窗口session时间内存在，关闭窗口后丢失
- 存储空间和操作的API与localStorage一样
- IndexedDB
- 在浏览器端实现的一种事务性数据库，以文件的形式存储在用户本地
- 只要本地磁盘空间足够，就可以一直存储
- 清除浏览器缓存时，不会清除数据，除非手动删除数据库
- 存在同源限制，只能访问自身域名下的数据库
- open 链接数据库；createObjectStore 建表；createIndex 创建索引
- 修改、查看、删除数据时需要先创建事务，之后选择表并添加数据
- 所有的操作都提供了 onsuccess 和 onerror 的事件
- 并发采用悲观锁，保证事务性。
- MongoDB 是一个基于文档的数据库，每个文档都是一个 JSON 对象，支持复杂的查询和索引，使用乐观锁机制，支持高并发。
- localStorage
标签
- link
- 用于加载外部链接的元素，通常用于加载CSS和favicon文件
- 通过设置 ref="preload" 或者 ref="prefetch"，配合 as 属性可以加载其他类型的文件
- script
- async 并行的请求脚本，并尽快解析和执行
- crossorigin 跨域的设置，anonymous 跨域设置为 ‘same-origin’，use-credentials 是否包含用户凭据
- defer 异步加载脚本不阻塞文档解析，但是阻塞 DOMContentLoaded 事件
- async 和 defer 的区别是，async 异步加载完成后还是会阻塞文档的解析，但是defer不会
- referrerpolicy 用于设置加载脚本请求的 Referer 头，默认只有HTTPS会发送 Referer 头
- type="module" 用于 ES Module 的形式加载和使用脚本
- viewport meta
- 浏览器显示页面的可视区域，主要用于适配不同尺寸屏幕
- 物理像素指设备屏幕中的实际像素值，逻辑像素指CSS设定的像素值，设备像素比 devicePixelRatio = 物理像素 / 逻辑像素
- width=device-width 设置视窗宽度为设备物理像素宽度
- initial-scale 初始的缩放值
- minimum-scale 和 maximum-scale 表示最大最小的缩放值
- user-scaleable 是否允许用户手动缩放页面
手机屏幕适配方案
- 核心目的：能让页面在不同尺寸的屏幕上保持体验一致性，
- 挑战性：手机尺寸和设备像素比有不同的差异
- 基础设置：使用viewport meta 标签设置宽度为设备宽度，禁止页面缩放
- 布局设置：使用百分比、flexbox、grid等布局方式，避免使用固定像素值。通常会使用rem或者vw作为单位
- 由于设计稿通常是以px为单位，所以需要使用插件将设计稿转换为rem或vw，如px2rem，px2vw等 ，rem和vw的计算方式是基于根元素的字体大小或者视口宽度，因此需要在CSS中设置好根元素的字体大小
- 1px边框问题：可以使用伪元素缩放或者box-shadow来实现更清晰的边框效果