阿里的前端工程师都在关注什么？

今天，明河参加了阿里的集体前端的技术峰会（一整天-_-!），信息量太大，回来赶紧梳理下，顺便分享给大家。

阿里的前端工程师团队不少，分散在各个子公司，今天看到不少团队的一些干货，明河将业务和内部的部分去掉，剩下几块可能对大家有帮助的内容。

使用webP代替jpg

什么是webP？

webP是google推出的新的图片格式，采用全新的有损算法，相较于jpg，在同画质的情况下，可以把图片大小减少40%（根据会上云谦的说明，是38%）。

为什么需要webP？

大家都应该有看过淘宝的商品详情（detail）页面，很多detail页面，充斥大量的描述图片，占用大量的淘宝cdn流量，这些都是钱！（补充个知识，年终cdn结算流量费用时，是按照峰值来算的！想想，淘宝11.11，那恐怖的峰值….），想要降量，减少图片体积是最“粗暴”有效的方式。

如何减少图片体积呢？

使用 webP呢！立竿见影！

webP的缺陷

很遗憾，webP只有chrome支持-_-!，如果想要实现全兼容方案，其他浏览器需要使用到flash，成本非常高。

所以现在推荐的方案是，判断用户浏览器的UA，支持webP的浏览器，使用js将img的src替换成webp格式的地址。

钱景是光明的，道路是曲折的….

无线框架实现

毫无争议，Web App是今年的热点，html5在mobile端的威力开始显现，但坑巨多，开发过的同学应该都有体会。

阿里内部目前正在热火朝天开发kissy mobile框架，预计下个月就会有个初版，有兴趣的同学可以试下。

这里也推荐大家看下一个音乐web app，基于kissy，地址是: https://github.com/fem-become/kissy-xiami-demo。

这里特别提醒大家，开发web app要特别注意性能问题，DOM太多时页面性能会急剧下降，变卡，办法是，视口以外的DOM先予以移除。

服务器根据用户UA信息输出对应的js和css

这样做的场景在于：大家在开发响应式页面的时候，会面临js、css会有多余的适配内容的问题，比如我的平板分辨率是1024*768，那么对于用户而言，该页面中关于其他分辨率的适配都是多余的，这造成了不必要的流量损耗。

当然前端可以使用动态加载的方式，间接解决这个问题。

而最好的方式，无疑是服务器输出只适配该终端的js和css。

前端测试方案

这里的前端测试，不是指前端单元测试，而是UI测试。前端单元测试的推行，在业务线层面是举步维艰，基本除了框架级代码，很少有单元测试覆盖。

淘宝的现在的方案，是做个集成测试环境，前端（或测试工程师）编写jasmine的测试用例，来模拟用户页面操作，即UI测试，同时提供录制机器操作的过程。最后反馈测试结果到集成系统中。

说得很抽象，目前没有可运行的demo，大家稍微了解下即可。

kissy框架的变革

kissy作为国内比较领先的前端框架（github上的star数超过900），将进入新世纪的变革时刻，下半年会有一系列的动作。

明河这里先不表，后续会有连续的文章说明kissy的更新。

git替代svn发布

git相对于svn优越性，现在自不必说，大家通过github的盛行，都可以体会到git的优势。

阿里的assets发布日后将慢慢从svn迁移到git上。

改变必然伴随阵痛，有机会再跟大家分享淘宝的git发布方案是如何做的？

相关阅读
设置HSlider的滑动延迟速度—flex4教程	Alert.show()使用方式	20个精致的黑白站点设计	WordPress使用Google自定义搜索引擎来实现站内搜索	使用actionscript3.0构建一个异步加载图片的画廊（四）
无觅