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文件首先加载状况下，如何保证客户端快速链接服务器的同时，稳定并且美观