知識點 1: 移動 web 滾動問題

在移動端，使用滾動來處理業務邏輯的情況有很多，例如列表的滾動加載數據，下拉刷新等等都需要利用滾動的相關知識，但是滾動事件在不同的移動端機型卻又有不同的表現，下面就來一一總結一下。

1. 滾動事件：即 onscroll 事件，形成原因通俗解釋是當子元素的高度超過父元素的高度時且父元素的高度時定值 window 除外，就會形成滾動條，滾動分為兩種：局部滾動和 body 滾動。
2. onscroll 方法： 一般情況下當我們需要監聽一個滾動事件時通常會用到 onscroll 方法來監聽滾動事件的觸發。
   如果在瀏覽器上調試這個方法在瀏覽器上很好用，但是如果跑在手機端就沒有想象中的效果了。
3. body 滾動：在移動端如果使用 body 滾動，意思就是頁面的高度由內容自動撐大，body 自然形成滾動條，這時我們監聽 window.onscroll，發現 onscroll 并沒有實時觸發，只在手指觸摸的屏幕上一直滑動時和滾動停止的那一刻才觸發, 采用了 wk 內核的 webview 除外。
   
   

   body 滾動
   局部滾動

4. 局部滾動：在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的 div 內觸發，將該 div 設置成 overflow:scroll/auto; 來形成 div 內部的滾動，這時我們監聽 div 的 onscroll 發現觸發的時機區分 android 和 ios 兩種情況，具體可以看下面表格：
5. 不同機型 onscroll 事件觸發情況：
   

   	body 滾動	局部滾動
   ios	不能實時觸發	不能實時觸發
   android	實時觸發	實時觸發
   ios wkwebview 內核	實時觸發	實時觸發

6. wkwebview 內核: 這里說明一下關于 ios 的 wkwebview 內核是 ios 從 ios8 開始提供的新型 webview 內核，和之前的 uiwebview 相比，性能要好，具體大家可以自行查看關于 wkwebview 的相關概念。
7. body 滾動和局部滾動 demo：這里我需要指出的是在采用 wkwebview 內核的頁面中 scroll 是可以實時觸發的，如果使用的是原本的 uiwebview 則不能夠實時觸發，手 q 目前使用的是 uiwebview 而新版微信使用的是 wkwebview，大家可以分別使用來嘗試一下下面的 demo：
   局部滾動

   body 滾動
   
   分別用 ios 手 q 和微信和 android 手 q 體驗會有不同的結果。

知識點 2: 關于模擬滾動

1. 有了上面介紹的關于滾動的知識，理解的模擬滾動就不難了。
2. 正常的滾動：我們平時使用的 scroll，包括上面講的滾動都屬于正常滾動，利用瀏覽器自身提供的滾動條來實現滾動，底層是由瀏覽器內核控制。
3. 模擬滾動：最典型的例子就是 iscroll 了，原理一般有兩種：
   
   1). 監聽滾動元素的 touchmove 事件，當事件觸發時修改元素的 transform 屬性來實現元素的位移，讓手指離開時觸發 touchend 事件，然后采用 requestanimationframe 來在一個線型函數下不斷的修改元素的 transform 來實現手指離開時的一段慣性滾動距離。
   
   2). 監聽滾動元素的 touchmove 事件，當事件觸發時修改元素的 transform 屬性來實現元素的位移，讓手指離開時觸發 touchend 事件，然后給元素一個 css 的 animation，并設置好 duration 和 function 來實現手指離開時的一段慣性距離。
4. 這兩種方案對比起來各有好處，第一種方案由于慣性滾動的時機時由 js 自己控制所以可以拿到滾動觸發階段的 scrolltop 值，并且滾動的回調函數 onscroll 在滾動的階段都會觸發。
5. 第二種方案相比第一種要劣勢一些，區別在于手指離開時，采用的時 css 的 animation 來實現慣性滾動，所以無法直接觸發慣性滾動過程中的 onscroll 事件，只有在 animation 結束時才可以借助 animationend 來獲取到事件，當然也有一種方法可以實時獲取滾動事件，也是借助于 requestanimationframe 來不斷的去讀取滾動元素的 transform 來拿到 scrolltop 同時觸發 onscroll 回調。
6. 關于模擬滾動和正常滾動，兩者在性能上差別還是比較明顯的，下面時兩個 demo，可以掃描體驗一下：
   正常滾動

   模擬滾動
   
   衡量滾動是否流暢的指標 fps，我這邊也統計了一下正常滾動和模擬滾動的 fps 數據：
   
   正常滾動
   
   模擬滾動
   
   模擬滾動的 fps 值波動較大，這樣滾動起來會有明顯的卡頓感覺，各位體驗的時候如果滾動超過 10 屏之后就可以明顯感覺到兩著的區別。
   
   在使用模擬滾動時，瀏覽器在 js 層面會消耗更多的性能去改變 dom 元素的位置，在 dom 復雜層級深的頁面更為高，所以在長列表滾動時還要使用正常滾動更好。

知識點 3: 滾動和下拉刷新

