27 | 
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
23 |
27 | 
37 |
38 |
39 |
40 | ```
41 |
--------------------------------------------------------------------------------
/04~移动端与响应式/响应式适配/响应式布局/响应式布局.md:
--------------------------------------------------------------------------------
1 | # 响应式布局
2 |
3 | 未来的布局方式，可能不同于现有的 Flexbox 与 CSS Grid 这样的从上到下的流式布局，随着 Resize Observer API 这类新的 DOM API，我们未来可能会出现响应式布局或者其他关系型布局。比如写布局时的逻辑可能是“模式匹配”的，当我独占一行时，我怎么布局；当我左侧有某个元素时，我怎么布局。
4 | 比如用 react 写一个瀑布流时，可以这样做：我是一个组件，当我 didMount 时，我获取我顶上的元素的位置 position，然后加上一个间距 padingTop，就得到了我自己的位置。
5 |
6 | # Auto Resize: 自动缩放
7 |
8 | ## CSS Responsive Grid System
9 |
10 | ## Flexbox: 动态分配空间
11 |
12 | ## Proportional Scale: 按比例缩放
13 |
14 | # Auto Layout 自动布局
15 |
16 | ## Flexbox:flex-wrap
17 |
18 | ### Bugs
19 |
20 | 在 iOS 中有时候会发现如果没有设置 flex 元素的尺寸，只是设置了最大值或者最小值会导致计算是否需要换行出现错误，可以参考[row-wrap-in-flex-box-not-wrapping-in-safari](http://stackoverflow.com/questions/25360526/row-wrap-in-flex-box-not-wrapping-in-safari/30792851#30792851)这个问题，即如果我们的样式是：
21 |
22 | ```css
23 | div.flex {
24 | display: -webkit-flex;
25 | display: flex;
26 | -webkit-flex-wrap: wrap;
27 | flex-wrap: wrap;
28 | -webkit-flex-direction: row;
29 | flex-direction: row;
30 | }
31 |
32 | div.flex .item {
33 | min-width: 15em;
34 | -webkit-flex: 1;
35 | flex: 1;
36 | }
37 | ```
38 |
39 | 这样的 item 是不会自动换行的，而需要显式的指明 item 的尺寸：
40 |
41 | ```css
42 | div.flex {
43 | display: -webkit-flex;
44 |
45 | display: flex;
46 | -webkit-flex-wrap: wrap;
47 |
48 | flex-wrap: wrap;
49 | -webkit-flex-direction: row;
50 |
51 | flex-direction: row;
52 | }
53 |
54 | div.flex .item {
55 | min-width: 15em;
56 | -webkit-flex: 1 1 15em; /* this */
57 |
58 | flex: 1;
59 | }
60 | ```
61 |
62 | 该 Bug 已经提交到了在[Safari (WebKit) doesn't wrap element within flex when width comes below min-width](https://bugs.webkit.org/show_bug.cgi?id=136041)，可以使用 iOS 打开[CodePen](http://codepen.io/philipwalton/pen/BNrGwN)来查看问题复现。
63 |
64 | 不过笔者在实际使用 flex-wrap 属性的时候发现在 iPhone 5/5s(iOS 8/9)上出现了一个很奇怪的错误，详情可见笔者在 StackOverflow 上提出的[flex-wrap-doesnt-work-in-iphone5-ios-8](http://stackoverflow.com/questions/38365121/flex-wrap-doesnt-work-in-iphone5-ios-8)问题。
65 |
--------------------------------------------------------------------------------
/01~浏览器工作机制/03.事件处理/README.md:
--------------------------------------------------------------------------------
1 | # 浏览器中事件处理
2 |
3 | 当页面渲染完毕以后，Tab 内已经显示出了可交互的 Web 页面，用户可以进行移动鼠标、点击页面等操作了，而当这些事件发生时候，浏览器是如何处理这些事件的呢？以点击事件（click event）为例，让鼠标点击页面时候，首先接受到事件信息的是 Browser Process，但是 Browser Process 只知道事件发生的类型和发生的位置，具体怎么对这个点击事件进行处理，还是由 Tab 内的 Renderer Process 进行的。Browser Process 接受到事件后，随后便把事件的信息传递给了渲染进程，渲染进程会找到根据事件发生的坐标，找到目标对象（target），并且运行这个目标对象的点击事件绑定的监听函数（listener）。
4 |
5 | 
6 |
7 | 
8 |
9 | # 渲染进程中合成器线程接收事件
10 |
11 | 前面我们说到，合成器线程可以独立于主线程之外通过已光栅化的层创建组合帧，例如页面滚动，如果没有对页面滚动绑定相关的事件，组合器线程可以独立于主线程创建组合帧，如果页面绑定了页面滚动事件，合成器线程会等待主线程进行事件处理后才会创建组合帧。那么，合成器线程是如何判断出这个事件是否需要路由给主线程处理的呢？
12 |
13 | 由于执行 JS 是主线程的工作，当页面合成时，合成器线程会标记页面中绑定有事件处理器的区域为非快速滚动区域(non-fast scrollable region)，如果事件发生在这些存在标注的区域，合成器线程会把事件信息发送给主线程，等待主线程进行事件处理，如果事件不是发生在这些区域，合成器线程则会直接合成新的帧而不用等到主线程的响应。
14 |
15 | 
16 |
17 | 而对于非快速滚动区域的标记，开发者需要注意全局事件的绑定，比如我们使用事件委托，将目标元素的事件交给根元素 body 进行处理，代码如下：
18 |
19 | ```js
20 | document.body.addEventListener("touchstart", (event) => {
21 | if (event.target === area) {
22 | event.preventDefault();
23 | }
24 | });
25 | ```
26 |
27 | 在开发者角度看，这一段代码没什么问题，但是从浏览器角度看，这一段代码给 body 元素绑定了事件监听器，也就意味着整个页面都被编辑为一个非快速滚动区域，这会使得即使你的页面的某些区域没有绑定任何事件，每次用户触发事件时，合成器线程也需要和主线程通信并等待反馈，流畅的合成器独立处理合成帧的模式就失效了。
28 |
29 | 
30 |
31 | 其实这种情况也很好处理，只需要在事件监听时传递 passtive 参数为 true，passtive 会告诉浏览器你既要绑定事件，又要让组合器线程直接跳过主线程的事件处理直接合成创建组合帧。
32 |
33 | ```js
34 | document.body.addEventListener(
35 | "touchstart",
36 | (event) => {
37 | if (event.target === area) {
38 | event.preventDefault();
39 | }
40 | },
41 | { passive: true }
42 | );
43 | ```
44 |
45 | # 查找事件的目标对象（event target）
46 |
47 | 当合成器线程接收到事件信息，判定到事件发生不在非快速滚动区域后，合成器线程会向主线程发送这个时间信息，主线程获取到事件信息的第一件事就是通过命中测试（hit test）去找到事件的目标对象。具体的命中测试流程是遍历在绘制阶段生成的绘画记录（paint records）来找到包含了事件发生坐标上的元素对象。
48 |
49 | 
50 |
--------------------------------------------------------------------------------
/04~移动端与响应式/PWA/离线存储.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # 离线存储
4 |
5 | 我们不可以在 Service Worker 中使用 Local Storage，并且 Service Worker 不可以使用任何的同步 API，不过可以使用 IndexDB，CacheAPI，或者利用 postMessage() 与界面进行交互。参考 [GoogleChromeLabs/airhorn](https://github.com/GoogleChromeLabs/airhorn)，可以使用如下的代码注册 ServiceWorker，并且使用 Cache API 来进行资源与请求缓存，首先需要注册 ServiceWorker：
6 |
7 | ```js
8 | if (‘serviceWorker’ in navigator) {
9 | window.addEventListener(‘load’, function() {
10 | navigator.serviceWorker.register(‘/sw.js’).then(
11 | function(registration) {
12 | // Registration was successful
13 | console.log(‘ServiceWorker registration successful with scope: ‘, registration.scope); },
14 | function(err) {
15 | // registration failed :(
16 | console.log(‘ServiceWorker registration failed: ‘, err);
17 | });
18 | });
19 | }
20 | ```
21 |
22 | 然后在 sw.js 文件中缓存资源：
23 |
24 | ```js
25 | self.addEventListener("install", (e) => {
26 | let timeStamp = Date.now();
27 | e.waitUntil(
28 | caches.open("airhorner").then((cache) => {
29 | return cache
30 | .addAll([
31 | `/`,
32 | `/index.html?timestamp=${timeStamp}`,
33 | `/styles/main.css?timestamp=${timeStamp}`,
34 | `/scripts/main.min.js?timestamp=${timeStamp}`,
35 | `/scripts/comlink.global.js?timestamp=${timeStamp}`,
36 | `/scripts/messagechanneladapter.global.js?timestamp=${timeStamp}`,
37 | `/sounds/airhorn.mp3?timestamp=${timeStamp}`,
38 | ])
39 | .then(() => self.skipWaiting());
40 | })
41 | );
42 | });
43 |
44 | self.addEventListener("activate", (event) => {
45 | event.waitUntil(self.clients.claim());
46 | });
47 |
48 | self.addEventListener("fetch", (event) => {
49 | event.respondWith(
50 | caches.match(event.request, { ignoreSearch: true }).then((response) => {
51 | // 默认不会保护 Cookie，可以使用 fetch(url, {credentials: 'include'}) 来发送 Cookie
52 | return response || fetch(event.request);
53 | })
54 | );
55 | });
56 | ```
57 |
--------------------------------------------------------------------------------
/03~性能优化/图片优化/图片优化.md:
--------------------------------------------------------------------------------
1 | # 图片优化
2 |
3 | # JPEG
4 |
5 | # WebP
6 |
7 | ## Image Delivery
8 |
9 | 图片是网站的不可或缺的部分，其能够大大提升网站的表现力与视觉效果，而目前[平均大小为 2406KB 的网页中就有 1535KB 是图片资源](http://httparchive.org/interesting.php?a=All&l=Jul%2015%202016)，可见图片占据了静态资源多么大的一个比重，这也是我们需要重点优化的部分。
10 | 
11 |
12 | ### WebP
13 |
14 | [WebP](https://developers.google.com/speed/webp/) 是面向现代网页的高压缩低损失的图片格式，通常会比 JPEG 小 25%左右。然后 WebP 目前被很多人忽视，也不常使用。截止到本文撰写的时候，WebP 目前只能够在[Chrome, Opera and Android](http://caniuse.com/#feat=webp) (大概占用户数的 50%)这些浏览器中使用，不过我们还是有办法以 JPG/PNG 来弥补部分浏览器中不支持 WebP 的缺憾。
15 |
16 | ### `picture`标签
17 |
18 | 使用 picture 标签可以方便的对于 WebP 格式不支持的情况下完成替换:
19 |
20 | ```
21 | 
29 |