张坤的博客

介绍有时我们需要观察元素是否可见，来进行一些操作。随着互联网的发展，这种需求却与日俱增，比如，下面这些情况都需要用到相交检测： 图片懒加载——当图片滚动到可见时才进行加载 内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多，而无需用户操作翻页，给用户一种网页可以无限滚动的错觉 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况 在用户看见某个区域时执行任务或播放动画 过去，要检测一个元素是否可见或者两个元素是否相交并不容易，很多解决办法不可靠或性能很差。例如，相交检测通常要用到事件监听，并且需要频繁调用 Element.getBoundingClientRect() 方法以获取相关元素的边界信息。事件监听和调用 Element.getBoundingClientRect() 都是在主线程上运行，因此频繁触发、调用可能会造成性能问题。这种检测方法极其怪异且不优雅。 Intersection Observer API 用于检测目标元素与祖先元素或 viewport 相交情况变化，它可以自动”观察”元素是否可见，可见（visible）的本质是，目标元素与视口产生一 ...

用户脚本用户脚本是一段 JS 代码，能为网站添加新的功能。编写 JS 脚本比 crx 扩展简单得多，不必为了实现一个简单的功能加入其他的文件。 使用用户脚本需要安装一个脚本管理器，最常用的就是油猴（Tampermonkey）或暴力猴（Violentmonkey），Firefox 应用商店、Edge 应用商店或 chrome 应用商店搜索 Tampermonkey 或 Violentmonkey，然后下载安装即可。 Tampermonkey vs Violentmonkey云端备份、导出备份、自动更新、筛选排序这些脚本管理的重要功能，油猴和暴力猴上都有。 Tampermonkey 多了一些定制，编辑工具功能也多一些。 Violentmonkey 安装包体积较小，界面比较清爽一些，设置也比较简单。 Violentmonkey 还多了一个比较实用的功能，为当前网站查找匹配的脚本。 编写脚本以 Violentmonkey 为例。 新建脚本。首先点击 Violentmonkey 扩展图标上面的 + 号，新建一个脚本。 设置脚本。以 // ==UserScript== 开头，// ...

介绍开发者在过去通常通过监听 blur 和 focus 事件来了解页面是否处于活动状态，虽然 onblur 和 onfocus 会告诉你用户是否切换窗口，但不一定意味着它是隐藏的。当用户切换选项卡或最小化包含选项卡的浏览器窗口时，页面才会隐藏。 页面可见性可以通过让页面在文档不可见时避免执行不必要的任务，从而来节省资源和提高性能。例如： 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片。 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新。 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量。 网站想要在设备处于待机模式时关闭声音（用户按下电源按钮关闭屏幕）。 网站正在播放视频，它可以在用户将选项卡置于后台时暂停视频，并在用户返回选项卡时恢复播放。 当用户最小化窗口或切换到另一个选项卡时，Document 会发送 visibilitychange 事件，让监听者知道页面状态已更改，然后可以检测事件并执行某些操作。 iframe 的可见性状态与父文档相同。使用 CSS 属性（例如 display: none;）隐藏 iframe 不会触发可见性 ...

单线程我们先了解一下进程和线程的概念。 进程：CPU 进行资源分配的基本单位，线程：CPU 调度的最小单位。 进程是一个应用的执行程序，线程则是进程内部执行某个部分的程序。 线程完成任务后将结果返回给进程，进程再返回给 CPU 处理。 JavaScript 为什么是单线程？因为 JavaScript 是可操纵 DOM 的，如果两个线程同时操作 DOM，那浏览器就无法保证 DOM 数据的一致性了。 在单线程上运行代码非常容易，不必处理多线程环境中出现的复杂场景，例如死锁，但也无法充分发挥计算机的 CPU 计算能力。 与 GUI 渲染线程互斥如果 JS 引擎线程和 GUI 渲染线程同时运行，初始渲染在修改元素之后完成，那么渲染前后获得的元素数据就不一致了。 当 JS 引擎线程执行时 GUI 会被挂起，GUI更新会被保存在一个队列中等到 JS 引擎线程空闲时执行。 如果 JS 引擎线程正在进行巨量的计算，此时就算 GUI 有更新，也会被保存到队列中等待，就会造成页面的渲染阻塞。 Web Worker现在浏览器可以使用 Web Worker API 为 JavaScript 创造多线程 ...

