前言

本文是我部门的一次分享，张鑫旭老师也整理过相应文字版本我在补充下

现在创意 H5 做的堪比电影，传统方式的动画、gif 已经满足不了性能需求，越来越多的内容正在以 HTML5 视频的方式呈现，随之而来的视频优化变得的越来越重要。HTML5 视频秒播优化的有很多方面，从服务器，cdn 部署接入，数据连接 / 获取，客户端缓存，出帧策略，到视频文件 I 帧位置等，今天从视频文件格式的角度介绍。

一个活动

在座诸位，请打开浏览器，新开一个标签页，打开开发者工具，切换到 network 面板 → Media 选项，然后 — 复制下面地址（天猫某活动备份地址）到地址栏，回车：ali-tmhly.h5.neone.com.cn/ 。此时，你会看到一个名为 video2 的 mp4，前前后后发送了 3 次请求：

这是糟糕的！应该只有 1 次请求才是最佳的！

3 次请求的原因

一个 MP4 视频文件，不单单是视频内容，还有很多其他信息，尺寸，时长，字幕，版权信息等。

这些信息被放在一个一个的 box 中，换句话说就是，一个 MP4 文件由很多个 box 组成的，用以存储媒体信息。

其中，有个与请求数有关的 box 名叫 MOOV BOX。

MOOV BOX

Moov box 存放的是如何播放视频的信息，如尺寸和每秒的帧数，则存储在叫做 moov 的特殊 box 中。你可以认为 moov box 是某种意义上的 MP4 文件目录。
当你播放视频时，程序会查找 MP4 文件，定位 moov box 的位置，然后借此去查找视频和音频的起始位置来开始播放。
Box 可能以任意顺序排列，所以程序一开始并不知道 moov box 哪里。如果是本地播放，没有任何问题，因为你已经拥有整个视频文件；但如果在线观看，也就是流传输 HTML5 视频时，就会有问题了。

读取 MOOV 过程

浏览器直接发起 HTTP MP4 请求，读取响应 body 的开头，如果发现 moov 在开头，就接着往下读
mdat。如果发现开头没有，先读到 mdat，立马 RESET 这个连接，节省流量，通过 Range 头读取文件末尾数据，因为前面一个 HTTP 请求已经获取到了 Content-Length ，知道了 MP4 文件的整个大小，通过 Range 头读取部分文件尾部数据也是可以读取到的。
也就说，之所以上面天猫某活动 MP4 视频会发起 3 次请求，就是因为视频的 moov box 放在了文件末尾。

为什么会放在后面

因为在导出 视频文件是时候一般软件都是先写入 mdat 后写入 moov，因此绝大多数工具都会默认把 moov 数据放到 mdat 后边，比如 mp4writer，ffmpeg 等工具

三、如何避免视频的3次请求

很简单，使用工具把 Moov box 提到视频的前面就好了。

• Handbrake
  HandBrake 乃 Web MP4 视频优化工具不二之选，其中就有 moov box 前置优化 web 请求的功能。

• ffmpeg
  FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用 LGPL 或 GPL 许可证。它提供了录制、转换以及流化音视频的完整解决方案。

ffmpeg -i 你的视频.mp4 -movflags faststart -acodec copy -vcodec copy 输出的视频.mp4

优化之后

此时，视频请求就只有一次了，口说无凭，直接看证据，狠戳这个demo，起点某视频活动。

可以看到，加载的时候，就只会有 1 个请求。

最后

相关软件

链接 密码: rm1f

浏览器的渲染方式，主要分为两种，第一种是软件渲染，第二种是硬件渲染。如果绘制工作只是由 CPU 完成，那么称之为软件渲染，如果绘制工作由 GPU 完成，则称之为硬件渲染。软件渲染与硬件渲染有不同的缓存机制，只要我们合理利用，就能发挥出最好的效果。

开启

浏览器还有一种名为硬件渲染的渲染方式，它是使用 GPU 的硬件能力来帮助渲染页面,那么是怎么设置的？

• 启用硬件加速
  在chrome的地址栏中输入chrome://settings/回车滚动页面到地步，点击显示高级设置再次滚动到页面地步，找到使用硬件加速模式
• 开启gup硬件加速
  在chrome的地址栏中输入chrome://flags/#disable-accelerated-video-decode找到硬件加速的视频解码，点击启用

完成上面两步后重启浏览器

能做什么

大家都知道在页面性能优化的时候都会用到 GPU 加速、硬件加速类似方式，浏览器一帧（1000/16ms）会依次执行以下，减少或者避免 layout，paint 可以让页更加流畅：

1. JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
2. Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
3. Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
4. Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
5. Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

一个页面是由多个图层最后形成一个完整的合成层才被渲染出来效果就像这样：

硬件渲染 WebKit 会依据指定条件决定将那些 RenderLayer 对象组合在一起形成一个新层并缓存在 GPU，这些新层我们统称为合成层（Compositing Layer）。这些合成层提升成独立的层，被独立出来之后，便不会再影响其他 dom 的布局。如果发生 偏移、透明度等等变换 GPU 要做的只是把更新的合成层进行相应的变换并送入 Compositor 重新合成即可，利用这个优点我们可以把页面中一些布局经常变换的 dom 提升到独立的层。

在上图中黄色边框表示放到了一个新的复合层（composited layer）中渲染，左侧的列表里列出页面里存在哪些渲染层，右侧的 Details 显示的是这些渲染层的详细信息，包括渲染层的大小、形成原因等。

如何触发合成层

1. 根节点 document
2. HTML5 Video或者Canvas元素。
3. 元素有一个 z-index 较低且包含一个复合层的兄弟元素
4. 3D 或透视变换(perspective，transform) CSS 属性 比如常用的 （设置translateZ()、backface-visibility为hidden）

注意事项

也就是上面第三条，英文原版是这么说

Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)

意思是，如果有一个元素，它的兄弟元素在复合层中渲染，而这个兄弟元素的z-index比较小，那么这个元素（不管是不是应用了硬件加速样式）也会被放到复合层中。

所以用轮播、动画loading等页面的时候要注意下要遵循最小化影响原则，如果调试看到有很多 黄色边框 就要注意了。

使用 3D 硬件加速提升动画性能时，最好给元素增加一个 z-index 属性，人为干扰复合层的排序，可以有效减少 chrome 创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

关于 CSS3 will-change

前面说的那些有点 hack，CSS3 will-change 才是正规军是属于 web 标准属性，兼容性这块 Chrome/FireFox/Opera 是支持的，它是提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置，具体值：

1
2
3
4
5
6
7
8
9
10
11
12

/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* <custom-ident>示例 */
will-change: opacity;          /* <custom-ident>示例 */
will-change: left, top;        /* 两个<animateable-feature>示例 */

/* 全局值 */
will-change: inherit;
will-change: initial;
will-change: unset;

will-change 虽然可以加速,但是不可滥用。。。

