这是前些天在公司的技术交流上做的总结，有些东西没有深入的讲。

前几天在组内群里让大家参加这周末的webrebuild前端交流会， 之后顺便把目前已有的跟前端相关的一些交流会整理了下，主要有下面一些：

• D2前端技术论坛  http://www.d2forum.org/
• WebRebuild   http://www.webrebuild.org/beijing/
• Web标准化交流会  http://www.w3ctech.com/
• Qcon全球企业开发大会 http://www.qconbeijing.com/
• Velocity Web运维和性能大会 http://velocity.oreilly.com.cn/
• 百度技术沙龙 http://www.infoq.com/cn/zones/baidu-salon/
• HTML5技术分享沙龙 http://www.mhtml5.com/events

之前写过如何减少代码上线过程中对线上服务的影响，文中提到的方法是将所有的代码上到服务器的一个临时目录，然后一起操作cp到目标目录。这种方式虽然可以大大的减少上线过程中对线上服务的影响，可以影响时间缩短到2分钟以内。但对于0故障的服务来说，2分钟的服务故障还是非常不能接受的（比如：百度新首页）。

由于静态文件和模版是上到不同的服务器，静态文件还部署到CDN。模版是和后端代码放在一起。这样如果还是原文件名的不能彻底解决问题。

我们知道，任何的静态文件最开始都是在模版里引用了才生效，比如：在模版里有个link，或者有个外链的script。

通过分析，如果上线的时候，将静态文件先上，并且将有改动的静态文件全部重命名的话就可以彻底解决这个问题。一方面静态文件重命名后不会干扰线上正在使用的静态文件，另一方面模版还没上的时候，这部分新的静态文件将不会引用，待模版上线后就会全面切到新的静态文件模式下。

继续阅读 »

新百度首页经过2个多月的内测昨天晚上终于全流量开放了，登录后就能看到新首页。并且成为百度2011世界大会的主角，由此今年的百度世界大会的主题为《耀在百度首页》。

这次新首页除了保留原有首页的所有功能外，特意添加了导航、实时热点、应用和新鲜事。

继续阅读 »

什么是百度统计热力图

热力图可显性、直观地将网页流量数据分布通过不同颜色区块呈现，给中小网站网页优化与调整提供了有力的参考依据，方便合作网站提高用户体验。

继续阅读 »

如果你是国外的用户，或者是国内的用户用了代理，或者是国内的用户但IP比较新(主要是IP数据库貌似有段时间没更新了)，你会发现无法使用百度音乐盒。

使用的时候会弹出如下的内容：

对不起,我们的服务只能提供给中国内地的用户
Sorry,our current licence does not allow playback in your current territory

继续阅读 »

开发模式

在前端开发中，一条很重要的优化原则就是减少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漏洞