前端框架/架构，性能优化，负载均衡，首屏渲染

 前端数据结构与算法- https://zhuanlan.zhihu.com/p/27659059
> 前端重构方案
前端重构方案了解一下- https://blog.csdn.net/vM199zkg3Y7150u5/article/details/80681697
webApp重构之路——性能和用户体验细节总结- http://blog.csdn.net/u011413061/article/details/50571930

> 模块加载器兼打包webpack
 webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。http://webpack.github.io/docs/  https://github.com/webpack/tapable/blob/master/lib/Tapable.js
前端webpack打包- http://blog.csdn.net/GitChat/article/details/78341649
 使用过 Gulp、Grunt、Webpack 等各种构建工具。Ykit 是基于 Webapck 的。Ykit 与 Webpack 最大的不同就是 Ykit 自身的插件机制，这个插件可以包含 Webpack 配置、必要的 npm 模块、特定的构建流程任务等。
 其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

>   这几年里，单页面应用的框架令人应接不暇，各种新的概念也层出不穷。从过去的 jQuery Mobie、Backbone 到今天的 Angular 2、React、Vue 2，除了版本号不同，他们还有很多的相同之处。用 jQuery 来实现功能很容易，找到一个相应的 jQuery 插件，再编写相应的功能即可。对于单页面应用亦是如此，寻找一个相辅助的插件就可以了，如 jQuery Mobile。路由（页面跳转及模块关系）.
-- 当移动设备的性能越来越好时，开发者们开始在浏览器里渲染页面：
 1.使用 jQuery 来做页面交互
 2.使用 jQuery Ajax 来从服务端获取数据
 3.使用 Backbone 来负责路由及 Model
 4.使用 Mustache 作为模板引擎来渲染页面
 5.使用 Require.js 来管理不同的模板
 6.使用 LocalStorage 来存储用户的数据

-- 首屏渲染，首屏白屏
前端黑科技：美团网页首帧优化实践-https://blog.csdn.net/MeituanTech/article/details/84141704
  在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。作为以用户体验为首要目标的我们发现了一个体验问题：首屏白屏问题。

> 前端框架/架构
前端项目架构小结- https://lluvio.github.io/blog/front-end-architecture.html
基于webpack和vue.js搭建的H5端框架- https://github.com/HcySunYang/h5_frame
用Vue2+webpack+node开发一个H5 app- https://github.com/eidonlon/imitate-One 
vue2 + webpack + node 开发一个小demo- http://www.jianshu.com/p/5abe47a39e93
谈谈前端『新』技术- http://geek.csdn.net/news/detail/239563
国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜- http://blog.csdn.net/csdnnews/article/details/78188603
个人的中小型项目前端架构浅谈- http://blog.csdn.net/qq20004604/article/details/70480932

-- bootstrap是样式表：
bootstrap官网- http://v3.bootcss.com/css/ ， 
bootstrap源代码- https://github.com/twbs/bootstrap
web前端入坑第五篇：秒懂Vuejs、Angular、React原理和前端发展历史- http://blog.csdn.net/xllily_11/article/details/69527396

基于webpack和vue.js搭建的H5端框架-http://hcysun.me/2016/03/25/%E5%9F%BA%E4%BA%8Ewebpack%E5%92%8Cvue.js%E6%90%AD%E5%BB%BA%E7%9A%84H5%E7%AB%AF%E6%A1%86%E6%9E%B6(%E5%85%B6%E5%AE%9E%E4%B8%BB%E8%A6%81%E7%94%A8%E4%BA%8EHybrid%E5%BC%80%E5%8F%91H5%E7%AB%AF%E6%A1%86%E6%9E%B6%EF%BC%8C%E4%BD%86%E6%98%AF%E4%BE%9D%E7%84%B6%E8%83%BD%E5%A4%9F%E4%BD%9C%E4%B8%BA%E7%BA%AFweb%E7%AB%AF%E4%BD%BF%E7%94%A8)/

 构建 React、Angular、Vue 等等各种类型的 Javascript 应用。
 先实现HTML+CSS这样的组件化（你可以理解成CSS UI Kit或者说CSS Framwork吧），然后再借力React或Vue，甚至是其他的Web组件的实现方案，将以前静态化的组件，变成动态化的。“从零开始建设服务化的 Web 设计规范”
 《使用Flexible实现手淘H5页面的终端适配》。这个适配方案就是大家熟知的Flexible方案。
 2015年，动画对于Web领域而言，gif动效图，Flash动效，视频，JavaScript动画，即canvas动画，CSS的动画技术。

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。所以建议学习Vue.js之前，对上述 4 个框架系统做些了解。
Vue 2.5.0 源码下载：https://codeload.github.com/vuejs/vue/zip/v2.5.0

