!前端优化

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

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

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

 

 

待补充...