Instagram是如何工做的？(搭配視頻更好)

首先先放一個視頻地址：How Instagram.com Works; Pete Hunt

傳統的頁面工做方式：

優化的目標(方法)：

優化的思路：不須要一次獲取全部的頁面，只須要獲取部分所須要使用的頁面page

Instagram的作法

1. 經常使用的對js的處理方式
   將js集中在一個文件裏面---->缺陷：頁面加載會比較慢

2. 合適的處理方式
   基於webpack，使用模塊系統，利用異步加載，引入這些module
   

3. css文件的引入(pete自述是他最討厭的)
   作法與js相似，利用module system引入

4. css文件引入的問題
   類名相同，因爲css層疊的緣由，會出現解析錯誤的問題

5. 解決方法：
   1)在不一樣的命名空間使用類名
   2)類名須要明確
   3)不使用級聯的方式
   4)不出現類名覆蓋（no override）

6. webpack的使用方法
   1)Pete關於介紹webpack使用方法的
   2)國內segmentFault關於webpack的介紹

視頻感想

1. 沒有明白HTML結構是如何加載的，難道是因爲每一個Instagram用戶的界面基本一致，直接在APP中「植入」

2. css文件異步加載，在沒法肯定哪個css文件首先加載狀況下，如何保證客戶端快速鏈接服務器的同時，穩定並且美觀