函数式语言给了我一个全新的视角，从一个完全不同的方式去看待编程，开始会感到不自然，需要时间去适应。所有的定义都是基于函数，值不可更改，无状态，但是时间久了就会发现代码会更加简洁，而且容易复用。

if 简化

几乎每个if语句的实例都可以用一个等价的三元操作来替代。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 典型的
function saveCustomer(customer) {
  if (isCustomerValid(customer)) {
    database.save(customer)
  } else {
    alert('customer is invalid')
  }
}
// 三元
function saveCustomer(customer) {
  return isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')
}
// ES6 的写法
const saveCustomer = customer =>
  isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')

多层嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 多层 else-if
function customerValidation(customer) {
  if (!customer.email) {
    return error('email is require')
  } else if (!customer.login) {
    return error('login is required')
  } else if (!customer.name) {
    return error('name is required')
  } else {
    return customer
  }
}

// ES6 三元修正
const customerValidation = customer =>
  !customer.email   ? error('email is required')
  : !customer.login ? error('login is required')
  : !customer.name  ? error('name is required')
                    : customer

现在就可以清楚地看到左侧定义的所有条件以及右侧返回的值。

没有 for 循环

filter, map 和 reduce 可以满足所有情况, filter、map 和 reduce 共同点就是并不会对原数组做任何改动，结果都是生成一个新变量。

原始代码 获得小于 10个月的

1
2
3
4
5
6
7
8
9
10
11
12

const peoples = [
  { name: '小明',     months: 84 },
  { name: '小小明',   months: 24 },
  { name: '小小小明', months: 4 }
]
var children = []
for (var i = 0; i < peoples.length; i++) {
  if (peoples[i].months < 10) {
    children.push(peoples[i].name)
  }
}
console.log(children)

将 if 语句提取到它自己的函数中

1
2
3
4
5
6
7

const isChildren = people => people.months < 10
var children = []
for (var i = 0; i < peoples.length; i++) {
  if (isChildren(peoples[i])) {
    children.push(peoples[i].name)
  }
}

下一个改变是从 people 类型的对象中提取转换（或映射）到名称。

1
2
3
4
5
6
7
8

const isChildren = people => people.months < 10
const getName = people => people.name
var children = []
for (var i = 0; i < peoples.length; i++) {
  if (isChildren(peoples[i])) {
    children.push(getName(peoples[i]))
  }
}

最后一步 使用 map 操作，最好地展示您的代码的可读性

1
2
3
4
5

const isChildren = people => people.months < 10
const getName = people => people.name
const children =
  peoples.filter(isChildren)
      .map(getName)

完成

1
2
3
4
5
6
7
8
9
10
11
12

const isChildren = people => people.months < 10
const getName = people => people.name
const getChildrenNames = peoples =>
  peoples.filter(isChildren)
      .map(getName)
const peoples = [
    { name: '小明',     months: 84 },
    { name: '小小明',   months: 24 },
    { name: '小小小明', months: 4 }
]
const children = getChildrenNames(peoples)
console.log(children)

浏览器中输入 www.baidu.com 直到看到页面之间发生了什么？

今天就说说根据这道题梳理自己的前端知识！

解析 URL

解释 URL 是浏览器的活，所以首先要搞明白浏览器的工作方式。
浏览器是多进程的，有一个主控进程，进程可能包括主控进程，插件进程，GPU，tab 页（浏览器内核）等等，主要包括：

• Browser 进程：浏览器的主进程（负责协调、主控），只有一个
• 第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
• GPU 进程：最多一个，用于 3D 绘制
• 浏览器渲染进程（内核）：默认每个 Tab 页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白 tab 会合并成一个进程）

浏览器渲染进程是多线程的，它有主要几大类子线程

• GUI 线程
• JS 引擎线程
• 事件触发线程
• 定时器线程
• 网络请求线程

输入 URL 后，从浏览器会进行解析，URL 一般包括几大部分：

• protocol，协议头，譬如有 http，https 等
• host，主机域名或 IP 地址
• port，端口号
• path，目录路径
• query，即查询参数
• fragment，即 # 后的 hash 值，一般用来定位到某个位置

每次网络请求时都需要开辟单独的线程进行,览器会根据解析出得协议，开辟一个网络线程，前往请求资源.

http 缓存

网络请求之前会先都差缓存，HTTP 缓存有多种规则，根据是否需要重新向服务器发起请求来分类，将其分为强制缓存，对比缓存。

• 强缓存（200 from cache）时，浏览器如果判断本地缓存未过期，就直接使用，无需发起 http 请求

• 对比缓存（304）时，浏览器会向服务端发起 http 请求，然后服务端告诉浏览器文件未改变，让浏览器使用本地缓存，可以使用 Ctrl + F5 强制刷新可以使得对比缓存无效

http1.0 中的缓存控制：

• Pragma：严格来说，它不属于专门的缓存控制头部，但是它设置 no-cache 时可以让本地强缓存失效（属于编译控制，来实现特定的指令，主要是因为兼容 http1.0，所以以前又被大量应用）
• Expires：服务端配置的，属于强缓存，用来控制在规定的时间之前，浏览器不会发出请求，而是直接使用本地缓存，注意，Expires 一般对应服务器端时间，如 Expires：Fri, 30 Oct 1998 14:19:41
• If-Modified-Since/Last-Modified：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-Modified-Since，而服务端的是 Last-Modified，它的作用是，在发起请求时，如果 If-Modified-Since 和 Last-Modified 匹配，那么代表服务器资源并未改变，因此服务端不会返回资源实体，而是只返回头部，通知浏览器可以使用本地缓存。Last-Modified，顾名思义，指的是文件最后的修改时间，而且只能精确到 1s 以内

http1.1 中的缓存控制：

• Cache-Control：缓存控制头部，有 no-cache、max-age 等多种取值

  • Max-Age：服务端配置的，用来控制强缓存，在规定的时间之内，浏览器无需发出请求，直接使用本地缓存，注意，Max-Age 是 Cache-Control 头部的值，不是独立的头部，譬如 Cache-Control: max-age=3600，而且它值得是绝对时间，由浏览器自己计算

• If-None-Match/E-tag：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-None-Match，而服务端的是 E-tag，同样，发出请求后，如果 If-None-Match 和 E-tag 匹配，则代表内容未变，通知浏览器使用本地缓存，和 Last-Modified 不同，E-tag 更精确，它是类似于指纹一样的东西，基于 FileEtag INode Mtime Size 生成，也就是说，只要文件变，指纹就会变，而且没有 1s 精确度的限制。

强缓存判断依据

1
2

（http1.1）Cache-Control => Cache-Control: max-age = 35600
（http1.0）Expires => 服务器端的时间

