!前端优化

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　　随便看看

选择怎样的架构和生态？（玩技术、做需求、业务主导、技术主导）

逻辑引擎、模板引擎、模块规范、构建流、测试工具

待补充...