luoleiself's blog

blog

0%

发表于 分类于 1.3k 1 分钟

accent-color

为某些元素所生成的用户界面控件设置了强调色

  • auto 表示用户代理所选颜色, 应匹配平台的强调色(若有)
  • <color> 指定用作强调色的颜色
1
2
3
4
5
6
7
<input type="checkbox" checked/>
<input type="radio" />
<style>
    input {
        accent-color: #74992e;
    }
</style>
阅读全文 »

发表于 更新于 分类于 4.8k 4 分钟

Grid

CSS Grid 是一个用于 web 的二维布局系统, 网格是由一系列水平及垂直的线构成的一种布局模式, 根据网格, 可以将内容按照行和列的格式进行排版.
CSS Grid 布局 和 Flexible 布局的主要区别在于 CSS Flexible 是为了一维布局服务的(沿横向或纵向), 而 CSS Grid 是为二维布局服务的(同时沿着横向和纵向)

辅助属性

  • 网格轨道, 网格布局中使用 grid-template-rows 和 grid-template-columns 属性定义的网格上的行和列, 网格轨道是网格上任意两条相邻线之间的空间.
  • fr 单位, 新的长度单位, 表示网格容器中占用的轨道
  • minmax(min, max), 函数为一个行/列的尺寸设置了取值范围, 例如 minmax(100px, auto) 表示尺寸至少为 100px, 如果内容尺寸大于 100px 则会根据内容自动调整
  • repeat(count, value), 表示轨道列表的重复片段, 允许以更紧凑的形式写入大量显示重复模式的列或行

属性列表

  • grid-template-rows

  • grid-template-columns

  • grid-template-areas

  • grid-auto-flow

  • grid-auto-rows

  • grid-auto-columns

  • grid-gap/gap

    • grid-column-gap
    • grid-row-gap

  • grid-area

    • grid-row
    • grid-column
阅读全文 »

发表于 更新于 分类于 846 1 分钟

BroadcastChannel

该接口代理了一个命名频道, 可以让同源下的任意浏览上下文订阅它, 它允许同源的不同浏览器窗口(非 chrome 和 qq 浏览器这种方式), tab 页, frame 或者 iframe 下的不同文档之间相互通信,
通过触发一个 message 事件, 消息可以广播到所有监听了该频道的 BroadCastChannel 对象.

  • 构造函数

    • channelName, 表示通道名称的字符串, 对于相同的来源下的所有浏览上下文, 一个名称只对应一个通道
1
const bc = new BroadcastChannel(channelName);
阅读全文 »

发表于 更新于 分类于 1.3k 1 分钟

EventSource

当不使用 HTTP/2 时, 服务器发送事件(SSE)受到打开连接数(6)的限制, 这个限制是针对浏览器的. 每个浏览器的所有标签页中对相同域名的连接数最多支持 6 个

当使用 HTTP/2 时, 最大并发 HTTP 流的数量是由服务器和客户端协商的(默认为 100)

Web 内容与服务器发送事件通信的接口, 通信方向是单向的, 数据消息只能从服务器发送到客户端. 如果接收消息中有一个 event 字段, 触发的事件与 event 字段的值相同, 如果不存在 event 字段, 则将触发通用的 message 事件

  • url, 表示远程资源的位置
  • configuration, 可选, 一个对象
    • withCredentials, 标识 CORS 是否包含凭据, 默认为 false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const sse = new EventSource(url, configuration);
/**
 * 没有 event 字段时触发
 * event: message
 * data: user data
 * id: someid
 */
sse.onmessage = function (e) {
  console.log(e);
};

/*
 * 触发 notice 事件回调
 *
 * event: notice
 * data: useful data
 * id: someid
 */
sse.addEventListener('notice', (e) => {
  console.log(evt);
});
阅读全文 »

发表于 更新于 分类于 7.7k 7 分钟

Web Component