cache-control 中的 max-age 保存一个相对时间。例如 Cache-Control: max-age = 35600，表示浏览器收到文件后，缓存在 35600s 内均有效。如果同时存在 cache-control 和 Expires ，浏览器总是优先使用 cache-control。
Max-Age 相比 Expires，Expires 使用的是服务器端的时间，但是有时候会有这样一种情况-客户端时间和服务端不同步。所以一般 http1.1 后不推荐使用 Expires。

对比缓存判断依据

1
2

（http1.1）E-tag/If-None-Match
（http1.0）Last-Modified/If-Modified-Since

last-modified 是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送 if-modified-since 字段。服务器用本地 Last-modified 时间与 if-modified-since 时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送 304 状态码，让浏览器继续使用缓存。

E-tag：资源的实体标识（哈希字符串），当资源内容更新时，E-tag 会改变。服务器会判断 E-tag 是否发生变化，如果变化则返回新资源，否则返回 304。

如果同时带有 E-tag 和 Last-Modified，服务端会优先检查 E-tag

在浏览器接收到服务器响应后，会检测响应头部（Header），如果有 nEtag 字段，那么浏览器就会将本次缓存写入硬盘中。

浏览器优先强缓存，如果设置了 no-cache 会走协商缓存

开启线程发出请求

• dns 查询

dns 是通常是完成域名到 ip 的映射，大致流程：

• 如果浏览器有缓存，直接使用浏览器缓存，否则使用本机缓存，再没有的话就是用 host
• 如果本地没有，就向 dns 域名服务器查询（当然，中间可能还会经过路由，也有缓存等），查询到对应的 IP

dns 解析是很耗时的，因此如果解析域名过多，会让首屏加载变得过慢，可以考虑 dns-prefetch 优化

1
2
3
4
5

a 标签的 DNS 预解析 默认是开启的 但是当 使用 https 的时候是默认关闭的需要手动开启 a 标签的预解析
<meta http-equiv="x-dns-prefetch-control" content="on">

开启 dns 预解析
<link rel="dns-prefetch" href="IP地址">

• tcp/ip 请求

首先会建立 tcp 连接

• 建立链接（三次握手）

1
2
3

客户端发个请求“开门呐，我要进来”给服务器
服务器发个“进来吧，我去给你开门”给客户端
客户端有很客气的发个“谢谢，我要进来了”给服务器

建立连接也会断开连接只是不是这时候断开，先提前说下

• 断开连接（四次挥手）

1
2
3
4

客户端发个“时间不早了，我要走了”给服务器，等服务器起身送他
服务器听到了，发个“我知道了，那我送你出门吧”给客户端，等客户端走
服务器把门关上后，发个“我关门了”给客户端，然后等客户端走（尼玛~矫情啊）
客户端发个“我知道了，我走了”，之后自己就走了

由于 tcp/ip 对链接有并发的控制，所以有甚多针对请求的优化，比如合并请求的雪碧图。
关于这里有涉及到五层网络协议，就是从客户端发出 http 请求到服务器接收，中间会经过一系列的流程。

1
2
3
4
5

应用层（dns,http） DNS 解析成IP并发送 http 请求
传输层（tcp/ip）建立连接
网络层（ip）IP 寻址
数据链层（ppp）封装成二进制帧
物理层 物理传输

其实也有一个完整的 OSI 七层框架，与之相比，多了会话层、表示层。

浏览器向服务器发送 HTTP 请求。

• http 报文结构

报文一般包括了：通用头部，请求/响应头部，请求/响应体

• 通用头部

1
2
3
4
5

Request Url: 请求的web服务器地址
Request Method: 请求方式
（Get、POST、OPTIONS、PUT、HEAD、DELETE、CONNECT、TRACE）
Status Code: 请求的返回状态码，如200代表成功
Remote Address: 请求的远程服务器地址（会转为IP）

code 状态码

1
2
3
4
5

1xx——指示信息，表示请求已接收，继续处理
2xx——成功，表示请求已被成功接收、理解、接受
3xx——重定向，要完成请求必须进行更进一步的操作
4xx——客户端错误，请求有语法错误或请求无法实现
5xx——服务器端错误，服务器未能实现合法的请求

请求/响应头部

常用的请求头部（部分）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Accept: 接收类型，表示浏览器支持的MIME类型（对标服务端返回的 Content-Type ）
Accept-Encoding：浏览器支持的压缩类型,如 gzip 等,超出类型不能接收
Content-Type：客户端发送出去实体内容的类型
Cache-Control: 指定请求和响应遵循的缓存机制，如 no-cache
If-Modified-Since：对应服务端的 Last-Modified ，用来匹配看文件是否变动，只能精确到 1s 之内，http1.0中
Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，而且是服务端时间
Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1中
If-None-Match：对应服务端的 E-tag，用来匹配文件内容是否改变（非常精确），http1.1 中
Cookie: 有 cookie 并且同域访问时会自动带上
Connection: 当浏览器与服务器通信时对于长连接如何进行处理,如 keep-alive
Host：请求的服务器 URL
Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin 比 Referer 更尊重隐私
Referer：该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段)
User-Agent：用户客户端的一些必要信息，如 UA 头部等

常用的响应头部（部分）：

1
2
3
4
5
6
7
8
9
10
11
12
13

Access-Control-Allow-Headers: 服务器端允许的请求 Headers
Access-Control-Allow-Methods: 服务器端允许的请求方法
Access-Control-Allow-Origin: 服务器端允许的请求 Origin 头部（譬如为*）
Content-Type：服务端返回的实体内容的类型
Date：数据从服务器发送的时间
Cache-Control：告诉浏览器或其他客户，什么环境可以安全的缓存文档
Last-Modified：请求资源的最后修改时间
Expires：应该在什么时候认为文档已经过期,从而不再缓存它
Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control 后有效
E-tag：请求变量的实体标签的当前值
Set-Cookie：设置和页面关联的 cookie，服务器通过这个头部把 cookie 传给客户端
Keep-Alive：如果客户端有 keep-alive，服务端也会有响应（如 timeout=38 ）
Server：服务器的一些相关信息

一般来说，请求头部和响应头部是匹配分析的。

譬如，请求头部的 Accept 要和响应头部的 Content-Type 匹配，否则会报错

譬如，跨域请求时，请求头部的 Origin 要匹配响应头部的 Access-Control-Allow-Origin，否则会报跨域错误

譬如，在使用缓存时，请求头部的 If-Modified-Since、If-None-Match 分别和响应头部的 Last-Modified、E-tag 对应

服务器接收到请求

• 负载均衡

对于大型的项目，由于并发访问量很大，所以往往一台服务器是吃不消的，所以一般会有若干台服务器组成一个集群，然后配合反向代理实现负载均衡。用户发起的请求都指向调度服务器（反向代理服务器，譬如安装了 nginx 控制负载均衡），然后调度服务器根据实际的调度算法，分配不同的请求给对应集群中的服务器执行，然后调度器等待实际服务器的 HTTP 响应，并将它反馈给用户

• 后台的处理

