welefen » 百度 http://www.welefen.com 风为人世在，在世人为风。 Thu, 09 Sep 2010 11:29:24 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 如何减少前端异步请求的数量 http://www.welefen.com/reduce-asyn-request.html http://www.welefen.com/reduce-asyn-request.html#comments Tue, 07 Sep 2010 01:57:25 +0000 welefen http://www.welefen.com/?p=341 开发模式

在前端开发中，一条很重要的优化原则就是减少HTTP请求数。但在实际开发中，有时候不得不用大量的异步请求。这里的异步请求所指的都是页面加载时的，之后用户操作过程中所发生的异步请求并不影响加载的速度。

在百度这边，由于FE需要写模板。所以很多时候有些功能如果有接口了，RD同学就要你使用异步接口。但异步接口使用多了就会影响页面的性能。比如说百度空间个人中心在页面加载时差不多要处理10个异步请求。这个数量是非常大的。如果减少这些异步请求的数量成为了优化的重点之重。

实现方案

目前想到一条比较可行的实现方案是通过一个公用的代理页面，前端在处理时将这些异步请求分组去处理。代理页面获取到打包的URL，然后服务器端去请求，最后将合并后的数据输出。

在服务器端去请求，由于数据是服务器对服务器的，数据网络传输时间可以忽略不计。

实现代码

  1. if(typeof Space == 'undefined') window.Space = {};
  2. Space.asynJs = function(){
  3.     var _isStart = false,
  4.         stack = [];
  5.     function start(){
  6.         if(_isStart){
  7.             throw new Error('asynJs request is start.');
  8.             return false;
  9.         }
  10.         _isStart = true;
  11.         for(var i = 0, len = stack.length; i < len; i++){
  12.             if(!stack[i]) continue;
  13.             setTimeout(function(){
  14.                 //如果该组只有一条记录，就不用走通用代理了。
  15.                 if(stack[i].length == 1){
  16.                     baidu.sio.callByServer(decodeURIComponent(url));
  17.                 }else{
  18.                     var url = 'url[]=' + stack[i].join('&url[]=');
  19.                     baidu.page.loadJsFile('http://hi.baidu.com/st/asynproxy.php?' + url);
  20.                 }
  21.             },0)
  22.         }
  23.     }
  24.     function load(url, group){
  25.         group = group | 0;
  26.         url = encodeURIComponent(url);
  27.         if(!stack[group]){
  28.             stack[group] = [url];
  29.         }else{
  30.             stack[group].push(url);
  31.         }
  32.     }
  33.     return {
  34.         load:load,
  35.         start:start
  36.     }
  37. }()

该实现方式就是提供了2个方法load和start，load用于填充要请求的异步接口，start在页面底部启动请求。因为页面一般都分成头，中，尾3个部分，所以start方法可以在尾部文件里直接调用就可以了。

  1. Space.asynJs.load('http://pageurl1', 1)
  2. Space.asynJs.load('http://pageurl2', 1)
  3. Space.asynJs.load('http://pageurl3', 2)
  4. //在页面最底部启动请求
  5. Space.asynJs.start();

PHP端的实现

  1. <?php
  2. //url is array
  3. $urls = $_GET['url'];
  4. //经过白名单过滤后的URL
  5. $urls = apply_domain_filter($urls);
  6. //实例化Curl类
  7. $curl = new Curl();
  8. $contents = array();
  9. foreach($urls as $url){
  10.     //需要配置对应URL的transmit
  11.     //请求时带上传递过来的Cookie
  12.     $contents[] = $curl->get($url, $_COOKIE);
  13. }
  14. echo join(';', $contents);
  15. ?>

额外的收益

目前一些框架(tangram)里domready时执行一些函数时并没有提供函数排序的功能，这样就不能实现重要的异步请求先加载不重要的请求后加载的功能。目前百度空间app平台这边实现方式是通过setTimeout延时来执行。如果设置的时间较短，各个浏览器表现的不一样。如果设置的时间比较长，有会影响页面加载的时间。

通过现在的这种方式后，不光实现了异步接口分组的功能，同时实现了重要的先加载，不重要的后加载。
先加载的东西只要第二个参数传值小一些就可以了。