Web Component 是一套不同的技术, 允许创建可重用的定制元素(它们的功能封装在代码之外)并且在 web 应用中使用它们

  • Custom element(自定义元素): 一组 JavaScript API, 允许自定义元素及其行为, 然后在用户界面中按照需要使用它们
  • Shadow DOM(影子 DOM): 一组 JavaScript API, 用于将封装的 “影子”DOM 树附加到指定元素(与页面 DOM 分开呈现)并控制其关联的功能. 通过这种方式, 可以保持自定义元素的功能私有, 这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突
  • HTML template(HTML 模板): <template> 和 <slot> 元素可以编写不在呈现页面中显示的标记模板. 然后它们可以作为自定义元素结构的基础被多次重用

自定义元素

==封装== ==重用==

创建自定义元素, 扩展浏览器中可用的元素集

类型

  • 自定义内置元素, 继承自标准的 HTML 元素, 例如 HTMLImageElement, HTMLParagraphElement
  • 独立自定义元素, 继承自 HTML 元素基类 HTMLElement, 必须从头实现它们的行为

实现自定义元素

使用 ES6 中的类实现一个自定义元素, 该类可以扩展 HTMLElement 或者其它定制的接口

  • 在构造函数中设置初始化状态和默认值, 注册事件监听器, 创建一个影子根(shadowRoot)
  • 在构造函数中不能检查元素的属性或子元素, 不能添加新的属性或子元素
阅读全文 »

发表于 更新于 分类于 2.7k 2 分钟

Element.insertAdjacentElement(position, element)

将一个给定的元素节点插入到相对于被调用元素的给定的一个位置, 执行成功返回插入的元素, 失败则返回 null

  • position 表示相对于该元素的位置
    • ‘beforebegin’ 在该元素本身的前面
    • ‘afterbegin’ 只在该元素中, 在该元素中的第一个子元素前面
    • ‘beforeend’ 只在该元素中, 在该元素中的最后一个子元素的后面
    • ‘afterend’ 在该元素本身的后面
  • element 要插入的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

<script>
  // 只有当节点处于 DOM 树中且有一个父节点时 beforebegin 和 afterend 才会生效
  beforeBtn.addEventListener('click', () => {
    const tempDiv = document.createElement('div');
    tempDiv.style.backgroundColor = randomColor();
    if (activeElem) {
      activeElem.insertAdjacentElement('beforebegin', tempDiv);
    }
    setListener(tempDiv);
  });

  afterBtn.addEventListener('click', () => {
    const tempDiv = document.createElement('div');
    tempDiv.style.backgroundColor = randomColor();
    if (activeElem) {
      activeElem.insertAdjacentElement('afterend', tempDiv);
    }
    setListener(tempDiv);
  });
</script>
阅读全文 »

发表于 更新于 分类于 11k 10 分钟

Performance

Performance 接口可以获取当前页面中与性能相关的信息, 它是高级能力 Timing API 的一部分, 同时也融合了 Timeline API, Navigation Timing API, User Timing API, Resource Timing API

该类型的对象可以通过调用只读属性 window.performance 获取

只读属性

  • navigation: 获取在指定的时间段内发生的操作相关信息, 包含页面的加载刷新、发生了多少次重定向等

  • timing: 表示包含延迟相关的性能信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    performance.timing;
    // {
    //   "connectStart": 1685528410085,
    //   "navigationStart": 1685528410083,
    //   "secureConnectionStart": 0,
    //   "fetchStart": 1685528410085,
    //   "domContentLoadedEventStart": 1685528410878,
    //   "responseStart": 1685528410185,
    //   "domInteractive": 1685528410417,
    //   "domainLookupEnd": 1685528410085,
    //   "responseEnd": 1685528410186,
    //   "redirectStart": 0,
    //   "requestStart": 1685528410087,
    //   "unloadEventEnd": 0,
    //   "unloadEventStart": 0,
    //   "domLoading": 1685528410189,
    //   "domComplete": 1685528410896,
    //   "domainLookupStart": 1685528410085,
    //   "loadEventStart": 1685528410897,
    //   "domContentLoadedEventEnd": 1685528410878,
    //   "loadEventEnd": 1685528410897,
    //   "redirectEnd": 0,
    //   "connectEnd": 1685528410085
    // }

  • memory: 非标准属性, 表示基本内存使用情况的对象

  • timeOrigin: 表示性能测量开始时的时间的高精度时间戳

