链接前端velocity （直接复制别人分享）
http://ju.outofmemory.cn/entry/49389
有幸再次参加velocity，每次都会遇到很多不错的人，聊聊同行业的发展实在不错。希望明年可以在velocity上分享一些我们团队实践的干货。因为这次会议PPT都已经输出，很多图标和截图我这里就不做了，只把自己的笔记分享给大家，希望大家多多交流和实践。
|
简单通用的性能技巧 （OmniTI的老外） |
1、网络上主要的问题归咎于latency 2、除了TCP的握手，其他的hello包仍很多，比如超过4k的内容。JS,CSS等（这是pipelining和SPDY的节奏？） 3、page speed: 新的尝试 https://github.com/linkedin/ats_pagespeed 4、首先考虑优化setsockopt() TCP_INIT_CWND controls in Linux （然后考虑广告omniTI，吐槽：每年开场打广告的习惯是改不了了） PPT：http://velocity.oreilly.com.cn/2013/ppts/simple_universal_performance_tricks.pdf |
||||
|
印象笔记在中国 （肖贺） |
1、因为用户的数据是独立的，所以采用用户数据分片的方式存储。一个服务器上只接入若干用户。然后用户的笔记内容可以通过扩容的方式进行存储。（这里的设计思路就很简单明了，当然在多重容灾方面照即通的方式就差远了） 2、Note storage使用java系，tomcat+stripes+lucence 3、使用DRBD同步，没用HA和master-slave（主要是因为简单） PPT：http://velocity.oreilly.com.cn/2013/ppts/evernote_in_china.pdf |
||||
|
HTML5 Rocks （google doodle团队） |
1、animation-sprited image (png) 传统方式，图片重复较多 2、canvas-based sprite animation 3、烟雾等，通过自研粒子系统进行随机生成。 4、google.com/doodle 很多细节的实现是对外开放的 5、整体上是对H5和CSS3布道+现场演示 |
||||
|
Chromium resourcesscheduling （陈智昌@google） |
1、Chrome的工程师，主要是宣讲Chrome在网络优化、资源加载方面的一些优化细节；以及对开发者的一些建议。 2、浏览器在first paint之前等待加载head里的CSS，以防止FOUC（同时CSS后的JS会阻塞并行渲染和子资源，所以头部东西一定要简洁） 3、Chrome解析器会做一些预判逻辑以提升解析速度； 4、SPDY&HTTP 2.0 again 以及基本的资源加载策略HTML>CSS>JS>IMG; PPT：http://velocity.oreilly.com.cn/2013/ppts/chromium_resource_scheduling.pdf |
||||
|
淘宝移动端性能优化 （曹仁@taobao） |
1、移动端加载时间占比
2、App-cache存在资源更新的问题，保持manifest简洁，只缓存模版文件；其他文件通过local storage方式来缓存。（ajax+cors方式来获取文件内容，然后存储在本地） 3、iOS下safari可以设置禁用localstorage，同时5.1后可以强制清除。 4、google推出新的图片格式webp，可以减少30%（qzone也在使用了） 5、最佳实践： 内联css基本骨架，然后js load更多内容 4、定制子应用的方式，将流程模块化处理。（h5的border是2px ? ） 5、Mix:github/mixteam/ 6、图片清晰度问题： 45%的手机用户，会在手机上收藏，然后在PC上成交。 Viewport : initail-scale=0.5,maximum-scale=0.5. 借住less将css函数化，方便适应各种屏幕 字体容器布局图片放大一倍（占流量和内容） –font-size:rem –line-height:100% 7、心得：chrome调试，很多问题是css引起的，没有100%兼容， PPT：http://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） 2、choices（framework1 vs framework b? tech1 vs tech 2?） 3、不在浏览器侧build页面，server更快； 4、start with structure 、namespace、注释 5、使用常用设计模式，按场景需要（观察者和工厂）。 function是最基本的一个block。 6、init function ，在页面底部。 7、session storage 和 localstorage的区别 PPT：http://velocity.oreilly.com.cn/2013/ppts/developing_maintaining_large_JS_apps.pdf |
||||
|
Qzone touch实践 （yunishi@tencent） |
1、多普勒测速–facebook 2011，velocity（和浏览器新的API差别小于10%，传统方式也可以达到我们的目的） 2、webp 国内已经有40-50%的浏览器的支持。 3、移动端的pipelining对开发透明，服务端配置支持（PS:重点对多请求有效，可以在CDN实现） 4、manifest更新机制：时延问题。 5、svn钩子来更新配置文件，以保证combo文件（其实也可以用watch工具） 6、nodejs直出首屏内容（前端公用JS模版）、nodejs渲染模版的时间（10k）耗时几乎可以忽略 7、在qzhttp做gzip压缩的时候，生成内容etag，性能开销很小。 8、拍照压缩上传，通过canvas将本地大尺寸图片渲染到尺寸更小的canvas,然后小图的base64字符串用来本地预览和上传。 9、iOS大于2m会被抽样压缩变形。解决方案是通过判断抽样后，采用贴瓷砖的方式。 Github/stomita/ios-imagefile-megapixel 10、android平台canvas.toDataURL()输出png，ios输出jpg且可以调整压缩质量。 Android: jpegencoder. 11、jpegmeta：判断拍照时候的旋转位 12、对特性实现，使用phonegap模式进行封装。 13、android webview.loadUrl会隐藏用户输入键盘、/ iOS不能多次调用window.location=phonegap://xxx 14、 mWebView.addJavascriptInterface(JAVA_OBJ,”OBJECT_NAME_IN_JS”), js调用oc，oc定时到js环境通过js接口getCommonds获取所需的oc函数队列。 15、对开源的态度：和聪明的人一起工作；持续跟进，追逐技术红利。和作者共鸣。 PPT：http://velocity.oreilly.com.cn/2013/ppts/web_app_performance_optimization_of_qzone_touch.pdf |
||||
|
携程客户端网站性能及用户行为数据采集 |
1、Zabbix（server-side信息采集） 2、Gomez（pseudo client）–类似webpagetest 3、Google analytics (real Client) 4、监控思路基本都是市面上常见的这里我就不赘述，大家看PPT PPT：http://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，拒绝iScroll，CSS3d；减少CSS比JS重要；内存比CPU重要 7、动态CDN 提升10-20% 8、cache 命中，因为命中率低，baidu也没这么做； PPT：http://velocity.oreilly.com.cn/2013/ppts/performance_optimization_of_tieba_in_baidu.pdf |
||||
|
在预处理时代的css性能 |
（吐槽：名字很大气。其实来介绍sass和oocss的，sandy同学化来说，感觉还没michel讲的给力。。） 1、Trulia project ? http://trulia.github.io/ 2、Real User Measuerments 3、问题：如何判断unused css ? 4、CSS中button重复性？ 5、sass准则： 不要超过3层 6、oocss： github.com |
||||
|
16毫秒的优化 （zishunchen@tencent） |
这个不赘述，zishun在公司内开过课，满满的干货，没看过的同学抓紧吧。 |