风险

由于通用代理管理的是获取URL然后请求的工作，所以如果在后端不做一些判断的话可能引发一些风险，甚至XSS漏洞。目前想到的主要是2点。

1、通用代理要判断域，非白名单制定域不予请求
2、返回时必须设置header为application/javascript来阻止直接请求的XSS漏洞

]]> http://www.welefen.com/reduce-asyn-request.html/feed 0 回顾2009 http://www.welefen.com/%e5%9b%9e%e9%a1%be2009.html http://www.welefen.com/%e5%9b%9e%e9%a1%be2009.html#comments Thu, 31 Dec 2009 15:35:36 +0000 welefen http://www.welefen.com/?p=220 2009马上就要过去，2010马上就要开始。在展望新的一年的同时，回顾下我在2009年的变化。

一切从年初开始说起。。。

杭州的故事

继去年的惨淡经历后，混迹于杭州，继续在阿里巴巴做前端开发外包工作。

但心里暗下决心，2009我一定要改变什么，不然就废弃了，到了2010估计就没奋斗的决心了。

但由于某些方面的特殊性，又不能太果断的换工作，对我来说找一份新的工作太难了。

虽然每天上下班要在公交车了呆4个小时，但始终疲惫的坚持着。

6月份获知阿里巴巴要在8月初搬到滨江的新大楼。

这样我上班就更远了，给我一种换工作的准备。

正好在blueidea看到上海的一个外企在招前端开发工程师的职位，想到外企应该在某些方面不是很严，于是乎就投了简历。

今天下来就收到了offer，一个月后告别杭州，去了上海。

这样终于告别了再阿里巴巴的外包工作，感叹他们在某些方面太严。

自己虽然不是个特别优秀的人才，但比他们招进来的一些人还是稍微强一些的，一切都是个杯具。。。一个大杯具

在这里要特别感谢冯婷，她给了我很多的帮助。她弟弟也为我做了件特殊的事情。

上海，新的开始

记得当天去的时候，还没找好房子，当天晚上是住在宾馆的，第二天就要上班。

就这样加盟到lexisnexis上海分公司。

上班后，正式加入到了一个新的团体，虽然这个团体不是很强，但还是希望自己尽快融入到他们中。

计划是这里是新的开始，要在这里好好发展。

经过自己的努力，第二个月就拿到了优秀员工奖，是一种鼓励，也是一种安慰。

一个小小的遗憾就是，在这里并不在单单做前端开发的工作，更多的是做PHP方面的开发。

自己做饭，午餐吃自己带的便当，平平淡淡，身体要好很多。

生活很有规律，吃早餐，喝牛奶，早睡早起。。。一切都很好

国庆节回了趟杭州，因为家人都在那边。

回来后发现金大为在QQ上给我留言了，说有事找我。

说百度前端在招人，要我给个简历给他。

慢慢等待，经理面试，技术面试，经历了一个多月。

这一个多月是在担心和紧张中度过的。

这还只是个开始。

突然有一天，我们经理说，要给我转正，因为我差不多来了三个月了。

一边是百度的offer还没来，一边是上海这边的经理要给我转正。

转正后离职就要一个月了。

在办理转正手续前一分钟，终于说出了辞职。

大家都一愣一愣，感觉对不起他们。

这里要感谢金大为，没有他的推荐，就没办法来百度。

北京 – 跌倒后再爬起

12.2号加入到百度。

去年就是从北京跌倒的。

去不了百度，去不了新浪，只能回家休养一段时间。

今年我又回来了。

并且看上去不是太糟。

愿一切继续好下去，不指望有太好的成就。

因为我折腾不起。。。

好好发展，慢慢发展，坚持。。。

结语

再次感谢冯婷，金大为。

感谢JerryQu，阿贵。

2009，他们在工作上给了我很大的帮助。

感谢一切给我帮助的人，愿你们一切都好。

愿大家都有个好身体，不要瞎折腾。

]]> http://www.welefen.com/%e5%9b%9e%e9%a1%be2009.html/feed 7