你的心如利箭 在风中笔直的飞翔
github DNS ALEXA CDN
jquery JS CSS CSS3 HTML5 svg php --- isux w3cplus

21270

  博客园  :: 首页  ::  ::  ::  :: 管理

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

选择怎样的架构和生态?(玩技术、做需求、业务主导、技术主导)

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

 

 

待补充...

posted on 2017-04-16 21:06  bjhhh  阅读(216)  评论(0编辑  收藏  举报