• cookie
  cookie 是浏览器的一种本地存储方式，一般用来帮助客户端和服务端通信的，常用来进行身份校验，结合服务端的 session 使用.
  由于在同域名的资源请求时，浏览器会默认带上本地的 cookie，针对这种情况，在某些场景下是需要优化,例如：

• 将静态资源分组，分别放到不同的子域名下

• 而子域名请求时，是不会带上父级域名的 cookie 的，所以就避免了浪费

说到了多域名拆分，这里再提一个问题，那就是：

在移动端，如果请求的域名数过多，会降低请求速度（因为域名整套解析流程是很耗费时间的，而且移动端一般带宽都比不上 pc）此时就需要用到一种优化方案：dns-prefetch（让浏览器空闲时提前解析 dns 域名，不过也请合理使用，勿滥用）

说到 cookie 就要把 localStorage，sessionStorage 区分下：

1
2
3
4
5
6
7
8
9

cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下。

存储大小限制也不同，cookie 数据不能超过 4k，同时因为每次 http 请求都会携带cookie，所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的。

• gzip 压缩

gzip 是 GNU zip 的缩写，它是一个 GNU 自由软件的文件压缩程序。一般服务器都会开启 gzip 这样可以减少带宽消耗。但是 HTTP 压缩需要成本。Web 服务器获得需要的内容，然后压缩它，最后将它发送到客户端。如果内容不能被进一步压缩，你只是在浪费 CPU 做无意义的任务，采用 HTTP 压缩已经被过压缩的东西并不能使它更小。事实上，添加标头，压缩字典，并校验响应体实际上使它变得更大。

• 长连接与短连接

首先看 tcp/ip 层面的定义：

• 长连接：一个 tcp/ip 连接上可以连续发送多个数据包，在 tcp 连接保持期间，如果没有数据包发送，需要双方发检测包以维持此连接，一般需要自己做在线维持（类似于心跳包）
• 短连接：通信双方有数据交互时，就建立一个 tcp 连接，数据发送完成后，则断开此 tcp 连接

然后在 http 层面：

• http1.0 中，默认使用的是短连接，也就是说，浏览器每进行一次 http 操作，就建立一次连接，任务结束就中断连接，譬如每一个静态资源请求时都是一个单独的连接
• http1.1 起，默认使用长连接，使用长连接会有这一行 Connection: keep-alive，在长连接的情况下，当一个网页打开完成后，客户端和服务端之间用于传输 http 的 tcp 连接不会关闭，如果客户端再次访问这个服务器的页面，会继续使用这一条已经建立的连接

注意： keep-alive 不会永远保持，它有一个持续时间，一般在服务器中配置（如 apache），另外长连接需要客户端和服务器都支持时才有效

• https

简单来看，https 与 http 的区别就是： 在请求前，会建立 ssl 链接，确保接下来的通信都是加密的，无法被轻易截取分析。如果要将网站升级成 https，需要后端支持（后端需要申请证书等），然后 https 的开销也比 http 要大（因为需要额外建立安全链接以及加密等），所以一般来说 http2.0 配合 https 的体验更佳（因为 http2.0 更快了）SSL/TLS 的握手流程握手流程：

1
2
3
4
5
6
7
8
9
10
11
12
13

1. 浏览器建立 SSL 连接，像服务端 发送一个随机数和加密方法
2. 服务端选取加密方法回复一个随机数并将自己的证书发送过去
3. 浏览器收到证书后
    - 验证证书合法性
    - 用户街道证书后生成新的随机数，然后证书中的公钥以及指定的加密方法加密发送
    - 通过一定的算法生成 HTTP 链接数据传输的对称加密 key
    - 使用约定好的算法计算握手消息，并使用生成的 key 对消息进行加密，最后将之前生成的所有信息发送给服务端。
4. 服务端收到浏览器的回复
    - 利用已知的加解密方式与自己的私钥进行解密
    - 和浏览器相同规则生成 key
    - 使用 key 解密浏览器发来的握手消息，并验证Hash是否与浏览器发来的一致
    - 使用 key 加密一段握手消息，发送给浏览器
5. 浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束

• http 2.0

http2.0 它相当于是 http 的下一代规范，与 http1.1 的显著不同点：

• http1.1 中，每请求一个资源，都是需要开启一个 tcp/ip 连接的，所以对应的结果是，每一个资源对应一个 tcp/ip 请求，由于 tcp/ip 本身有并发数限制，所以当资源一多，速度就显著慢下来
• ttp2.0 中，一个 tcp/ip 请求可以请求多个资源，也就是说，只要一次 tcp/ip 请求，就可以请求若干个资源，分割成更小的帧请求，速度明显提升。

http2.0 的一些特性：

• 多路复用（即一个 tcp/ip 连接可以请求多个资源）
• 首部压缩（http 头部压缩，减少体积）
• 二进制分帧（在应用层跟传送层之间增加了一个二进制分帧层，改进传输性能，实现低延迟和高吞吐量）
• 服务器端推送（服务端可以对客户端的一个请求发出多个响应，可以主动通知客户端）
• 请求优先级（如果流被赋予了优先级，它就会基于这个优先级来处理，由服务器决定需要多少资源来处理该请求。）

注意：HTTP2.0 的多路复用和 HTTP1.1 中的长连接复用的区别就是：

HTTP/1.1 Pipeling 解决方式为，若干个请求排队串行化单线程处理，后面的请求等待前面请求的返回才能获得执行机会，一旦有某请求超时等，后续请求只能被阻塞，毫无办法，也就是人们常说的线头阻塞。

HTTP/2 多个请求可同时在一个连接上并行执行。某个请求任务耗时严重，不会影响到其它连接的正常执行；

• 浏览器接收响应

• 构建渲染树

浏览器进行解析渲染呈现给用户。整个过程涉及两个方面：解析和渲染。在渲染页面之前，需要构建 DOM 树和 CSSOM 树。

• HTML 解析，构建 DOM

解析 HTML 到构建出 DOM 当然过程可以简述如下：

Bytes → characters → tokens → nodes → DOM

• 生成 CSS 规则

CSS 规则树的生成也是类似。简述为：

Bytes → characters → tokens → nodes → CSSOM

• 渲染

布局是由 CPU 处理的，而绘制则是由 GPU 完成的,GPU 会对我们的渲染层作缓存，如果我们把那些一直发生大量重排重绘的元素提取出来，单独触发一个渲染层，那样这个元素不就不会“连累”其他元素一块重绘。
Video 元素、WebGL、Canvas、CSS3 3D、CSS 滤镜、z-index 大于某个相邻节点的元素都会触发新的 Layer，如果图层中某个元素需要重绘，那么整个图层都需要重绘。比如一个图层包含很多节点，其中有个 gif 图，gif 图的每一帧，都会重回整个图层的其他节点，然后生成最终的图层位图。所以这需要通过特殊的方式来强制 gif 图属于自己一个图层，就是给某个元素加上下面的样式：

1
2

