组件加载

延迟加载组件

利用JS的onload事件区分可以延迟加载的组件。

预加载组件

利用浏览器的空闲时间来请求你将来会用到的组件。

• 无条件预加载：一旦onload触发，立即获取另外的组件。
• 有条件预加载：基于用户动作，你推测用户下一步会去哪里并加载相应组件。
• 预期的预加载：在旧网页预加载新网页的部分组件，那么切换到新网页时就不会是没有任何缓存了。

http/2

http/1.x的缺陷

1. HTTP/1.x 客户端需要使用多个连接才能实现并发和缩短延迟；
2. HTTP/1.x 不会压缩请求和响应标头，从而导致不必要的网络流量；
3. HTTP/1.x 不支持有效的资源优先级，致使底层 TCP 连接的利用率低下。

http/2的改进

1. HTTP/2 支持在同一连接上进行多个并发交换；
2. HTTP/2 通过支持标头字段压缩；
3. HTTP/2 允许为请求设置优先级，让更重要的请求更快速地完成;
4. HTTP/2 通过使用二进制消息分帧对消息进行更高效的处理。

对前端的影响

HTTP/2 针对多个请求进行了优化，因此之前我们在前端中所做的关于减少HTTP请求的最佳实践都不再适用，如合并JS、CSS文件（Concatenation），多个图片或图标合并（Spriting）,将较小的JS或CSS文件内嵌到HTML中（Inlining），合并HTML文件（Vulcanize），根据某网站的测试结果显示，在使用HTTP/2后，合并为一个大文件的加载时间反而会比不合并更长。

WebSocket

http的缺陷

http协议有一个缺陷，通信只能由客户端发起。因此只能使用”轮询”的方式，效率很低，非常浪费资源。
而WebSocket支持全双工通信。

参考

• Google Developers — HTTP/2 简介
• 亚里士朱德的博客 — js高手进阶之路:underscore源码经典
• GitHub — underscore-1.8.3.js 源码解读