http://www.cnblogs.com/wingkun/p/6014259.html 更快速将你的页面展示给用户[前端优化篇]
http://dev.qq.com/topic/57908635c9da73584b02587f H5前端性能测试快速入门
http://www.imooc.com/learn/566 AC2015前端技术大会，多名AlloyTeam优秀讲师分享
http://www.alloyteam.com/ 鹅厂Web前端团队 http://alloyteam.github.io/
https://juejin.im/post/5a1b9cc051882560e35659e6 [web前端性能优化]性能优化只有三步，你了解吗 2017-12-8
前端优化
减少请求数
减少传输体积
尽可能地利用缓存
缩短关键路径
合理安排请求顺序
首页优化
首页按需加载
异步渲染
异步资源打包优化
服务器端渲染，组件前后端同构
DNS相关
一是减少DNS的请求次数，二是进行DNS预获取 <link rel="dns-prefetch" href="//baidu.com" />
离线包
/*离线可访问 永久的资源缓存 动态增量更新 安全校验 预下载&推送*/
图片优化
图片懒加载 （快到可视区域时，就会进行图片的拉取渲染）
图片详情页，可以先显示图片列表页的小型缩略图，再用高清图片替换。
高访问量页面首屏（js被合并到一个文件中，文件过大，但并不是首屏所需的资源）——那么就分离组件，区分环境延后加载，比如把web组件和native组件分开
首屏数据展示耗时优化 ——方案总结
localStorage缓存数据优先展示 —— 加快首屏数据展示
jsonp预拉取数据 —— 减少二次渲染，加快首屏数据显示
按需延时加载非必须资源 —— 减少首屏资源体积
通用数据、图片内容共享 —— 加快可通用部分数据渲染
跨webview预拉取数据 —— 利用webview创建时间加载首屏数据，加快首屏数据展示
列表项页面
1)动态首页列表项，要人为限制他们最多50条
2)列表页，数量无限制 ——当页面较重时，会出现iScroll局部滚动卡顿问题。
局部滚动常列表的优化
iScroll卡顿的原因
1)需要通过监听手势去模拟滚动（包括滚动的加减速，惯性效果）
2)需要移动一个拥有dom数量较多的层
div滚动比iScroll滚动平均FPS提升约40%，并且更稳定。但滚动快容易出现闪白
局部滚动长列表的优化 ——方案总结
直接使用div局部滚动 ———— 数据多的时候一些机型容易出现花屏
div局部滚动联动内容层 ———— 小米机器上样式更新仅发生在滚动结束的时候
滚动过程中删除不可视区域dom ———— 删除瞬间触发layout，造成卡顿
Canvas模拟滚动 ———— 不通机型绘制性能不一样，并且存在无障碍化兼容问题
translate复用dom ———— 滚动更流畅，限定dom在一定数量（选用这种，见下面代码示例。）
在滚动过程中不断复用已有的dom，使页面dom元素始终维持在一屏的数量。 <ul style="height:500px;"> <li style="position:absolute;-webkit-transform:translateY(0px) translateZ(0px);"></li> <li style="position:absolute;-webkit-transform:translateY(100px) translateZ(0px);"></li> <li style="position:absolute;-webkit-transform:translateY(200px) translateZ(0px);"></li> <li style="position:absolute;-webkit-transform:translateY(300px) translateZ(0px);"></li> <li style="position:absolute;-webkit-transform:translateY(400px) translateZ(0px);"></li> </ul> <ul style="height:500px;"> <li style="position:absolute;-webkit-transform:translateY(500px) translateZ(0px);">移出屏幕的列表dom元素补位到最后</li> <li style="position:absolute;-webkit-transform:translateY(100px) translateZ(0px);"></li> <li style="position:absolute;-webkit-transform:translateY(200px) translateZ(0px);"></li> <li style="position:absolute;-webkit-transform:translateY(300px) translateZ(0px);"></li> <li style="position:absolute;-webkit-transform:translateY(400px) translateZ(0px);"></li> </ul>
对于7～8页的列表，换成div局部滚动比iscroll平均FPS提升43%，并且更稳定。
Abstract生态 https://github.com/dorsywang/Abstract.js 随便看看
选择怎样的架构和生态？（玩技术、做需求、业务主导、技术主导）
逻辑引擎、模板引擎、模块规范、构建流、测试工具
待补充...