上接《再谈风骚的跨源/域方案（昔日篇）》，本篇聊聊现代标准（HTML5之后）的跨源方案。 基础概念都在昔日篇中，初学者请务必先看完昔日篇。 配套的演示案例传送门。 本人个人能力有限，欢迎批评指正。

本文是笔者于 2008 年写的《当年那些风骚的跨域操作》的重制威力加强版。 古云温故而知新，重看当年的文章，还是感觉有颇多不足和疏漏，思考深度也还欠缺，故进行重制。 本人个人能力有限，欢迎批评指正。

本文讨论的核心基本概念是 Event Loop，即事件循环，是 JavaScript 的执行模型，这是实现异步编程的核心。在不同的平台有不同的实现，浏览器基于 HTML5 的规范各自实现，而 NodeJS 基于 libuv 核心。他们虽然都是实现了异步通知的效果，但运行规则还是有些差别。网络上关于“事件循环”的文章有很多，本文就不再多赘述，请...

开源社区里，开源项目一般会将一排花花绿绿的 badge（徽章）摆在 README 最显眼的位置，它们一般可以起到一些说明和证明的作用。比如下面的这个项目（传送门）：

握手延迟是指开始 HTTP 通信之前所花费的时间，这里的影响因素是很多的。握手延迟主要来自三方面：DNS 查询、TCP 三次握手和 TLS 四次握手。DNS 查询也叫域名解析，是域名转换到IP地址的过程，现在基本上都是使用域名进行 URI 的表示，因此 DNS 查询是必须的步骤。HTTP 是基于 TCP 的协议，因此 TCP 的三次握手也是不可...

谷歌于 2012 年提出 SPDY（取自 SPeeDY，发音同 speedy） ，其开发目标旨在解决 HTTP 的性能瓶颈，缩短 Web 页面的加载时间 ，属于增强 HTTP 协议。SPDY 一直处于草案阶段，现在已经被 HTTP/2.0 取代，Chrome 51 已经移除对 SPDY 的支持。

在基础篇（传送门）讲到 TCP/IP 协议族的工作机制，数据会经过多次转发才到达目的地，因此只需要收集在互联网上流动的数据包（帧），进行拼接和分析，就能进行窃听。并不是说只有明文才会被窥视，密文也会，但密文即使被窥视，在不知道解密方法的情况下也是不清楚内容的。

HTTP 协议的缓存是通过 6 个报文头完成的，通过两层协商使 web 资源能够不那么频繁地在服务器与客户端之间传递，从而使服务器不必多次处理相同的请求，节约了流量，提高浏览速度。以从客户端到服务器的顺序，第一层协商为 Cache-Control 与 Expires；第二层协商为 Last-Modified 与 Etag 。本章不涉及与 HTTP 相关性不大...

认证方式常见的认证方式可分为4种：BASIC 认证（基本认证）DIGEST 认证（摘要认证）SSL 客户端认证FormBase 认证（基于表单认证）BASIC 认证BASIC 认证（基本认证）是从 HTTP/1.0 就定义的认证方式。BASIC 认证虽然采用 Base64 编码方式，但这不是加密处理，因此安全性不高，而且没有注销操作的设计，因此并不常用。步骤...

力求以最简单和高效的语言说明问题，让大家快速掌握知识点。资料参考参考《图解HTTP》、维基百科和 MDN 等，可作为精华学习笔记使用。本人能力有限，如有不正确之处请批评指正。

动量即是“物体运动的量”，是物体的质量和速度的乘积，是矢量，能够反应出运动的效果，一般用 p 表示。举个例子，低速运动的重物，跟高速运动的子弹，拥有相同的威力。

现在 cross-origin resource sharing（跨域资源共享，下简称 CORS）已经十分普及，算上 IE8 的不标准兼容（XDomainRequest），各大浏览器基本都已支持，当年为了前后端分离、iframe 交互和第三方插件开发而头疼跨域是时代已经过去，但当年为了跨域无所不用其极的风骚操作却依然值得学习。 本篇文章不是从实用的角度考量...

模拟场景：已知一个中心点（centerX, centerY），旋转前物体ball（x1, y1），旋转弧度（rotation）；求旋转后物体（x2, y2）。（如下图）

【科普】重力加速度是一个物体受重力作用的情况下所具有的加速度。也叫自由落体加速度，用 g 表示。方向竖直向下。通常指地面附近物体受地球引力作用在真空中下落的加速度，记为 g。为了便于计算，其近似标准值通常取为 980 厘米/秒的二次方或 9.8 米/秒的二次方。

假定物体是个圆形，如图其圆心坐标即是物体的 x 轴和 y 轴坐标。 越界是常见的场景，一般会有两种场景的越界：一是整个物体移出区域；二是物体接触到区域边界。我们以画布边界为例进行讨论，示例中矩形边界即是：

【科普】速度是描述物体运动快慢和方向的物理量。物理学中提到物体的速度通常是指其瞬时速度。速度在国际单位制中的单位是米每秒，国际符号是 m/s，中文符号是米/秒。相对论框架中，物体的速度上限是光速。

你如果认为 canvas 只是画图工具，那接下来的操作会颠覆你的认知。 canvas 提供 api 可以获取画布上任何一个像素，并可以自由的操作他们。

先从老朋友 CSS 讲起我们熟悉的 CSS 风格颜色表示方式，大体有下面几种，canvas 大体是直接沿用这些写法的，但最后包含透明度的写法有些许不同。#RRGGBB：十六进制格式，红绿蓝分别用两位十六进制数表示。#RGB：简写的十六进制格式，转换成 6 位格式时会重复三原色，例如#fb0->#ffbb00。rgb(R,G,B)：函数表达式，三原...

canvas 的 API 有很多，如果一一列举 30 分钟你是绝对看不完的，而且怎么流水账还不如自己去看文档呢（笑），本教程的思路是用实例一步一步从无到有讲解基础用法。canvas相关文档

本系列虽说是基础教程，但这是相对动画/游戏领域来说，在前端领域算是中级教程了，不适合前端小白或萌新。阅读前请确保自己对前端三大件（JavaScript+CSS+HTML）的基础已经十分熟悉，而且有高中水平的数学和物理知识。demo 采用 ES6 编写，遵循 Airbnb 规范，不依赖第三方框架或库，请在现代浏览器里运行。大部分例子来...

小程序现阶段缺陷还很多，在安卓手机上的性能也是很糟糕，估计实用性还不高。一步一步都是坑，这里作为个人踩坑收集用（内含吐槽），也是经验分享，欢迎issues讨论。