介绍通过 <a>, <area>、<form> 或 <link> 元素可以使一个页面链接到另一个页面，通过 href 属性（<form> 属性是 action）可以设置外部资源的路径。 rel 属性表示 “关系 (relationship) ”，在 <link>、<a>、<area> 和 <form> 元素上有效，属性值表示 <link> 的链接方式或与包含它的文档之间的关系。 支持的类型alternate在 <link>、<a>、<area> 元素上有效。如果元素是 <link> 并且 rel 属性也包含 stylesheet 类型，则链接定义替代样式表；在这种情况下，title 属性必须存在。 1234<link href="reset.css" rel="stylesheet"><link href="default.css" rel=& ...

介绍有时我们想得到现有的 DOM 树序列化后的字符串，如果仅仅想得到指定节点的后代，可以直接用 Element.innerHTML 属性；如果你想得到包括节点本身及它所有的后代的话，可以使用 Element.outerHTML 属性。 如果将字符串内容解析为 DOM 树，则有几种方法。 字符串转 DOM innerHTML12345function parse(html) { const placeholder = document.createElement("div"); placeholder.innerHTML = html; return placeholder;} 安全：没有脚本执行 允许的节点：只有有效的节点 insertAdjacentHTML12345function parse(html) { const placeholder = document.createElement("div"); placeholder.insertAdjacentHTML("afte ...

介绍HTML5 是具有扩展性的设计，它初衷是数据应与特定的元素相关联，但不需要任何定义。 data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。通过添加 data-* 属性，即使是普通的 HTML 元素也能变成相当复杂且强大的编程对象，而不需要使用 DOM 标准额外属性或是 setUserData 之类的技巧。 其中 * 可以被遵循 xml 规则的任何名称替换，并具有一些限制： 不能以 xml 开头（不区分大小写）； 不能包含冒号 :； 不能包含大写字母。 使用 CSS 访问：因为 data-* 设定为 HTML 属性，所以他们同样能被 CSS 访问。比如你可以通过 CSS content 属性，使用 attr 函数来显示 data-* 的内容： 1234<ul> <li data-id="Alex Trevelyan">006: Agent turned terrorist leader; James&#x ...

介绍CSS 网格布局用于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。 与 table 表格一样，网格布局让我们能够按行或列来对齐元素，但在布局上，网格比表格更容易做到且更简单。 与弹性盒网格布局和 flex 弹性盒布局的主要区别在于弹性盒布局是一维布局（沿横向或纵向的），而网格布局是二维布局（同时沿着横向和纵向）。 弹性盒的不足比如以下一个宽度 500px 的容器内有五个元素区域，我们使用弹性盒来对齐这些区域。在每个子项目上设置 flex: 1 1 150px;，以在 150px 基准上伸缩。flex-wrap 属性为 wrap，从而当容器变得太窄时，元素会换到新的一行。 1234567<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div></div ...

Virtual DOM如果数据绑定将开发者从操作 DOM 中解放了出来，那虚拟 DOM 则为数据绑定提供了性能保证，还有分层设计、跨平台以及服务端渲染等特性。 原理虚拟 DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU（JS） 和硬盘（DOM），直接操作硬盘（DOM）很慢，我们就在它们之间加个内存（Virtual DOM），CPU（JS）只操作内存（Virtual DOM），最后再把变更写入硬盘（DOM）。 并且虚拟 DOM 还会使用 Diff 算法来计算出真正需要更新的节点，从而最大限度地减少 DOM 操作，提升性能。 虚拟 DOM 的实现主要包括三个部分： 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象； diff 算法 — 比较两棵虚拟 DOM 树的差异； pach 算法(打补丁) — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。 例如，一个 Vue 组件的 HTML 结构为： 12345<template> <div id="app" class="co ...

Web Components我们以前一直在使用 <input>，<video>，<select> 这样的原生组件元素，而现在我们可以自己去定义这些组件。 使用 Web Components 的主要好处是原生支持，这意味着可以不需要任何框架即可完成开发，也意味着这将有更低的网络请求，以及更稳定的迭代前景。当你面向的最终用户可能使用了不同的前端技术栈，或是当你希望将最终的应用与它使用的组件实现细节解耦时，它们会是理想的选择。有不少大公司充分利用了这项技术： Twitter：嵌入式推文使用 Web Components 构建 YouTube：该站点是使用 Web Components 构建的 Electronic Arts：该站点也是使用 Web Components 构建的 Adobe Spectrum：该站点是一个基于 Web Components 的 UI 框架产品 维基百科 根据 w3techs.com 的数据，在 Chrome 浏览器中查看的所有网站中，有超过 15% 的网站至少注册了一个自定义元素。相比之下，只有 2.3% 的网站使用 Re ...