阅读全文 »

发表于 更新于 分类于 3.2k 3 分钟

IntersectionObserver

之前通常要使用事件监听, 并且需要频繁调用 Element.getBoundingClientRect() 方法以获取相关元素的边界信息, 并使用事件通知的方式同步进行计算, 可能造成性能问题

IntersectionObserver 接口提供了一种异步观察目标元素与祖先元素或顶级文档视口(viewport)交叉状态的方法
当一个 IntersectionObserver 对象被创建时, 其被配置为监听根中一段给定比例的可见区域, 一旦 IntersectionObserver 被创建, 则无法更改其配置, 所以一个给定的观察者对象只能用来监听可见区域的特定变化值, 但是, 可以在同一个观察者对象中配置监听多个目标元素

  • 交叉状态触发是成对出现的, 就像 mouseenter 和 mouseleave 事件一样, 有进入状态在未来某一时刻肯定会有移出状态
  • 在非交叉区域内的操作不会触发, 和 scroll 事件的触发是有区别的

应用范围

  • 图片懒加载, 当图片滚动到可见区域时才进行加载
  • 内容无限滚动, 用户滚动到接近内容底部时直接加载更多而无需用户操作翻页
  • 检测广告的曝光情况, 为了计算广告收益, 需要直到广告元素的曝光情况
  • 在到达可见区域时执行任务或播放动画

触发时机

通常只需要关注文档最接近的可滚动祖先元素的交集更改, 如果元素不是可滚动元素的后代, 则默认为设备视窗
如果要观察相对于根元素的交集, 则指定根元素为 null

  • 每当目标元素与设备视窗或者其他指定元素发生交集的时候执行, 设备视窗或者其他元素被称为根元素或根
  • Observer 第一次监听目标元素时
阅读全文 »

发表于 更新于 分类于 14k 13 分钟

可读流

ReadableStream

创建并从给定的 Handler 返回一个可读流对象

RS 构造方法

创建并从给定的处理程序返回一个可读的流对象

可读流配置项

underlyingSource 可选的定义可读流的行为方式的配置项

  • start(controller) 由开发人员定义, 当流对象被创建时立刻调用, 执行其他任何必须的设置流功能, 如果过程是异步的则返回一个 Promise
    • controller 根据 type='bytes' 属性传递的 ReadableStreamDefaultController 或 ReadableByteStreamController 控制器实例
  • pull(controller) 由开发人员定义, 当流的内部队列不满时, 会重复调用这个方法, 直到队列补满
  • cancel(reason) 由开发人员定义, 当该流被取消时调用
  • type 控制正在处理的可读类型的流, 默认 ReadableStreamDefaultController, type='bytes' 表示 ReadableByteStreamController
  • autoAllocateChunkSize 开启流自动分配缓冲区, 使用正整数设置
阅读全文 »

发表于 更新于 分类于 3.1k 3 分钟

目前仅在 chrome 86 (edge 86, opera 72)及以上版本支持, safari 和 firefox 暂时不支持

允许 Web 应用程序从用户设备的本地文件系统中操作文件, 它为 Web 应用程序提供了更多的灵活性和功能, 使其更接近于本地应用程序的体验

File System Access API 遵循同源策略, 只允许 Web 应用程序在具有相同源的文件系统上进行操作, 当使用该 API 时, 会提示用户授权应用程序访问文件系统

  • 将文件从本地文件系统上传到 Web 应用程序
  • 将 Web 应用程中的数据写入到本地文件系统中
  • 在用户的本地文件系统中创建、重命名和删除文件
  • 读取本地文件系统上的文件内容

FileSystemHandle接口

是 File System Access API 表示文件或目录条目的对象, 多个句柄可以代表同一个条目，通常情况下, 使用它的子接口 FileSystemFileHandle 和 FileSystemDirectoryHandle

1
2
3
4
5
6
7
8
9
/**
 * 继承
 * FileSystemHandle
 *  <- FileSystemFileHandle
 *  <- FileSystemDirectoryHandle
 * FileSystemSyncAccessHandle
 * WritableStream
 *  <- FileSystemWritableFileStream
 */
阅读全文 »