浏览器 API

Web Worker

现代浏览器为JavaScript创造的多线程环境。可以新建并将部分任务分配到worker线程并行运行，两个线程可独立运行，互不干扰，可通过自带的消息机制相互通信。

基本用法:

// 创建 worker
const worker = new Worker('work.js')

// 向主进程推送消息
worker.postMessage('Hello World')

// 监听主进程来的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data)
}

// 创建 worker
const worker = new Worker('work.js')

// 向主进程推送消息
worker.postMessage('Hello World')

// 监听主进程来的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data)
}

限制:

同源限制
无法使用 document / window / alert / confirm
无法加载本地资源

Service Worker

service worker

Service workers 本质上充当 Web 应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理。它们旨在（除其他之外）使得能够创建有效的离线体验，拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API

目前该技术通常用来做缓存文件，提高首屏速度

javascript

// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function (registration) {
      console.log('service worker 注册成功')
    })
    .catch(function (err) {
      console.log('servcie worker 注册失败')
    })
}
// sw.js
// 监听 `install` 事件，回调中缓存所需文件
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('my-cache').then(function (cache) {
      return cache.addAll(['./index.html', './index.js'])
    }),
  )
})

// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(function (response) {
      if (response) {
        return response
      }
      console.log('fetch source')
    }),
  )
})

// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function (registration) {
      console.log('service worker 注册成功')
    })
    .catch(function (err) {
      console.log('servcie worker 注册失败')
    })
}
// sw.js
// 监听 `install` 事件，回调中缓存所需文件
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('my-cache').then(function (cache) {
      return cache.addAll(['./index.html', './index.js'])
    }),
  )
})

// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then(function (response) {
      if (response) {
        return response
      }
      console.log('fetch source')
    }),
  )
})

打开页面，可以在开发者工具中的 Application 看到 Service Worker 已经启动了

在 Cache 中也可以发现我们所需的文件已被缓存

当我们重新刷新页面可以发现我们缓存的数据是从 Service Worker 中读取的

requestAnimationFrame 用法

在 Web 应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧

1.页面可见

当页面被最小化或者被切换成后台标签页时，页面为不可见，浏览器会触发一个 visibilitychange事件,并设置document.hidden属性为 true；切换到显示状态时，页面为可见，也同样触发一个 visibilitychange 事件，设置document.hidden属性为false

2.动画帧请求回调函数列表

每个Document都有一个动画帧请求回调函数列表，该列表可以看成是由<handlerId, callback>元组组成的集合。其中handlerId是一个整数，唯一地标识了元组在列表中的位置；callback是回调函数

3.屏幕刷新频率

即图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。对于一般笔记本电脑，这个频率大概是60Hz，这个值的设定受屏幕分辨率、屏幕尺寸和显卡的影响

4.动画原理

根据上面的原理我们知道，你眼前所看到图像正在以每秒 60 次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。而动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。那怎么样才能做到这种效果呢

刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画

5.requestAnimationFrame 用法

异步，传入的函数在重绘之前调用

1. 写法：handlerId = requestAnimationFrame(callback)

传入一个callback函数，即动画函数
返回值handlerId为浏览器定义的、大于0的整数，唯一标识了该回调函数在列表中位置

2. 浏览器执行过程

首先要判断document.hidden属性是否为true,即页面处于可见状态下才会执行
浏览器清空上一轮的动画函数
这个方法返回的handlerId 值会和动画函数callback，以<handlerId , callback> 进入到动画帧请求回调函数列
浏览器会遍历动画帧请求回调函数列表，根据handlerId 的值大小，依次去执行相应的动画函数

3. 取消动画函数的方法

javascript

cancelAnimationFrame(handlerId)f

cancelAnimationFrame(handlerId)f

6.与 setTimeout 对比

理解了上面的概念以后，我们不难发现，setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但利用 seTimeout 实现的动画在某些低端机上会出现卡顿、抖动的现象。这种现象的产生有两个原因

setTimeout的执行时间并不是确定的。在 Javascript 中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些
刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout 只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。那为什么步调不一致就会引起丢帧呢

首先要明白，setTimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px，就会出现如下绘制过程：

第0ms: 屏幕未刷新，等待中，setTimeout也未执行，等待中；
第10ms: 屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；
第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；
第20ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;
第30ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;
第33.4ms: 屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中； …

从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从 1px 的位置跳到了 3px 的的位置，这就是丢帧现象，这种现象就会引起动画卡顿

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每 16.7ms 被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

var progress = 0
//回调函数
function render() {
  progress += 1 //修改图像的位置
  if (progress < 100) {
    //在动画没有结束前，递归渲染
    window.requestAnimationFrame(render)
  }
}
//第一帧渲染
window.requestAnimationFrame(render)

var progress = 0
//回调函数
function render() {
  progress += 1 //修改图像的位置
  if (progress < 100) {
    //在动画没有结束前，递归渲染
    window.requestAnimationFrame(render)
  }
}
//第一帧渲染
window.requestAnimationFrame(render)

除此之外，requestAnimationFrame 还有以下两个优势

CPU 节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费 CPU 资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销
函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来

7.优雅降级

由于requestAnimationFrame目前还存在兼容性问题，而且不同的浏览器还需要带不同的前缀。因此需要通过优雅降级的方式对requestAnimationFrame进行封装，优先使用高级特性，然后再根据不同浏览器的情况进行回退，直至只能使用setTimeout的情况。下面的代码就是有人在 github 上提供的 polyfill，详细介绍请参考 github 代码 requestAnimationFrame(opens new window)

if (!Date.now)
  Date.now = function () {
    return new Date().getTime()
  }
;(function () {
  'use strict'

  var vendors = ['webkit', 'moz']
  for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
    var vp = vendors[i]
    window.requestAnimationFrame = window[vp + 'RequestAnimationFrame']
    window.cancelAnimationFrame =
      window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame']
  }
  if (
    /iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || // iOS6 is buggy
    !window.requestAnimationFrame ||
    !window.cancelAnimationFrame
  ) {
    var lastTime = 0
    window.requestAnimationFrame = function (callback) {
      var now = Date.now()
      var nextTime = Math.max(lastTime + 16, now)
      return setTimeout(function () {
        callback((lastTime = nextTime))
      }, nextTime - now)
    }
    window.cancelAnimationFrame = clearTimeout
  }
})()

if (!Date.now)
  Date.now = function () {
    return new Date().getTime()
  }
;(function () {
  'use strict'

  var vendors = ['webkit', 'moz']
  for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
    var vp = vendors[i]
    window.requestAnimationFrame = window[vp + 'RequestAnimationFrame']
    window.cancelAnimationFrame =
      window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame']
  }
  if (
    /iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) || // iOS6 is buggy
    !window.requestAnimationFrame ||
    !window.cancelAnimationFrame
  ) {
    var lastTime = 0
    window.requestAnimationFrame = function (callback) {
      var now = Date.now()
      var nextTime = Math.max(lastTime + 16, now)
      return setTimeout(function () {
        callback((lastTime = nextTime))
      }, nextTime - now)
    }
    window.cancelAnimationFrame = clearTimeout
  }
})()

浏览器 API ​

Web Worker ​

Service Worker ​

requestAnimationFrame 用法 ​

1.页面可见 ​

2.动画帧请求回调函数列表 ​

3.屏幕刷新频率 ​

4.动画原理 ​

5.requestAnimationFrame 用法 ​

6.与 setTimeout 对比 ​

7.优雅降级 ​

​