在 《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 定位模塊將自己的位置信號發送到定位后臺來實現手機定位的?；径ㄎ粍t是利用基站對手機的距離的測算距離來確定手機位置的。后者不需要手機具有 GPS 定位能力，但是精度很大程度依賴于基站的分布及覆蓋范圍的大小，有時誤差會超過一公里。前者定位精度較高。

雖然標題是畫橢圓，但是我們先來說說 Canvas 中的圓

相信大家對于 Canvas 畫圓都不陌生