transform: translateZ(0);
backface-visibility: hidden;

也会触发渲染层，把容易触发重排重绘的元素单独触发渲染层，让它与那些“静态”元素隔离，让 GPU 分担更多的渲染工作，我们通常把这样的措施成为硬件加速，或者是 GPU 加速。

1
2
3
4
5
6
7

Style：该区域为样式计算阶段，浏览器会根据选择器（就是CSS选择器，如.td）计算出哪些节点应用哪些CSS规则，然后计算出每个节点的最终样式并应用到节点上。

Layout：该区域为布局计算阶段，浏览器会在该过程中根据节点的样式规则来计算它要占据的空间大小以及在屏幕中的位置。

Paint：该区域为绘制阶段，浏览器会先创建绘图调用的列表，然后填充像素。绘制阶段会涉及到文本、颜色、图像、边框和阴影，基本上包括了每个可视部分。绘制一般是在多个图层（用过Photoshop等图片编辑软件的童鞋一定很眼熟图层这个词，这里的图层的含义其实是差不多的）上完成的。

Composite：该区域为合成阶段，浏览器将多个图层按照正确顺序绘制到屏幕上。

如果动态修改了 DOM 或 CSS，就会重新布局（Layout）或渲染（Repaint）这里 Layou t 和 Repaint 的概念是有区别的：

• Layout，也称为 Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树

• Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了

什么会引起回流？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.页面渲染初始化

2.DOM结构改变，比如删除了某个节点

3.render树变化，比如减少了padding

4.窗口resize

5.改变字体大小会引发回流

6.最复杂的一种：获取某些属性，引发回流
很多浏览器会对回流做优化，会等到数量足够时做一次批处理回流，但是除了render树的直接变化，当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效，包括
    (1) offset(Top/Left/Width/Height)
    (2) scroll(Top/Left/Width/Height)
    (3) cilent(Top/Left/Width/Height)
    (4) width,height
    (5) 调用了getComputedStyle()或者IE的currentStyle

回流一定伴随着重绘，重绘却可以单独出现

所以一般会有一些优化方案，如：

• 减少逐项更改样式，最好一次性更改 style，或者将样式定义为 class 并一次性更新
• 避免循环操作 dom，创建一个 documentFragment 或 div，在它上面应用所有 DOM 操作，最后再把它添加到 window.document
• 避免多次读取 offset 等属性。无法避免则将它们缓存到变量
• 将复杂的元素绝对定位或固定定位，使得它脱离文档流，否则回流代价会很高

最后如果想要知道每个 CSS 属性将会对哪个阶段产生怎样的影响，请去 CSS Triggers，该网站详细地说明了每个 CSS 属性会影响到哪个阶段。

• 关闭 TCP 连接或继续保持连接

通过四次挥手关闭连接

webGis 经常会遇到地图上标记文字问题，但是文字空间不够时，就会造成文字重叠显示混乱的现象，导致效果很不好，下面就说说解决方案。

文字避让

文字标注算法是 GIS 中最复杂（NP）的问题之一，本篇将介绍四分位模型算法。
关于文字在地图上的坐标是经纬度坐标根据墨卡托转换而来。

1
2
3
4
5
6
7
8
9
10
11

[
  {
    "name": "南京市",//要显示的文字
    "lon": 118.15,
    "lat": 32.89,
    "pixel": { //像素坐标
      "x": 968,
      "y": 736
    }
  }
]

• 求出每段文字矩形的实际大小

1
2

let ctx = this.container.getContext('2d'); // canvas 上下文
let width= ctx.measureText(name).width;

通过 measureText 得到每个文字的宽度，canvas 并没有直接获取文字的方法，那文字的高度如何的得到呢？

我们通过反复测试发现 canvas 的 font 等于 “13px Arial” 字体的时候，文字的高度大概是 fontSize 的 1.1 倍。

1
2

let fontSize = parseInt(ctx.font);
let height = fontSize * 1.1;

文字的宽度和高度得到后，我们就可以创建文字矩形的坐标系了。

所谓四分位模型，每一个标记点都有上下左右四个放文字的位子，如果左边放不下，那就放右边试试，还不行就放到下面试试，以此类推

创建右侧虚拟矩形坐标描述：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

_getLeftAnchor() {
    let x = this.center.x - this.radius - this.textReact.width,
        y = this.center.y - this.textReact.height / 2,
        diam = this.radius * 2,
        maxH = diam > this.textReact.height ? diam : this.textReact.height; //矩形的高度
    return {
        x,
        y,
        minX: x,
        maxX: this.center.x + this.radius,
        minY: this.center.y - maxH / 2,
        maxY: this.center.y + maxH / 2
    };
}

以此类推，描述下面、左面、上面的虚拟矩形坐标。

• 判断碰撞

判断两个矩形是否覆盖相交，根据矩形的 minX,maxX,minY,maxY 判断相交，原理比较简单，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/**
 * 判断分位是否相交
 * @param {*} target 
 */
 
isAnchorMeet(target) {
    let react = this.getCurrentRect(),
        targetReact = target.getCurrentRect();
    if ((react.minX < targetReact.maxX) && (targetReact.minX < react.maxX) &&
        (react.minY < targetReact.maxY) && (targetReact.minY < react.maxY)) {
        return true;
    }
    return false;
}

• 创建虚拟文字集合对象

1
2
3
4

let labels = pixels.map((val) => {
    let radius = val.pixel.radius + this.style.normal.borderWidth; //圆点半径
    return new Label(val.pixel.x, val.pixel.y, radius, fontSize, byteWidth, val.name);
});

递归遍历虚拟文字集合、判断是否与其他相交，如果有相交就移动当前文字位子，直到不相交为止。当找不到合适位置时，就选择隐藏当前文字。

1
2
3
4
5
6
7
8
9
10
11
12
13

do {
    var meet = false; //本轮是否有相交
    for (let i = 0; i < labels.length; i++) {
        let temp = labels[i];
        for (let j = 0; j < labels.length; j++) {
            if (i != j && temp.show && temp.isAnchorMeet(labels[j])) {
                temp.next();
                meet = true;
                break;
            }
        }
    }
} while (meet);

• 绘画文字

1
2
3
4
5
6
7
8

labels.forEach(function (item) {
    if (item.show) { //是否显示
        let pixel = item.getCurrentRect();
        ctx.beginPath();
        ctx.fillText(item.text, pixel.x, pixel.y);
        ctx.fill();
    }
});

git 是目前最流行的源代码管理工具，Git 的确可以在各个方面做很多事情，然而任然存在采用何种分支管理的问题，Git 分支管理并没有普遍适用的最佳做法，只有对每个团队和项目而言最适合的工作流。
git 的操作还是有一定复杂度的，错误的操作影响也比较大，异步小心就会导致部分代码丢失，还很难查到具体出问题的时间点和功能点。

我们采用的是 git-flow 流程,包含 4 类分支，分别是 master、develop、新功能分支（feature）和 hotfix。

