正在加载...
2013-9
19
发表于: Web前端 | 作者: | 目前已阅读: 7,612 次

有幸再次参加velocity,每次都会遇到很多不错的人,聊聊同行业的发展实在不错。希望明年可以在velocity上分享一些我们团队实践的干货。因为这次会议PPT都已经输出,很多图标和截图我这里就不做了,只把自己的笔记分享给大家,希望大家多多交流和实践。

 

简单通用的性能技巧

OmniTI的老外)

1、网络上主要的问题归咎于latency

2、除了TCP的握手,其他的hello包仍很多,比如超过4k的内容。JS,CSS等(这是pipeliningSPDY的节奏?)

3page speed: 新的尝试 https://github.com/linkedin/ats_pagespeed

4、首先考虑优化setsockopt() TCP_INIT_CWND controls in Linux (然后考虑广告omniTI,吐槽:每年开场打广告的习惯是改不了了)

PPThttp://velocity.oreilly.com.cn/2013/ppts/simple_universal_performance_tricks.pdf

印象笔记在中国

(肖贺)

1、因为用户的数据是独立的,所以采用用户数据分片的方式存储。一个服务器上只接入若干用户。然后用户的笔记内容可以通过扩容的方式进行存储。(这里的设计思路就很简单明了,当然在多重容灾方面照即通的方式就差远了)

2Note storage使用java系,tomcat+stripes+lucence

3、使用DRBD同步,没用HAmaster-slave(主要是因为简单)

PPThttp://velocity.oreilly.com.cn/2013/ppts/evernote_in_china.pdf

HTML5 Rocks

google doodle团队)

1animation-sprited image (png) 传统方式,图片重复较多

2canvas-based sprite animation

3、烟雾等,通过自研粒子系统进行随机生成。

4google.com/doodle 很多细节的实现是对外开放的

5、整体上是对H5CSS3布道+现场演示

Chromium resourcesscheduling

