图片懒加载

    • 获取浏览器视口高度
      • const viewPortHeight = window.innerHeight || document.documentElement.clientHeight
    • 获取图片离顶部的距离
      • getBoundingClientRect()
      • 或者 IntersectionObserver
    • Astro - > 300K - > 30K 看不到的组件就不加载 极致的加载体验 也是采用 intersectionObserver

    DataURL

    • base64

    HMR 热更新

    Websocket

    • 轮询
    • 定时器 、 短轮询
    • 区别
      • 性能 （DOM / Network）
      • 连接数
      • Payload
    • 及时性
    • Websocket 报文格式
      • Frame

    轮询缺点

    • 实时性不够
    • 频繁的请求会给服务器带来压力

    HTML5

    • 语义化标签
      • 代码结构清晰，方便阅读，有利于团队合作开发
      • 方便其他设备解析（屏幕阅读器）以语义的方式来渲染网页
      • 有利于搜索引擎优化（SEO）
    • 标签
      • header 页眉通常包括网站标志、主导航、全站链接以及搜索框。
      • nav标记导航，仅对文档中重要的链接群使用。
      • section定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
      • aside:侧栏、文章的一组链接、广告、友情链接、相关产品列表等
      • article定义外部的内容，其中的内容独立于文档的其余部分。
      • footer页脚，只有当父级是body时，才是整个页面的页脚。
    • 语义化标签
    • 表单功能增强
    • 音视频标签
    • Canvas + SVG
    • 拖放功能
    • 本地存储
    • WebWorker
    • 地理位置