2014 年，W3C 发布了信标（Beacon）的标准草案最终征求意见稿（目前已经是候选推荐草案）。该规范定义了一个异步非阻塞的数据上报接口，可以最大限度地减少对其他关键操作的资源占用，同时保证请求能正常发出。同年，该接口就被引入了 Firefox 和 Chrome，即 navigator.sendBeacon（下文简称为 sendBeacon）。
在实际开发工作中，该接口最常见的使用场景就是数据埋点。与其他埋点技术方案相比，sendBeacon 的优势在于：
sendBeacon 的方法原型非常简单：
navigator.sendBeacon(url, data);一般来说，SaaS 服务商提供的是标准化的产品服务，体现的是所有客户的共性需求。然而，部分客户（尤其是大客户），会提出功能、UI 等方面的定制需求。针对这些定制需求，大体上有两个解决方案。
第一个方案是提供应用程序 SDK，由客户的开发团队完成整个定制应用的开发和部署，SaaS 服务商提供必要的技术支持即可。此方案要求客户的开发团队具备较强的 IT 专业能力。
第二个方案则是由 SaaS 服务商的开发团队在 SaaS 应用的基础上进行二次开发，并部署。此方案主要面向 IT 专业能力较弱，或者仅需在 SaaS 应用的基础上进行少量定制的客户。然而，要支持这种定制方式，相当于要求 SaaS 服务商在同一个应用中，针对不同的客户运行不同分支的代码。要达到这个目的，应用程序的架构也要进行相应的改造。本文主要讲述改造的方案及其代码实现。
对于前后端分离的项目来说，经过构建，最终会生成 html、js、css 三种代码文件。以基于 Vue.js 框架的项目为例，其构建出来的 index.html，内容与下面的代码相似：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.my-app.net/sample/assets/css/chunk-0c7134a2.11fa7980.css" rel="prefetch">
<link href="https://cdn.my-app.net/sample/assets/js/chunk-0c7134a2.02a43289.js" rel="prefetch">
<link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="preload" as="style">
<link href="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js" rel="preload" as="script">
<link href="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js" rel="preload" as="script">
<link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js"></script>
<script src="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js"></script>
</body>
</html>实际上，index.html 只是访问入口，主要作用就是加载 css 和 js 资源。换句话说：任何的 html 页面，只要加载了上述 css 和 js 资源，都可以运行这个应用。
User agent（下文简称 ua），也就是用户代理，指的是代表用户行为的程序（软件代理程序）。例如，网页浏览器就是一个“帮助用户获取、渲染网页内容并与之交互”的用户代理。
当用户代理通过网络协议进行操作时，它通常会向网络上的协作端（比如服务器端）提交一个特定的字符串来标识自己。这段字符串就是用户代理字符串（下文简称 ua 串）。当我们用浏览器访问 Web 应用的时候，浏览器会把自己的 ua 串加到 HTTP 请求的 User-Agent 头字段进行传输。
1990 年，Tim Berners-Lee 编写了第一个浏览器 WorldWideWeb，后来改名为 Nexus。但是，Nexus 只支持文字展示。
1993 年，美国 NCSA 组织开发了 Mosaic 浏览器，能支持图片的展示使其成为第一款流行的浏览器。
这时候问题就来了，Nexus 不支持图片展示，而 Mosaic 是支持的。作为开发人员，该怎么编写页面代码呢？这时候 ua 串就可以发挥作用了，开发人员仅需针对 Mosaic ua 串的请求输出图片展示相关的代码即可。Mosaic 的 ua 串样本如下：
NCSA_Mosaic/1.0 (Windows 3.1)
其中 NCSA_Mosaic/1.0 为浏览器代号及其版本号，Windows 3.1 为操作系统及其版本号。
随后，1994 年，Mosaic 团队的领导者 Marc Andreessen 辞职并成立了自己的公司——Netscape，并开发了 Netscape Navigator 浏览器。它的内部代号为「Mozilla」，ua 串样本如下：
Mozilla/4.5 (compatible; HTTrack 3.0x; Windows 98)
Netscape Navigator 的市场占有率一度达到 90%，并且最先支持了框架（frame）特性。开发人员为了区别这两个浏览器，还是用的 ua 串识别这个方式。如果 ua 串中浏览器代号为 Mozilla，那就发送包含框架的页面，否则，就发送不含框架的页面。
再后来，1995 年，微软推出了 Internet Explorer（下文简称 IE）。IE 也支持框架，但因为过去的框架代码都是针对 Mozilla 这个代号发送的，这样一来，IE 即使支持框架，也收不到包含框架的代码。让所有的开发人员把自己的代码都改一遍明显不现实，最后 IE 只好“自称” Mozilla，同时在 ua 串的其他位置增加自己的代号 MSIE。它的 ua 串样本如下：
Mozilla/4.0 (compatible; MSIE 1.0; Windows 3.11)
IE 在浏览器市场中逐渐成为了霸主，败北的 Netscape Navigator 另起炉灶，开发了 Firefox。无论是 IE、Netscape Navigator 还是 Firefox，ua 串都以 Mozilla 代号开头。这也几乎成为了浏览器 ua 串事实上的格式标准：
Mozilla/[version] ([system and browser information]) [platform] ([platform details]) [extensions]
时至今日，ua 串承载的内容越来越多，开发人员识别起来的难度也越来越高了。
直播是眼下最为火爆的行业，而弹幕无疑是直播平台中最流行、最重要的功能之一。本文将讲述如何实现兼容 PC 浏览器和移动浏览器的弹幕。
一般来说，弹幕数据会通过异步请求或 socket 消息传到前端，这里会存在一个隐患——数据量可能非常大。如果一收到弹幕数据就马上渲染出来，在量大的时候：
所以在接收和渲染数据之间，要引入队列做缓冲。把收到的弹幕数据都存入数组（即下文代码中的 this._queue），再通过轮询该数组，把弹幕逐条渲染出来：
class Danmaku {
// 省略 N 行代码...
add(data) {
this._queue.push(this._parseData(data));
if (!this._renderTimer) { this._render(); }
}
_render() {
try {
this._renderToDOM();
} finally {
this._renderEnd();
}
}
_renderEnd() {
if (this._queue.length > 0) {
this._renderTimer = setTimeout(() => {
this._render();
}, this._renderInterval);
} else {
this._renderTimer = null;
}
}
// 省略 N 行代码...
}移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮挡。后来，这个问题在iOS下得到了解决。但是对Android的大部分浏览器来说，问题仍然存在。X5是腾讯基于Webkit开发的浏览器内核，应用于Android端的微信、QQ、QQ浏览器等应用。它提供了一种名叫「同层播放器」的特殊video元素以解决遮挡问题。
只要给普通的video元素加上X5的自定义属性 x5-video-player-type ，就可以调用同层播放器。示例代码如下：
body {
margin: 0;
background: #000;
}
.video {
width: 100%;
}<div class="player">
<video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5">
<source src="video.mp4" />
</video>
</div>多年前，因为换工作的需要，我得更新简历。但可能是写惯了CSS的缘故，在Word中排版实在是各种不顺手，于是就发挥了作为前端工程师的优势，把简历做成了网页。久而久之，这份简历就成为了我的个人产品，无论是否需要再找工作，每隔一段时间我都会进行更新迭代。
网页版简历有以下这些好处：
在此基础上，我还给这份简历定下了一个重要目标——「Write once, run anywhere」。兼容PC、手机和平板设备，还可以通过浏览器直接打印。
本文将从技术角度描述这样一份简历的开发过程。
说到设计，很多程序员会喊：“我是写代码的，不懂设计。”但俗话说得好：没吃过猪肉，总见过猪跑吧。平时看过这么多网页，还跟大量产品设计稿打交道。看到布局合适的，抄一下；看到配色合适的，抄一下；看到素材合适的，也抄一下。值得注意的是，近年来有一类页面特别适合改造成个人简历，那就是手机厂商每发布一款新手机都会做的手机宣传页。我自己的简历设计就是借鉴了iPhone的宣传页。
大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序（下文简称为「小程序」）中，应当如何渲染这部分内容呢？
小程序刚上线那会儿，是无法直接渲染HTML内容的，于是就诞生了一个叫做「wxParse」的库。它的原理就是把HTML代码解析成树结构的数据，再通过小程序的模板把该数据渲染出来。
后来，小程序增加了「rich-text」组件用于展示富文本内容。然而，这个组件存在一个极大的限制：组件内屏蔽了所有节点的事件。也就是说，在该组件内，连「预览图片」这样一个简单的功能都无法实现。
再后来，小程序允许通过「web-view」组件嵌套网页，通过网页展示HTML内容是兼容性最好的解决方案了。然而，因为要多加载一个页面，性能是较差的。
对于移动端的Web单页应用来说，为了达到媲美原生应用的效果，页面过渡动画是必不可少的。常用的页面过渡动画包括：
（注意：以下讨论和实验均在 Chrome 68 浏览器环境下进行）
目前大多数设备的屏幕刷新率为60次/秒，算下来每个帧的预算时间约为16.66毫秒（1/60秒）。考虑到浏览器还有其他工作要执行，实际上预算时间只有10毫秒。跟此预算时间的差值越大，用户就会觉得动画过程越卡。那么，在这10毫秒内要完成什么事情呢？当使用JavaScript实现视觉交互效果时，一般要经过以下流程：
HTML 5 曾被认为是移动应用的明天，却被原生App在性能和功能上轻易战胜，Web逐渐成为App的附属。然而，马云“爸爸”告诉我们：“梦想还是要有的，万一实现了呢？”如今，我们离梦想又近了一步。
PWA，全称「Progressive Web App」，是Google提出的为Web提供App般使用体验的一系列技术方案。它优势主要体现在：
本文将逐一讲述PWA涉及的主要技术方案。
由于网页传播的便捷性，从网页向APP导流几乎是所有APP厂商都会采用的推广手段，具体来说就是在网页上提供一些触发点（例如按钮、链接），用于跳转到APP。
