在 《XSS 终结者-CSP 理论与实践》 中，讲述了 CSP 基础语法组成与使用方式。通过一步步的方案制定，最终我们利用 CSP 提供的域名白名单机制，有效地将异常的外联脚本拦在门外。然而在线上环境千千万万，虽然我们限制了外联脚本，但却仍被内联脚本钻了空子。

在传统的 web 优化中，我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小，也能通过离线包、页面直出等方案加速 html 返回，之前一篇 h5 秒开大全有部分简析。在大部分场景中，这些方案都足够用，也能得到出色的效果。但仍有两种无法尽善尽美的地方：其一是短暂的白屏现象不可避免，其二是对于超大型 web 应用难以做到秒开。结合客户端特性，我们有没有办法，进一步做到极致，打开 web 页面和打开客户端页面无差异的体验呢？

背景

需求预沟通

• 产品：我们需要做一个 IM，和微信一样
• 我：打扰了，走错片场了，你们继续，，，，，，，
• ....
• 我：这个需求虽然不合理，但是我还是接了。。。。。。

写在前面

Omi 框架 正式发布了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

作为 Omi 组件化开发特效运动解决方案，让你轻松在 Omi 项目里快速简便支持 CSS3 Transform 设置。css3transform 是经受过海量项目洗礼的，作为移动 Web 特效解决方案，在微信、手 Q 兴趣部落、日迹、QQ 群、QQ 附近等项目中广泛使用，以激进的修改 DOM 属性为代价，带来极为便利的可编程性。

你可以通过 css3transform 官方首页快速了解它。

pasition

Pasition - Path Transition with little JS code, render to anywhere - 超小尺寸的 Path 过渡动画类库

• Github 源代码
• 在线演示

最近和贝塞尔曲线杠上了，如 curvejs 和 pasition 都是贝塞尔曲线的应用案例，未来还有一款和贝塞尔曲线相关的开源的东西，暂时保密。

一. 前言

当我们选择使用 Node+React 的技术栈开发 Web 时，React 提供了一种优雅的方式实现服务器渲染。使用 React 实现服务器渲染有以下好处：

        1. 利于 SEO：React 服务器渲染的方案使你的页面在一开始就有一个 HTML DOM 结构，方便 Google 等搜索引擎的爬虫能爬到网页的内容。

        2. 提高首屏渲染的速度：服务器直接返回一个填满数据的 HTML，而不是在请求了 HTML 后还需要异步请求首屏数据。

        3. 前后端都可以使用 js

二. 神奇的 renderToString 和 renderToStaticMarkup

有两个神奇的 React API 都可以实现 React 服务器渲染：renderToString 和 renderToStaticMarkup。renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串。这两个函数都属于 react-dom(react-dom/server) 包，都接受一个 React Component 参数，返回一个 String。

也许你会奇怪为什么会有两个用于服务器渲染的函数，其实这两个函数是有区别的：

上个月在千里码刷题的时候，碰到了比较有意思的一道题—— 隐写术。既然感觉有意思，又很久没有玩过 canvas，所以今天结合这两块内容带大家探索一下。

隐写术算是一种加密技术，权威的 wiki 说法是“ 隐写术是一门关于信息隐藏的技巧与科学，所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。” 这看似高大上的定义，并不是近代新诞生的技术，早在 13 世纪末德国人 Trithemius 就写出了《隐写术》的著作，学过密码学的同学可能知道。好了，说了这么多，隐写术到底是什么技术，让我们看一个例子。

下面是一张看似普通的图片，但其中却藏有另一个肉眼无法识别的图像哦。

为什么尝试使用 Canvas 绘制列表？使用 canvas 绘制列表的好处在于页面只有一个 dom 元素，这样对于大量 dom 元素组成的列表来说，无疑更节省页面内存。

本文将一步一步分析，如何实现一个 canvas 绘制的长列表。

Step1：dom 节点映射

首先考虑一个问题，对于我们在页面中常见的 dom 结点，在 Canvas 中如何表示？

因此我们的第一步工作就是实现 dom 结点到 Canvas 绘制对象的映射。

位置传感器

1 GPS 与基站定位

位置传感器通常主要指手机内部的 Global Positioning System (GPS) 模块，GPS 又称全球卫星定位系统，该系统包括太空中的 24 颗 GPS 卫星；地面上 1 个主控站、3 个数据注入站和 5 个监测站及作为用户端的 GPS 接收机。最少只需其中 3 颗卫星，就能迅速确定用户端在地球上所处的位置及海拔高度；所能收联接到的卫星数越多，解码出来的位置就越精确。

获取位置信息，核心在于获取经纬度坐标，继而在手机地图中标注出自身坐标，从而确定当前所处的位置。目前手机定位的方式有两种，一种是基于 GPS 的定位，一种是基于移动运营网的基站的定位。基于 GPS 的定位方式是利用手机上的 GPS 定位模块将自己的位置信号发送到定位后台来实现手机定位的。基站定位则是利用基站对手机的距离的测算距离来确定手机位置的。后者不需要手机具有 GPS 定位能力，但是精度很大程度依赖于基站的分布及覆盖范围的大小，有时误差会超过一公里。前者定位精度较高。

虽然标题是画椭圆，但是我们先来说说 Canvas 中的圆

相信大家对于 Canvas 画圆都不陌生