分类
- paypal (2)
- Uncategorized (3)
- 互联网 (11)
- 产品 (4)
- 代码 (10)
文章
- August 2010 (2)
- May 2010 (2)
- April 2010 (1)
- March 2010 (5)
- February 2010 (3)
- January 2010 (17)
Category Archives: 代码
10年前端计划
今天召开了平台架构部大会，前端现在是平台架构部下面一个团队。最近同事们加班加点制定出了10年前端工作计划。主要有几点:
1)稳定的前端核心库 2)检测用户行为数据的好方法 3）代码库推广
另外淘宝同事在Qcon上介绍了淘宝前端团队从无到有的发展史和未来的规划，再想想我08年来到支付宝工作到现在，团队的变化和发展。我忽然想通了一些事情。这里记录下来：
1）前端技术的快速发展推动着从业者的变化，在人生平均30年的职业生涯中，这个变化时间真的很快。
Web技术大致的时间轴
1991HTML
1994HTML 2
1996CSS 1 + JavaScript
1997HTML 4
1998CSS 2
2000XHTML 1
2002使用DIV+CSS进行网页布局
2005AJAX
2009HTML 5
淘宝前端06年无，07年5个，08年14个，09年30个。08年，我来到支付宝时真正的前端有3个，加上3个外包同学。下来就是我们4个前端应届生们。09年我们又来了6个同事。今天前端已经有16个人了。
随着人数的增多，对应着前端技术的庞大，前端产出物的复杂。工业化分工，标准化工作思想都融入到前端作坊式的开发上来。前端越来越走入技术岗位的正规。
如果是前端的新手，可能会被日常琐碎无聊的事情折磨的对这个岗位厌倦了。但是看看前端这几年的发展，web技术的发展，这个舞台是一个前进的列车，html5日渐成熟，这个行业比起后端开发来说，有着很多机会和变化。
好的设计驱动技术创新
好的技术为设计提供无限的遐想
Posted in 代码 Leave a comment
https性能调优[译]
这是一篇译文,原文:http://blog.httpwatch.com/2009/01/15/https-performance-tuning/
在网络性能优化中一个经常被忽略的问题是保障安全连接的https协议.随着应用从桌面转移到web,广泛被应用的https协议中安全和隐私的可靠性越来越重要.
下面的例子展示使用https过程中常见的问题.
例1:使用有效的响应
每当浏览器访问一个网站,它必须创建一个或多个tcp链接.既是在常见的http协议下,这也是个漫长的过程.使用tcp链接的有效的响应可以减少这中开销.下面来自httpwatch的图表显示在访问英国一网站时tcp连接时间大约130毫秒
使用https时,如果不是有效链接将会造成长时间的延迟.因为就算tcp已经连接,ssl链接也需要建立请求.浏览器和服务端会来回通信几次来建立加密的密钥.使用https链接相应时间是http的四倍以上.
在一个重复的https链接里tcp链接和ssl通信的开销是应该避免的.虽然现在有些浏览器允许重复使用ssl链接,但是你不能总指望每个服务器都作了这样的配置.
例2:避免混合内容警告
在前一篇博文中提到,如果一个https页面使用了任何http资源,就会出现令人迷惑和烦人的警告对话框.
为了避免这个警告提示,要确保这个页面包含的资源都是https.
例3:使用持久缓存的静态内容
如果你按照例子2,那么页面上所有的资源(图片,css,js)都在https下面了,你应该持续地使用静态缓存,来避免每次每个用户再次访问站点重复下载.
淡然你不会对所有东西缓存,账户信息和每月的饼图就不用.但是大多数资源还是要安全的存储,页面间分享和再次使用.
这里可能有一些混乱对于https下是否使用缓存.
例如在https下的gmail,确实访问速度要慢一些,因为浏览器不缓存这些页面.
虽 然，37Signals公司承认，在内存中缓存是可能的，他们说 ， 持 续的缓存是不可能的 ：
但在现实中https下持续缓存在ie和firefox下是可能的.
访问www.httpwatch.com,通过httpwatch我们可以看到,所有资源都是通过缓存来访问的.
如果你使用firefox3.0,并不修改请求头部,看到的是:
我们看到这里并没有缓存,这是因为头部设置的原因,firefox每次是请求的服务器.200代表静态内容是从服务器上求情成功的.
但是我们在firefox地址输入”about:cache”,找到这些缓存文件
这里修改一下设置就可以了,修改Cache-Control response header to Public.
这样我们就把https下的内容移动到了firefox的缓存空间.于是再次访问
这个方法只有在firefox3.0才可以(译者音:经过试验,3.0以后的都是可以的,也不需要该header信息)
例4:使用https警告探测器
译者音:作者说了那么多广告,我这里就不翻译了,这段话就一个意思,使用httpwatch可以给出https下的警告.使用方法和上面截图基本上一样的.
Posted in 代码 Leave a comment
项目代码行数占比
这个项目搞了半年,在半年前开始的时候,我想不知道这次能不能写1w行js,今天有空做了下统计.
php 194783行 46%
html 99304行 24%
css 33429行 8%
js 93998行 22%
跑出结果后,我大吃一惊,原来还是写了很多.
py代码:
testpy
Posted in 代码 Leave a comment
小试clickheat
clickheat是一款页面点击分布插件.他比起其他页面点击分布插件的好处是
可以可视化生成页面热图.
这是今天测试的life.alipay.com首页热图.
他唯一不好的地方是这个东西太慢,没点一次就发送一个请求.把点击的坐标发送x,y值记录下来.
Posted in 代码 Leave a comment
静态文件打包遇到的问题
我们常将静态文件合并
如将样式1.css,2.css合并为pub.css
因为1.css文件开头制定了@charset “utf-8″; 所以两个文件合并后pub.css里面就会有下面代码
.box{}@charset “utf-8″;.l-clear{height:10px;}
这里就出现问题了,一个样式文件中又制定了编码.会引起编码后面这段.l-clear在safari,mac的firefox下都失效.
Posted in 代码 Leave a comment
拖拽模块
曾经有个项目要做页面区域拖拽功能,像百度自定义首页一样
功能点:
1.拖拽区域到制定位置,然后插入区域放到被插入区域的前一个节点
2.如果用户不登录,就也能记录上次的位置.
开始做时没思路,就看了这个很多类似网站,不过最好的还是这家的http://www.netvibes.com/.
有几点比较重要记录下来:
1.建立每个拖拽对象new Drag,这里就像mootools
曾经有个项目要做页面区域拖拽功能,像百度自定义首页一样
功能点:
1.拖拽区域到制定位置,然后插入区域放到被插入区域的前一个节点
2.如果用户不登录,就也能记录上次的位置.
开始做时没思路,就看了这个很多类似网站,不过最好的还是这家的http://www.netvibes.com/.
有几点比较重要记录下来:
1.建立每个拖拽对象new Drag,这里就像mootools里面的drag,他的结构也是有onstart,ondrag,oncomplete等.再给每个方法添加了自定义事件.在这个基础上写一个drag的扩展,用来根据具体的页面业务添加独特的事件.比如oncomplete时怎么办,ondrag时怎么办?
2.cookie的使用,因为记录每个模块的坐标要写到cookie里面,做到后来发现cookie太大了,yslow里面直接把reduce cookie size打成了F.作到这也没法改了,以后注意.慎用cookie.
Posted in 代码 Leave a comment
框架里js功能的扩展
刚做前端是，开发是搞java的，一年过去了对没太多感觉，前后端分离做的相当的好，我看java代码的次数还没在学校多。
现在换部门了，项目是php的，搞了正好半年，深深的喜欢php，开始自己搞搞php，搭个某某东西出来。
开始为了好玩，兴趣。直到有一天我突然发现，js框架里面的东西很多和php语句很像。我专门开始花时间研究。
有人说php比asp好用，是因为他内置了很多函数。其实我们使用js框架也是一样，我们在用他的内置函数。方便，快捷。
我们都知道php出道时间比js框架早，05年那会js框架才慢慢兴起。现在的框架很多定义都模仿了php。比如foreach,或对数组的功能的扩充。这里其实是js框架中的一部分，对js功能的扩充。
一个框架还有几部分(借鉴克军的)：
浏览器兼容，dom，event
数据层（ajax等）
交互组建
相对来说，对js功能的扩充还是比较简单的,其他几个都要求对浏览器差异，事件机制有着深入的了解。
Posted in 代码 Leave a comment
航母建造史
航母建造的历史最显著的一点是航母越造越大，从40年的xxxxx吨，到现在的xxxxxxxxxx吨。以至于后来已经很少有那么大型的船坞来建造这些庞然大物了。分工复杂，建设周期长，一环扣一环是航母建造的特点。
上周看了一篇帖子《Nicholas C. Zakas如何面试前端工程师》，里面前端基本技能这些我觉得没什么说的，是该这样，不过还有一点他没有提出来，这点也是我本文主要阐述的。
模块化，工业化是前端必须要有的意识，如果没有，再好的前端只能是个技师罢了。他再牛逼，也就他一个牛。在大公司，我们做的项目大，时间紧，前端作为ued的最终产出。交付时间点，质量等出现问题都是前端来背的。
回 到航母的建造，如果没有工艺的改进，工程学的提高，航母的设计师设计再大的船也是没法实现的。同样，如果前端工艺不提高，前端开发不采用工业化方法来进 行，我们的设计实现周期会变长，前端的投入产出比会变低。这时你就是再牛逼的前端有什么用？老板还是会觉得不满意。一个人的产出是有极限的，提高团队的产 出，模块化开发才是根本。
具体来说，模块化开发，提高团队产出是：
1.处理需求第一考虑的是他的业务背景，需求所处的环境，他下次会是什么样子。他今后会有哪些变化。了解清楚这些后，你才能确定这个东西是临时的，还是要做成一个模块，它属于的哪个大系统下。
2.带动团队里的每个人都有这样的意识。这里包括视觉，前端，交互，开发。
Posted in 代码 Leave a comment
静态文件打包和自动时间戳
静态文件是前端开发的根本，和巧妇难为无米之炊一样。它是前端工作的成果载体。
静态文件一直以来是静态存在的，单独的css,js,img。这些都给维护带来了很大的不便。前端有时很讨厌那些静态的零碎的东西，他会引起很多问题。
例如：
1）时间戳：你修改了一个样式文件，涉及到的n多页面，都要把它引用时间戳改掉。如果漏了，发布后，不懂技术的同事就来说样式乱了，页面错位了，这时你只能说，清一下缓存吧。从我做前端开始到现在，每次发布都或多或少遇到这样的额问题。
2）管理零散的样式和脚本文件：前端将设计转化为工业化生产，于是我们就会做组建，做模块，这些零碎的静态资源再组合拼装成我们最终的页面。如何管理这些组建也是需要有个系统来控制，不然全靠手动就乱套了。
面对这种问题，yui产出了yui.loader，实现了在页面上方便快捷的调用组建。
在这第四届D2之前，我在项目中经常遇到发布时，改很多时间戳，组建过多不好管理的问题。于是想办法解决。
这个方法很快就想到了，没多复杂。最终靠着牛逼的韩强同学用python把这个实现了.部署到php环境的项目中,以后再也不用改一次静态文件,就改相关的时间戳了.发布变的轻松很多.能让机器做的事情.干嘛要手动来呢?
下面是这套东西的工作原理：
页面中涉及到的组件很多，比如有4个组件，这四个组件分类有它自己的js和样式，我们有个总控文件来配置这些该页面所有的组件。在本地这些文件是一个个独立引用的。到线上时，我们就从配置文件里把它们找出来打包成一个，再压缩。每次修改一个静态文件，比如样式,js等就自动将涉及到该组件的所有页面静态文件时间戳+1。
具体来说就是这样。
<source var=”address_up” src=”pub/add1.js” version=”1″ type=”js” name=”这是页面address_up.html用到的静态文件”>
<one src=”js/1.js” version=”1″></one>
<one src=”js/2.js” version=”1″></one>
</source>
假设页面里我们用到了两个js文件,js/1.js和js/2.js，这里就是一些拆分的组建。引用时只需要写类似$address_up 就可以在页面中打出
<script src=”js/1.js”></script><script src=”js/2.js”></script>
而在线上环境，这两段js会被合并成一个压缩版的<script src=”pub/add1.js?version=1″></script>
我在本地更改一次js/1.js或js/2.js，打包后的pub/add1.js时间戳就会加1,变为pub/add1.js?verson=2。
这就是打包和自动时间戳的原理。后来参加d2，看见有人说也做了自动时间戳，不知道他们是怎么处理。
Posted in 代码 Leave a comment
CMS