新建仓库

在 github 中创建一个新的仓库，只有一个 master 分支

新建分支

每次开发新功能，都应该从当前主开发分支新建一个功能分支。

1

git checkout -b feature-wz-qx

提交分支

模块开发差不多，提交代码

1
2
3

git status
git add -F
git commit -m 'add xxxxx'

关于 commit 完整的 log 由 类别(必须) 简短描述(必须) 详细描述(可选) 三部分组成：

• 类别
  • add 增加
  • fix 修复 bug
  • change 修改
  • del 移除
  • refactor 代码重构
  • docs 文档

eg:

1

git commit -m 'add xxxxx'

如果增加详细描述，具体内容前空一行，兼容 Markdown。
还可以可以配合 gitmoji 强化信息可读性。

合并提交记录

为了避免太多的 commit 而造成版本控制的混乱，通常我们推荐将这些 commit 合并成一个。假如我们提交了四次记录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

commit 14c69cf825c17bd3e48154994e6f722db251fcfb
Author: lennonover <lennonover@163.com>
Date:   Tue Jan 23 16:38:57 2018 +0800

    add forth 

commit 969161b68ab3b479fc52a26c4f053395ce4f3c63
Author: lennonover <lennonover@163.com>
Date:   Tue Jan 23 16:01:12 2018 +0800

    add third 

commit 44adff48febeb65e5f89e2dc18ecc3ba7c9c31ba
Author: lennonover <lennonover@gmail.com>
Date:   Tue Jan 23 15:56:27 2018 +0800

    add second 

commit a897c7ac82eb2de3e8268454d19f2ec91a5be9bd
Author: lennonover <lennonover@gmail.com>
Date:   Tue Jan 23 15:56:04 2018 +0800

    add first

如何把四次合并到一起，并且只保留 最后一次 的 Git message 呢？推荐 git rebase 进行合并操作。

合并最后四个

1

git rebase -i HEAD~4

git 会打开一个互动界面，方便用户对历史提交进行修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

pick 969161b add first
pick 14c69cf add second 
pick b246936 add third
pick 5b192dc add forth 

# Rebase 44adff4..5b192dc onto 44adff4 (4 command(s))
#
# Commands:
# p, pick = 使用该提交
# r, reword = 使用该提交，但需要编辑提交信息
# e, edit = 使用该提交，但此处暂停并提供修改机会
# s, squash = 使用该提交，但合并到上一个提交记录中
# f, fixup = 类似 squash，但丢弃当前提交记录的提交信息
# x, exec = 执行 shell 命令
# d, drop = 移除当前提交

我们需要把前面的 pick 改为 squash 这样：

1
2
3
4

pick 969161b add first
squash 14c69cf add second 
squash b246936 add third
squash 5b192dc add forth

完成后，使用 :wq 保存并退出。这个时候则需要在下一步中对这 4 条 commit 信息进行修改和保存(如果 fixup 的话，则直接丢弃其它记录，省去下一步操作)：

1
2
3
4
5
6
7
8
9

# This is a combinatin of 4 commits.
# This is the 1st commit message:
add first 
# This is the commit message #2:
add second 
# This is the commit message #3:
add third
# This is the commit message #4:
add forth

使用 :wq 后，通过 git log 可以看到仅剩一条 commit 记录：

1
2
3
4
5

commit c2391a59bf51240a60ab4c8455b251cff1ec3cdd
Author: lennonover <lennonover@163.com>
Date:   Wed Jan 24 15:01:12 2018 +0800

    add stylelint-0.0.3

rebase 的风险：

当待合并 commit 记录中杂糅着他人的 commit 记录，此时就不可以再对这部分 commit 记录做合并操作。

但只要新开分支且保持分支独立开发，杂糅的情况就不存在。

推送到仓库

1

git push origin feature-wz-qx

提交 Merge Request 申请

请求相关同学从你的 feature-wz-qx 合并分支

• 提交 Merge Request：

通过「＋Create Merge Request」按钮创建一个 Merge Request；

• 指定「Assignee」：

指定需要 review 你代码的同学，禁止指定自己；

• 更改「Target branch」：

改变为需要合并进去的目标分支；

• 设置合并后删除被合并分支的选项：

勾选「Remove source branch when merge request is accepted.」选项，在合并完成后删除源分支，控制分支总数量；

• 提交合并请求

完成上述设置后，相关同学将会收到邮件通知，此时可进入 GitLab 进行 code review。如果发现问题则对问题代码进行点评并拒绝关闭申请，反之则通过合并申请。

修复 Bug

发现 bug 了,从 develop 分支上新建分支

1

git checkout -b hotfix/xxx develop

改完推送到仓库后提交 Merge Request 申请

减少冲突

从我们的工作流程上来说，代码合并导致的问题，一般都发生在特性、修复分支合并到 master 或者 develop 的时候，因为这个时候开始，才是真正与其他分支汇合，不同的改动会发生冲突。而且合并没法完全避免，我们只能去思考如何减少合并冲突。

• 合理的分工，人员职责划分尽量清晰，减少互相之间的交叉，减少多个人同时改动同一份代码的几率
• 合适的合并工具
• 合并后的代码检查
• 公共代码改动，要通知各使用方变化点
• code review

读书少了最近才看到这篇文章 Why we should stop using Grunt & Gulp。文章中笔者建议大家使用 npm 作为替代方案，绝对要打 call。npm 的 scripts 配置可以更简单的实现这些构建工具的所有功能。确实，npm script 相比 grunt、gulp 之类的构建工具简单很多，它消除了这些构建工具所带来的抽象层，并带给我们更大的自由度。而且随着社区的发展，各种基础工具你都可以信手拈来，只要你会使用 npmjs.com 去搜索，或者去 libraries.io 上搜索（当然我们公司的工作流还是在农耕火种时代。

npm script

npm 为我们提供了快速创建 package.json 文件的命令 npm init，执行该命令会问几个基本问题，如包名称、版本号、作者信息、入口文件、仓库地址、许可协议等，多数问题已经提供了默认值。

npm 允许在 package.json 文件里面，使用 scripts 字段定义脚本命令，而执行它的是 npm 核心命令之一的 npm run-script 命令（简称 npm run ），npm run 就会自动新建一个 Shell 并且可以从 package.json 中解析出 scripts 对象，然后将该对象的键作为 npm run 的第一个参数，它会在操作系统的默认终端中执行该键对应的命令。例如下面的 package.json：

1
2
3
4
5
6
7
8
9
10

{
  'name': 'hello-npm-script',
  'version': '0.1.0',
  'main': 'index.js',
  'scripts': {
    'lint:js': 'eslint *.js',
    'lint:css': 'stylelint *.less',
    'test': 'npm run lint:js && npm run lint:css'
  }
}