1. 下拉刷新的元素在頁面頂部，正常瀏覽時不可見的。
2. 當在頁面頂部往下滾動時出現下拉刷新元素，當手指離開時收起。
3. 以上兩點時實現一個下拉刷新組件的基本步驟，結合我們上述關于滾動的描述，我們可以這樣實現下拉刷新：
   
   方案 1：借助 iscroll 的原理，整個頁面使用模擬滾動，將下拉刷新元素放在頂部，當頁面滾動到頂部下拉時，下拉刷新元素隨著頁面的滾動出現，當手指離開時收回，此方案實現起來較為簡單直接借助 iscoll 即可，但是使用了模擬滾動之后在正常的列表滾動時性能上不如正常滾動。
   方案 2：頁面使用正常滾動，將下拉刷新元素放置在頂部 top 值為負值（正常情況下不可見），當頁面處于頂部時下拉，這時監聽 touchmove 事件，修改 scrollcontent 的 tranlateY 值，同時修改下拉刷新元素的 tranlateY 值，將兩者同時位移來將下拉刷新元素顯示出來，手指離開時（touchend）收回，這種方案滿足了在正常列表滾動時使用原生的滾動節省性能，只在下拉刷新時使用模擬滾動來實現效果。
   方案 3：方案 2 的改良版，唯一不同是將下拉刷新元素和 scrollcontent 放在一個 div 里，將下拉刷新元素的 margintop 設為負值，在下拉刷新時，只需要修改 scrollcontent 一個元素的 tranlateY 值即可實現下拉，在性能上要比方案 2 好。
   
4. 在采用了上述方案之后，還會有一個性能上的問題就是：當頁面的列表過長，dom 元素過多時，在模擬滾動，下拉刷新這段時間內，頁面也會有卡頓現象，這里采取了一個優化策略即：
   
   1) 列表較長時 dom 數量較多時，在觸發下拉刷新的時機時將頁面視窗之外的 dom 元素隱藏或者存放在 fragment 里面。
   2) 在刷新完成之后手指離開（touchend）時將隱藏的元素顯示出來。
   3) 需要注意的是，隱藏和顯示視窗外的元素這個操作在下拉刷新時只會執行一次，并且只有在下拉刷新時才會執行。

AlloyPullRefresh

1. 基于上述知識點，我寫了一個下拉刷新組件，各位可以參考使用，如有問題，請多多指出！

https://github.com/AlloyTeam/AlloyPullRefresh/

通常來說 web 前端實現動畫效果主要通過下面幾種方案：

• css 動畫；利用 css3 的樣式效果可以將 dom 元素做出動畫的效果來。
• canvas 動畫；利用 canvas 提供的 API，然后利用清除-渲染這樣一幀一幀的做出動畫效果。
• svg 動畫；同樣 svg 也提供了不少的 API 來實現動畫效果，并且兼容性也不差，本文主要講解一下如何制作 svg 線條動畫。

1，HTTP2 的新特性。

關于 HTTP2 的新特性，讀著可以參看我之前的文章，這里就不在多說了，本篇文章主要講一下 server push 這個特性。

HTTP,HTTP2.0,SPDY,HTTPS 你應該知道的一些事

2，Server Push 是什么。

簡單來講就是當用戶的瀏覽器和服務器在建立鏈接后，服務器主動將一些資源推送給瀏覽器并緩存起來，這樣當瀏覽器接下來請求這些資源時就直接從緩存中讀取，不會在從服務器上拉了，提升了速率。舉一個例子就是：

作為一個經常和 web 打交道的程序員，了解這些協議是必須的，本文就向大家介紹一下這些協議的區別和基本概念，文中可能不局限于前端知識，還包括一些運維，協議方面的知識，希望能給讀者帶來一些收獲，如有不對之處還請指出。

1. web 始祖 HTTP

全稱：超文本傳輸協議 (HyperText Transfer Protocol) 伴隨著計算機網絡和瀏覽器的誕生，HTTP1.0 也隨之而來，處于計算機網絡中的應用層，HTTP 是建立在 TCP 協議之上，所以 HTTP 協議的瓶頸及其優化技巧都是基于 TCP 協議本身的特性，例如 tcp 建立連接的 3 次握手和斷開連接的 4 次揮手以及每次建立連接帶來的 RTT 延遲時間。

視頻直播這么火，再不學就 out 了。

為了緊跟潮流，本文將向大家介紹一下視頻直播中的基本流程和主要的技術點，包括但不限于前端技術。

1 H5 到底能不能做視頻直播？

當然可以， H5 火了這么久，涵蓋了各個方面的技術。

對于視頻錄制，可以使用強大的 webRTC（Web Real-Time Communication）是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，缺點是只在 PC 的 chrome 上支持較好，移動端支持不太理想。

前言

提到 rem，大家首先會想到的是 em，px，pt 這類的詞語，大多數人眼中這些單位是用于設置字體的大小的，沒錯這的確是用來設置字體大小的，但是對于 rem 來說它可以用來做移動端的響應式適配哦。

兼容性

前言

Facebook  在 2015.9.15 發布了 React Native for Android，把 JavaScript  開發技術擴展到了移動 Android 平臺?；?React 的 React Native  讓前端開發者使用 JavaScript  和 React  編寫應用，利用相同的核心代碼就可以創建  基于 Web，iOS  和 Android  平臺的原生應用。在 React Native for Android 出來之后，本人花了些時間從環境搭建到做出幾個 demo，從體驗來看都挺流暢，具體將此間遇到和問題和具體的新的體會，向大家分享一下。

什么是依賴注入呢，我的理解，簡單點就是說我的東西我自己并不像來拿著，我想要我依賴的那個人來幫我拿著，當我需要的時候，他給我就行了。當然這只是簡單的理解，還是用代碼解釋比較清楚一些。

這里有一個 function，很簡單。

效果展示

Meta 標簽：

這個想必大家都知道，當頁面在手機上顯示時，增加這個 meta 可以讓頁面強制讓文檔的寬度與設備的寬度保持 1:1，并且文檔最大的寬度比例是 1.0，且不允許用戶點擊屏幕放大瀏覽。