-- 以前是没有人会想到用JavaScript作为自己的web server 这是因为什么呢？因为JavaScript是比较慢和乱:
 1.V8引擎解决了JavaScript慢的问题 
 2.commonjs解决了乱的问题 
 3.Node的特性是事件驱动 
 4.为了弥补JavaScript在服务器端的空白。

-- 四种框架，四种不同的思想，简单来说：jQuery Dom 驱动的思想深入人心；React 则推崇组件化，万物皆组件；Angular 则把 MVC 在前端领域发扬光大；而 Vue 则是以数据驱动为核心的 MVVM 架构。
  为了解决多平台的问题，Hybrid 方案脱颖而出，包括传统的基于 WebView 的 Hybrid 方案（例如 Cordova）和 React-Native 等一系列技术方案。
 前端跨平台最常见的技术架构方案有以下三种：
  1.基于 Web 的 Hybrid 解决方案：例如微信浏览器、各公司的 Hybrid 方案
  2.非基于 Web UI 但业务逻辑基于 JavaScript 的解决方案：例如 React-Native
  3.基于 Web UI，但是为了追求运行效率，对 UI 展现逻辑和业务逻辑的 JavaScript 进行了隔离的解决方案：微信小程序

> 前端优化，前端HTML5性能优化指南
移动前端HTML5性能优化指南- https://blog.csdn.net/qq_42375089/article/details/81052096
-- 前端工程化有四个方面，模块化、组件化、规范化、自动化
雅虎14条性能优化的方案- http://www.mahaixiang.cn/znseo/1056.html
提高网站速度的6种网站前端优化方法- http://www.mahaixiang.cn/wyzz/207.html
Web前端高并发攻略的更深层的思索（前端优化）- http://www.cnn6.net/html/net/2017625/202159.html
Minimal Multi-page PWA- https://github.com/Huxpro/mmpwa
H5缓存机制浅析-移动端Web加载性能优化【干货】- http://www.jianshu.com/p/509f5dabdb4f
单页式应用性能优化-首屏数据渐进式预加载- https://zhuanlan.zhihu.com/p/26543645
-- 静态内容实现缓存的七种不同方法：http://geek.csdn.net/news/detail/194677

前端页面优化技巧- http://blog.csdn.net/tanhao_282700/article/details/66970845
 1.利用 CDN 实现缓存；2. 利用 HTTP 头来灵活管理缓存；3. 利用 Ajax 实现缓存；4. 利用页面缓存；5. 利用应用缓存；6. 利用对象缓存；7. 独立对象缓存；

一款制作动画的技术产品：AFT —— Animation Flow Tools。
  说起静态缓存技术，CDN是经典代表之作。静态缓存技术面非常广，涉及的开源技术包含apache、Lighttpd、nginx、varnish、squid等。
  静态缓存，一般指 web 类应用中，将图片、js、css、视频、html等静态文件/资源通过磁盘/内存等缓存方式，提高资源响应方式，减少服务器压力/资源开销的一门缓存技术。
  一个完整的html结构包含：dom树、文档、图片和媒体资源、样式css资源和脚本js资源。
  任何技术都有针对的适用场景取舍。

-- 前端服务器与负载均衡
根据经验法则，前端服务器是个好东西。尤其是：
  1.减轻了游戏服务器的负载； 
    a.让系统设备价格更低（因为前端服务器比较便宜）；
    b.也提高了整体系统的可靠性（因为前端服务器很容易更换）；
  2.促进了单一客户端的连接（一般来讲是好事）；
  3.促进客户端负载均衡；
  4.出现大事件时，接待10万+的观看者变得很简单（事实上没有限制）；
  5.缺点仅限于额外延迟，而这种延迟一般都在亚毫秒级别；

一般对于游戏来说，客户端负载均衡是最好的选择：
  1.唯一可能的例外是基于网络的部署架构——可能需要服务器端均衡器；
  2.需要避免大规模关联；

CDN类分布是有可能的，但有雷区； 前端服务器可以通过QnFSM架构实现。