(陈智昌@google

1Chrome的工程师,主要是宣讲Chrome在网络优化、资源加载方面的一些优化细节;以及对开发者的一些建议。

2、浏览器在first paint之前等待加载head里的CSS,以防止FOUC(同时CSS后的JS会阻塞并行渲染和子资源,所以头部东西一定要简洁)

3Chrome解析器会做一些预判逻辑以提升解析速度;

4SPDY&HTTP 2.0 again 以及基本的资源加载策略HTML>CSS>JS>IMG;

PPThttp://velocity.oreilly.com.cn/2013/ppts/chromium_resource_scheduling.pdf

淘宝移动端性能优化

(曹仁@taobao

1、移动端加载时间占比

DNS

27%

Trans

23%

2App-cache存在资源更新的问题,保持manifest简洁,只缓存模版文件;其他文件通过local storage方式来缓存。(ajax+cors方式来获取文件内容,然后存储在本地)

3iOSsafari可以设置禁用localstorage,同时5.1后可以强制清除。

4google推出新的图片格式webp,可以减少30%qzone也在使用了)

5、最佳实践: 内联css基本骨架,然后js load更多内容

4、定制子应用的方式,将流程模块化处理。(h5border2px ?

5Mix:github/mixteam/

6、图片清晰度问题:

45%的手机用户,会在手机上收藏,然后在PC上成交。

Viewport : initail-scale=0.5,maximum-scale=0.5.

借住lesscss函数化,方便适应各种屏幕

字体容器布局图片放大一倍(占流量和内容)

–font-size:rem

–line-height:100%

7、心得:chrome调试,很多问题是css引起的,没有100%兼容,

PPThttp://velocity.oreilly.com.cn/2013/ppts/performance_optimizaition_of_mobile_web_page_in_taobao.pdf

前端javascript研发和维护

omniIT

(吐槽:主讲是自豪的生成自己写过1MB代码的汉子We deploy over 1 MB of Javascript,主要将了一些Common Sense的东西,但是我还是细心的写了下笔记)

1、基本的文件合并,文件位置,文件压缩(gzip

2choicesframework1 vs framework b? tech1 vs tech 2?

3、不在浏览器侧build页面,server更快;

4start with structure namespace、注释

5、使用常用设计模式,按场景需要(观察者和工厂)。 function是最基本的一个block

6init function ,在页面底部。

7session storage localstorage的区别

PPThttp://velocity.oreilly.com.cn/2013/ppts/developing_maintaining_large_JS_apps.pdf

Qzone touch实践

yunishi@tencent

1、多普勒测速–facebook 2011velocity(和浏览器新的API差别小于10%,传统方式也可以达到我们的目的)

2webp 国内已经有40-50%的浏览器的支持。

3、移动端的pipelining对开发透明,服务端配置支持(PS:重点对多请求有效,可以在CDN实现)

4manifest更新机制:时延问题。

5svn钩子来更新配置文件,以保证combo文件(其实也可以用watch工具)

6nodejs直出首屏内容(前端公用JS模版)、nodejs渲染模版的时间(10k)耗时几乎可以忽略

7、在qzhttpgzip压缩的时候,生成内容etag,性能开销很小。

8、拍照压缩上传,通过canvas将本地大尺寸图片渲染到尺寸更小的canvas,然后小图的base64字符串用来本地预览和上传。

9iOS大于2m会被抽样压缩变形。解决方案是通过判断抽样后,采用贴瓷砖的方式。 Github/stomita/ios-imagefile-megapixel

10android平台canvas.toDataURL()输出pngios输出jpg且可以调整压缩质量。 Android: jpegencoder.

11jpegmeta:判断拍照时候的旋转位

12、对特性实现,使用phonegap模式进行封装。

13android webview.loadUrl会隐藏用户输入键盘、/ iOS不能多次调用window.location=phonegap://xxx

14 mWebView.addJavascriptInterface(JAVA_OBJ,”OBJECT_NAME_IN_JS”), js调用ococ定时到js环境通过js接口getCommonds获取所需的oc函数队列。

15、对开源的态度:和聪明的人一起工作;持续跟进,追逐技术红利。和作者共鸣。

PPThttp://velocity.oreilly.com.cn/2013/ppts/web_app_performance_optimization_of_qzone_touch.pdf

携程客户端网站性能及用户行为数据采集

1Zabbixserver-side信息采集)

2Gomezpseudo client类似webpagetest

3Google analytics (real Client)

4、监控思路基本都是市面上常见的这里我就不赘述,大家看PPT

PPThttp://velocity.oreilly.com.cn/2013/ppts/performance_and_user_behavior_data_collection.pdf

Baidu 贴吧移动性能优化

(雷志兴@baidu

1、概念类:重点优化那些性能差的用户(这个henry也比较赞同)

2、模块/组件化(fis的逻辑,通过module的引入和important参数–php处理模块优先逻辑)

3、和我们的处理差不多,首页尽量减少http请求,内联等方式。

4、框架同时支持同步和异步加载模块,对开发者透明

5、减少渲染: 首屏以外滚动渲染,setTimeout分片,避免前端模版渲染(gz后差别不大),通过陀螺仪检测?

6、减少资源消耗:DOM清理,缓存数据而非DOM,拒绝iScrollCSS3d;减少CSSJS重要;内存比CPU重要

7、动态CDN 提升10-20%

8cache 命中,因为命中率低,baidu也没这么做;

PPThttp://velocity.oreilly.com.cn/2013/ppts/performance_optimization_of_tieba_in_baidu.pdf

在预处理时代的css性能

(吐槽:名字很大气。其实来介绍sassoocss的,sandy同学化来说,感觉还没michel讲的给力。。)

1Trulia project ?  http://trulia.github.io/

2Real User Measuerments

3、问题:如何判断unused css ?

4CSSbutton重复性?

5sass准则: 不要超过3

6oocss github.com

16毫秒的优化

zishunchen@tencent

这个不赘述,zishun在公司内开过课,满满的干货,没看过的同学抓紧吧。

PPThttp://velocity.oreilly.com.cn/2013/ppts/16_ms_optimization–web_front-end_performance_optimization.pdf

 

: http://www.webryan.net/2013/09/velocity-2013/

本文相关评论 - 1条评论都没有呢

No comments yet.