如果运行 npm run lint:js ，npm 将在终端中执行 eslint *.js。执行 npm run xxx 时会将 node_modules/.bin 加入终端的 PATH 环境变量中，这样你就可以直接运行那些作为依赖安装的二进制模块，也就是说你不需要 ./node_modules/.bin/eslint **.js 或 $(npm bin)/eslint **.js 这样来指定命令的路径。

如果运行 npm run test 则表示子命令的执行顺序是先 lint:js 后 lint:css 来，实现了多个 npm script 串行执行。

由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符 也就是 *。

钩子

npm 可以在 scripts 中为任何可执行的命令指定 pre- 和 post- 钩子。例如，当运行 npm run lint:js 时，即便是没有在 scripts 中定义对应的 pre- 命令，npm 也会首先执行 npm run prelint:js，接着才是 npm run lint:js，最后是 npm run postlint:js。

传递参数

-- 是 npm 用来传递参数的，例如 npm run lint:js -- a.js 将运行 eslint *.js a.js`

命令行自动补全

• 不带任何参数运行 npm run 能列出 scripts 对象中定义的所有命令，，再结合管道操作符、less 命令（ less 是 linux 里面的工具）

• npm 自身也提供了自动完成工具 completion

跨平台运行

• 使用 跨平台的命令

• 使用 node packages 。可以使用 node packages 来取代 shell 命令。

痛点

因为 JSON 规范不支持添加注释，所以不能在 package.json 里添加注释。

常用脚本

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

// 删除目录
"clean": "rimraf dist/*",

// 本地搭建一个 HTTP 服务
"serve": "http-server -p 9090 dist/",

// 打开浏览器
"open:dev": "opener http://localhost:9090",

// 实时刷新
 "livereload": "live-reload --port 9091 dist/",

// 构建 HTML 文件
"build:html": "jade index.jade > dist/index.html",

// 只要 CSS 文件有变动，就重新执行构建
"watch:css": "watch 'npm run build:css' assets/styles/",

// 只要 HTML 文件有变动，就重新执行构建
"watch:html": "watch 'npm run build:html' assets/html",

// 部署到 Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",

// 构建 favicon
"build:favicon": "node scripts/favicon.js",

参考链接

• npm scripts 使用指南

最近买个树莓派准备做下载机和低配版的 NAS ，昨天晚上装了 Ubuntu Mate的系统挺简单的特意分享下

树莓派

树莓派（英语：Raspberry Pi），是一款基于Linux的单板机电脑。它由英国的树莓派基金会所开发，目的是以低价硬件及自由软件促进学校的基本计算机科学教育。

我买的是最新的3代 B ，增加了无线和蓝牙模块方便了很多。
树莓派检查,树莓派在没有插入TF卡的时候通电，如果红灯亮了并且可以持续亮着而不是闪烁，就证明硬件是没问题的。

电源没有购买用的是手机的 5v/2A 的电源，有四个 USB 接口和一个 HDMI 接口

安装系统

一开始的时候树莓派是没有系统的，需要自己准备内存卡。官方推荐是使用其官方工具NOOBS安装工具，很小白，

• 解压NOOBS.zip文件
• 将解压的文件复制到SD卡上面(SD 格式话推荐用 sdcard)
• 将 SD 卡插入到树莓派里面开机按照指示做就可以了

我今天要说的是写入系统进去。那么怎么写入呢？在windows下写入，用Win32DiskImager写入镜像。

• 在官网下载最新版的Ubuntu Mate，官网
• 下载 Win32DiskImager
• 下载 sdformatter 格式化 SD 卡
• 用 Win32DiskImager 写入之前下载的 ubuntu-mate-16.10-desktop-armhf-raspberry-pi-3.img 镜像
• 将TF卡插入树莓派，启动按照界面提示选择安装语言、用户名、计算机名、选择时区。系统将自行安装后重启。进度条有可能会卡在安装界面等个几分钟重启就好了

最后

树莓派也可以装个 web 服务器，要想外网访问可以做个内网穿透，推荐个好用的 ZeroTier 一款非常简单易用的内网穿透工具，不需要配置，就能实现虚拟局域网的组建,支持 Windows、macOS、Linux 三大主流平台，iOS、Android 两大移动平台，以及 QNAP（威连通）、Synology（群晖）、Western Digital MyCloud NAS（西部数据）三个 NAS 平台

ARIA 是 Accessible Rich Internet Applications 的缩写。它是 W3C 的 Web 无障碍推进组织 Web Accessibility Initiative / WAI 在2014年3月20日发布的可访问富互联网应用实现指南。2017年11月2日，发布了 WAI-ARIA 1.1 的提案推荐标准,在1.0版本的基础上，添加了一些新机制，使 HTML + ARIA 无障碍模型更加完整，并支持图形及数字出版的无障碍需求。

• 几种场景
  • 一个由 js 生成的页面
  • 一个不支持鼠标的页面
  • 一个不支持键盘的页面
  • 一部没有字幕的电影
• 两组数据
  • 全球目前有超过10亿残疾人 占全球人口约15%
  • 全球网民数量突破30亿约占总人口42%

以上这种场景的对于一个视觉或者听觉有障碍的人来说还能正常访问吗？这就是要 WAI-ARIA 的目的。WAI-ARIA 适用于跨越某些领域的障碍，这些领域存在的无障碍问题无法通过原生 HTML 进行管理。它通过允许您指定某些属性来发挥作用，这些属性可以修改元素转换成无障碍树的方式。

ARIA 是怎么做的

ARIA属性可以被 NVDA 等读屏软件调用系统API识别， 转化成语音。

例如我们使用列表项作为一种自定义复选框

1
2
3

<li class="checkbox" checked>
  javcscript
</li>

正常的人是能正确识别的，但是屏幕阅读器却不会给予任何指示来说明该元素旨在作为复选框使用，因此弱视用户可能会完全错过该元素。
如果使用 ARIA 属性，我们就可以为元素提供缺少的信息，以便屏幕阅读器能正确解读它。 我们在以上代码中添加了 role 和 aria-checked 属性，将该元素显式标识为一个复选框，并指定它在默认情况下处于选中状态。该列表项现在将添加到无障碍树中，屏幕阅读器将把它正确地报告为一个复选框。

1
2
3

<li class="checkbox" role="checkbox" checked aria-checked="true">
  javcscript
</li>

ARIA 通过更改和补充标准 DOM 无障碍树来发挥作用。并且尽可能正确地使用 html 标签，原生标签对 ARIA 支持得更好。在实再自定义控件的时候，添加 ARIA 相关属性可以例控件能正确被读屏软件识别。 html5 语义化标签与 ARIA 有重叠的地方，用新的语义化标签但还是推荐添加 ARIA 属性。
例如上面的自定义复选框,标准 HTML 元素都不需要额外的 role=”checkbox” ARIA 属性就能正确声明。

ARIA on HTML

ARIA on HTML 中使用有其自己的规范，在 这个 网站可以检测 ARIA 使用的是否标准。

ARIA 属性包括三个方面：角色属性值(roles), 状态属性值(states), 和属性表(properties) 参考网站： W3C

浏览器支持情况参见 caniuse

• HTML5 元素有的不应该重新定义一个添加ARIA

  如果你使用的元素(HTML5)具有语义化，应该使用这些元素，而不应该重新定义一个添加ARIA的角色、状态或属性的元素。

  下面以 role=heading 一个上button元素。这是不允许的，因为该 button 元素具有默认特征与标题角色冲突。

  1	<button role="heading">search</button>

  哪些情况下可以使用？

  • 在HTML(HTML5)元素特性不管支持或不支持，只要不具语义化，就可以使用ARIA
  • 排除视觉设计约束使用一个特定的元素，但不能是样式上所需的元素
  • 目前尚不支持的HTML特性

• 规所有的ARIA制作控件都必须具有键盘 (keyboard) 事件。

• ARIA role的必需属性不可省略

  正确

  1	<span role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0"></span>

  错误

  1	<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>

• 具有ARIA role的元素必须在正确的范围内

  正确

  1 2 3 4 5

  <div role="list"> <span role="listitem">Rainbow Trout</span> <span role="listitem">Brook Trout</span> <span role="listitem">Lake Trout</span> </div>

  错误

  1 2 3 4 5

  <div> <span role="listitem">Rainbow Trout</span> <span role="listitem">Brook Trout</span> <span role="listitem">Lake Trout</span> </div>

ARIA 在 HTML 中由组成

ARIA 在 HTML 中由两部分组成，一个 role ，表示元素的作用；一个是 aria- 表示元素的属性或状态。

• role

• aria 属性或状态

  • aria-label

    • 视觉上能理解，读屏软件不能理解的可以用 aria-label，和 img alt 属性效果相同。
    • placeholder 不能被读屏软件识别，如果不带 label 的 form 表单，需要用 aria-label标注。个人测试 iOS10 上 VoiceOver 是可以读 placeholder ，如果两个属性同时存在会先读 aria-label 后读 placeholder ，chrome 插件的 Accessibility Developer Tools 不识别 placeholder。

  • aria-hidden

    隐藏元素的一些对比

- aria-pressed

    表示按下的状态，可选值有：true, false, mixed, undfined.默认为undfined, 表示按下状态未知；true表示元素往下（按钮按下）；false表示元素抬起；mixed表示元素同时有按下和没有按下的状态

    
1
<div role="button" tabindex="0" aria-pressed="false" aria-disabled="false"></div>


- aria-selected

    表示选择状态,可选值有：true, false, undefined。 默认为undefined，表示元素选择状态未知;true表示元素已选择;false表示未被选中。

    
1
2
3
4
<ul class="tablist" role="tablist">
	<li role="tab" aria-selected="true" tabindex="0">中国</li>
	<li role="tab" aria-selected="false" tabindex="-1">美国</li>
</ul>

首先感谢在这一年给过我帮助的所有@同事，@亲人和@朋友。从毕业到今年算是第一个完整的工作了一个年，也是时候给自己做一个2017年的总结了。

技术

• openlayer

  公司三月份开始有要做一套企业级的 webGIS 中间件，解决老版本 GIS 各种痛点问题。我们组就分配了我一个人来做这个中间件的 JS 端开发，当时全公司只有一个人有过 webGIS3 开发经验，还离职了，所以上半年我的精力主要放在了研究 openlayer 上，仔细研究过 openlayer 的源码以及 openlayer 使用到的依赖，对 openlayer 的实现及原理进行了深入的理解，产出了 openlayer4.0 实用教程 和 中间件的 API。这个中间件也是我第一个主开发的项目，开发后成功支援公司多个产品线。

• ES6

  中间件结束后进入业务组开发，时间还算空余，我系统的学习了一下 ES6 的常用模块，看了阮一峰的《ECMAScript6入门》。

• React

  之前断断续续的学习了 React 现在已经到 16 ，10月份从北京出差刚回来，公司有个用 React 技术栈开发的同事要离职，确实也是向我们这种传统的互联网公司对这些技术是有些保守，当然也和团队有一定的原因，我们组没有一个有 React 开发经验的，我也是，只是跑过 TODO 的 DEMO。出现了项目无人接手的情况，我申请了接手这个项目，好在过程还算顺利 React+Redux+Route 全家桶加上业务逻辑简单，算是对 React 有个初步的开发经验。

• 基础建设

  主导配置了 eslint、stylelint 代码检查工具，推进团队的代码风格统一，帮助我们发现代码潜在错误，编写适应公司业务的 cssrest uancss。并做可视化大片展示调研和预研工作。

• 其他

  帮公司一个产品线合并各项目组的图标，做了两套支持多组编码的图标库；学了网易云课堂微专业交互设计，其他的零碎知识，比如 Fetch 、Node 、Promise 、Docker 等等。

社区

• JSConf 2017

  团队组织了参加7月在上海的 JSConf 2017。

• D2

  刚刚结束的第十二届前端技术论坛，这届 D2 感觉很棒，缺点就是确实几乎没有设计类的主题了，没记错的 D2 是 Developer and Designer 的意思，但这几年大家都一窝蜂的网大前端的方向，前端的本源是个值得思考的问题。

话说参加大会也就是扩展技术广度和深度、锻炼沟通能力的机会，最后也是来找差距的。

生活

• culture shock

  今年一年看了不少好剧 南国的《红白玫瑰》 、 赖川声的《一仆二主》 、陕西人《白鹿原》、铁三角的《断金》、音乐剧《保镖》等等十几场剧，每次工作累的时候比较喜欢一个人进剧场享受文化冲击，在北京出差那个一个多月也是国家大剧院戏充实了浮躁的出差的时间，还见到了林怀民老先生。
  展览最大惊喜是在北京出差有幸遇到 中国美术馆 的世纪豪展，徐悲鸿、齐白石、刘海粟三卫大师的真迹和故宫的 千里江山图 。其他最多就是在 NUA 《潘玉良》、《井上有一》、《复调》等等。

• 书

  今年算是读书最少了的一年了，好几本都没看完,
  《ECMAScript6 入门》
  《Javascript 设计模式》
  《野草》

• 其他

  用项目奖给老姐换了个 8P，自己也换了个 MIUI 玩。帮朋友拍过几场婚礼和接了福特的一个广告的后期，和老同学聚了几次，出去了几趟。艺术近年也向新的媒介发出了探索，随着3D、VR、AR 技术的发展新媒体艺术的参与者越来越多，这对于艺术的普及、连接普通⼈和艺术也有着巨⼤的潜⼒，我不懂艺术，这是都是生活的一种状态，就是希望可以在前端领域把这个载体做的更好。

2018 TODO

• React

• 前端在交互、视觉上更多的探索

• 技术水平的提升：宽度和深度

• 技术类的书籍很多都开了头但没能读完 18年能坚持读完