welefen的随笔

月度存档: 九月 2010

YQL & BQL?

IN:前端开发   标签: , ,    评论: 0

YQL介绍

YQL(Yahoo! Query Language)是一种支持对互联网上的数据进行查询、过滤、连接、类似SQL语法的简单语言,主要是方便前端对一些数据接口的快速调用,不用记住非常繁杂的URL。

YQL类似于包括XPath/XQuery, 微软的LINQ, google的GQL, Facebook的FQL, 以及Amazon SimpleDB的查询接口和CouchDB等大多数的现代查询语言。

YQL就像一个超大的数据库,从理论上,这个数据库可以包含整个互联网上的信息。无论您是要基于各种API操作数据,还是从feed源(如RSS, XML,ATOM)获取数据,甚至是从指定的HTML页面上抓取结果,您所需要的就是使用YQL这种类似SQL的简单查询语言:

SELECT something FROM table_name WHERE some_field=some_value

使用YUI里的YQL

Yui 3.2.0版本里已经内置了YQL组件,使用方式很简单,加载seed文件,然后调用yql就可以了。

<script src=”http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js” type=”text/javascript”>

YUI().use(‘yql’, function(Y) {

Y.YQL(‘select * from weather.forecast where location=90210′, function(r) {
var results = r.query.results
//use result do something
});

});

YQL前端实现方式

yql的前端实现方式非常简单,主要就是将sql发送到一个特定的代理页面,可以手动指定,如果没有指定的话则使用默认的。 继续阅读 »

09-20
2010

如何减少代码上线过程中对线上服务的影响

IN:前端开发   标签: ,    评论: 1

目前现状

在一些大公司中,每个服务几乎都有CDN,也就是说一个服务都有很多很多的服务器。并且一般做服务优化的话往往是把程序和静态资源放在不同的服务器上。

在实际开发中,一般是按功能将代码分成不同的模块。上线时OP一般是一个模块一个模块的上线。虽然上线时是并行上线的,但每个模块以及模板与静态资源生效是有时间差的。尤其是模块之间依赖程度很高,如:模板和静态资源依赖程度很高,上线有时间差极有可能出现JS报错或者一些点击不能响应。 所以在上线这个时间差内,用户在操作过程中极有可能出现问题。

解决方案

改变已有的一个模块一个模块的上线方案,而是先将所有要上线的文件都传到各个机器上去,并不是直接覆盖线上文件,而是通过一个的规则成为新建的文件。

如:我要上线覆盖的文件夹为 vote,那么先将代码都拷贝到vote.online文件下(各个机器),其他模块的代码拷贝到其他对应的文件夹下。待所有要上线的代码都准备好后,然后执行mv的操作,将要上线的代码覆盖到真正的文件夹下。在这个过程中,虽然要有时长,但这个时间要小很多。

借助自动化上线,这种方式要比现有的上线要快很多。上线时间差越小,对线上服务的影响越小。

特殊情况

上面讲的方式虽然将时间差缩小了很多,但还是有一些很小的时间差。对于一般的服务大家都是可以接受的,但对于一些交易类的服务(如:电子商务,金融),这种时间差还是不能接受的。对于这种要求非常严格的服务估计还是只能夜里停服务上线了。

09-09
2010

如何减少前端异步请求的数量

IN:前端开发   标签: , ,    评论: 1

开发模式

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

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

实现方案

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

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

实现代码

if(typeof Space == ‘undefined’) window.Space = {};
Space.asynJs = function(){
var _isStart = false,
stack = [];
function start(){
if(_isStart){
throw new Error(‘asynJs request is start.’);
return false;
}
_isStart = true;
for(var i = 0, len = stack.length; i < len; i++){
if(!stack[i]) continue;
//如果该组只有一条记录,就不用走通用代理了。
if(stack[i].length == 1){
baidu.sio.callByServer(decodeURIComponent(url));
}else{
var url = ‘url[]=’ + stack[i].join(‘&url[]=’);
baidu.page.loadJsFile(‘http://hi.baidu.com/st/asynproxy.php?’ + url);
}
}
}
function load(url, group){
group = group | 0;
!stack[group] && (stack[group] = []);
stack[group].push(encodeURIComponent(url));
}
return {
load:load,
start:start
}
}()

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

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

PHP端的实现

//url is array
$urls = $_GET['url'];
//经过白名单过滤后的URL
$urls = apply_domain_filter($urls);
//实例化Curl类
$curl = new Curl();
$contents = array();
//这里实现的时候可以使用并发处理
foreach($urls as $url){
//需要配置对应URL的transmit
//请求时带上传递过来的Cookie
$contents[] = $curl->get($url, $_COOKIE);
}
echo join(‘;’, $contents);
?>

额外的收益

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

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

风险

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

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

09-07
2010
loading...