welefen的随笔

如何利用CDN进行全网加速

IN:性能优化   标签: , , ,    评论: 3

CDN是什么?

CDN即内容分发网络,主要功能是加快网络数据传输,让用户尽快的看到所需的内容。 不清楚的同学可以继续看百科里的介绍。http://baike.baidu.com/view/21895.htm

同时Yslow和pagespeed也把CDN作为一条很重要的性能优化法则。

CDN目前做的事情

一般国内的大公司现在都已经建设了自己的CDN服务,如:百度、淘宝、腾讯。

目前主要功能是加快静态资源的传输,如:JS\CSS\图片。尤其是图片服务,由于数据量非常大,非常依赖CDN的加速。

仔细想想,其实还可以利用CDN做更多的一些事情。

继续阅读 »

12-31
2011

使用xhprof分析PHP的性能瓶颈

IN:PHP   标签: , , , ,    评论: 0

最近利用空闲的时间准备对Fl进行重构,Fl是一个支持模版语法(如:Smarty3模版语法)的HTML/Js/Css解析,压缩,美化,检测等工具。关于Fl的更多信息你可以从github上了解。

但是重构完HTML的解析之后,在使用simpletest进行单元测试的时候,使用豆瓣首页的源代码发现比较慢,发现需要1.5s,但在第一个版本中只要200ms就解析完了,这个差距是完全不能接受的。虽然这次重构对很多方法进行了抽象,但应该不至于直接导致这么慢。

之前看过可以使用Facebook开发的xhprof来分析PHP的性能,安装了下分析后终于发现了直接影响到性能的瓶颈。xhprof的安装网上有很多教程,这里就不在说明了。 这里就有个安装的教程: http://hi.baidu.com/thinkinginlamp/blog/item/f4bd08fa1a03ba9e59ee90fd.html

 

继续阅读 »

12-10
2011

velocity性能大会总结

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

12.6 – 12.7 有幸在部门的支持下参加了velocity性能和运维大会,下面对这2天听到的一些内容作一些简单的总结。

12.6部分

1、低功耗服务器定制与绿色计算

淘宝介绍了如何和厂商合作定制一些特殊的服务器,并且由于淘宝服务的特殊性(大量的图片服务),在全国部署了103个CDN节点,通过定制和绿色计算,将每个CDN节点的费用由50W降低到37W。

提出了分层存储机制(Memory+SSD+SAS+SATA),根据资源的大小以及活跃度存储在不同的节制上,从而实现性能和开支的平衡

同时提出了开源绿色计算(http://www.greencompute.org),里面提供了淘宝服务部署的相关文档以及他们建议的一些规范。

感悟: CDN部署的一些经验对于一些大公司以及准备作CDN部署的公司还是非常有用的,也很多可以借鉴的地方

2、如何利用HTML5开发高性能的游戏

在大canvas上画小canvas,把image放在小canvas上,而不是直接放在大canvas上

用webkitRequestAnimationFrame替代传统的setTimeout

http://www.enjoyhtml5.com/上有一些HTML5的文档

感悟: 没时间内容,本身时间也比较短,感觉就是一个过场

3、移动互联网应用的性能优化

这个是来自Facebook的David Wei作的分享,自去年分享BigPipe一站成名后,今年带来移动方面的性能优化。

主要介绍了移动应用性能上的一些挑战,具体不太记得了。。。。

4、Node.js NAE (APP Engine)

这里介绍的是淘宝使用NodeJS搭建的APP Engine,主要是产品介绍和推广。不过国内使用NodeJS做这个事情的目前只有淘宝一家。

感悟: 淘宝勇于使用一些新东西并且将这些新东西开放还是非常值得尊敬的。

5、使用BigPipe提升浏览速度 —— 流水线技术在新浪微博的实践

旧饭旧炒,几乎没什么特殊的东西,不过参与者还是非常多。

感悟:BigPipe主要勇于服务端处理很慢的情况,对于一般的应用使用可能弊大于利。

6、 Web + Apps,融合之路

一直在讲QQ群右上角的展现,实在不耐烦了没听完就撤了。

感悟: 不知道后来有没有讲Q+,我想大部分人还是想听到Q+的。

12.7部分

1、 新一代Facebook移动平台

David介绍了下Facebook的移动平台,主要是多终端的展现以及目前移动平台下一些内容。

感悟: 没有太多的新颖点,移动目前还处在摸索的阶段,包括各种工具的匮乏以及开发方式的复杂度等等。需要大家慢慢去探索。

2、大型网站性能监控、测量和故障排除@雅虎

应该是来自台湾的MM分享的,主要是介绍使用常用的性能分析工具,如: yslow, pagespeed, dynatrace, webpagetest等等。

在这次分享大会上全球首次发布了Yslow的命令行版本,目前还是Beta状态,昨天晚上才Build出来的。

命令行版本是使用Http Watch生成har文件,然后通过Yslow分析并给出分析结果。

我提了一个问题: 该命令行工具是否支持需要用户登陆的页面分析,答案是目前还不支持。

感悟: 看来大家都在做相关的事情,工具的使用场景也越来越广泛。

3、 高性能 HTML5

这是Steve本人介绍的,就是一些HTML5新的特性,几乎没什么好说的。

4、机票实时搜索引擎的优化

前端模版的一些优化,中间有一会去听Web应用的加密算法实现缺陷与利用了。

5、 基于 SeaJS 的高性能网站开发和优化实践

前半部分介绍了当前状态下前端开发的一些问题,然后着重在宣传SeaJS来解决这些问题。后半部分是淘宝详情页的一些性能优化手段和心得。

感悟: 前半部分一直在推广SeaJS,感觉有点过了。虽然SeaJS能解决一些问题,但有些方面可能会引发新的问题,并且感觉有些处理上还复杂了。比如:

1、映射到本地: SeaJS是直接修改Path的方式,这方式要求当前Path下的所有文件在本地都要有一份,这种方式在实际开发中可能比使用fiddler将一个文件重定向到本地要复杂的多。并且即使映射到本地也要在本地开启一个webserver,这与之前介绍的只有一个浏览器是不太符合的。

后半部分介绍了优化手段BigRender,实际上就是textarea里放内容延缓解析。

感悟:  淘宝的包装和开源方式还是值得学习的,知道如何将一个技术点包装成一个工具、一个可以拿出来和大家分享的产品。虽然textarea的方式我们去年就在产品性能优化里使用了,但如果让我来说的话,可能一句话就完了,就没有分享的意义了。

其他的一些场次,实在没听到啥东西就不写了。

总结: 本次velocity从内容上感觉没去年的给力,可能是去年FaceBook的BigPipe影响力太广了。不过中午的自助餐相当的不错,有海鲜,有我还爱吃的鸡翅等等。

———————————————————————————————————————————

百度需要更多的开源,更多的使用新技术,渐渐从开发方式中脱离出来。要做到职责比以前更多,效率也要更高,同时还能关注更多的技术。

同时给自己制定了参加明年velocity大会的目标,暂时保密,哈哈。

12-07
2011

这2天的博客访问故障

IN:linux, 我的生活   标签: , ,    评论: 5

这篇文章主要是故障排查的记录,没有什么技术含量,主要供后续查找。

这2天访问博客的时候会出现502的错误,刚开始以为是linode不稳定的原因,重启后发现可以访问了。由于比较忙就没有看具体的原因。

今天早上访问的时候发现又502错误了,登陆上去后通过ps aux | grep nginx发现nginx进程已经不在了,那么为啥nginx的进程被kill了呢?之前一直没有出现过这种现象。

查了下nginx的错误日志,发现了如下的错误:

2011/11/17 09:21:34 [alert] 2275#0: *32 write() to “/home/wwwlogs/access.log” failed (28: No space left on device) while logging request, client: 61.135.165.180, server: test.welefen.com, request: “POST /phpmyadmin/index.php HTTP/1.1″, upstream: “fastcgi://unix:/tmp/php-cgi.sock:”, host: “test.welefen.com”, referrer: “http://test.welefen.com/phpmyadmin/index.php?token=cc9eb811db39300b7d683677a734d98b”

错误信息表示磁盘已经满了,通过du -sh /查看了下,发现/usr/local/mysql/var这个目录竟然占用了16G的空间(vps总空间只有20G),具体看了下,主要是mysql-bin.000001这种mysql的操作日志过大。

mysql-bin.000001、mysql- bin.000002等文件是数据库的操作日志,例如UPDATE一个表,或者DELETE一些数据,即使该语句没有匹配的数据,这个命令也会存储到日志 文件中,还包括每个语句执行的时间,也会记录进去的。

由于只是个人vps,没必要存放这些mysql的操作日志,可以通过下面的方面删除这些日志:

1、编辑/etc/my.conf,把

#log-bin=mysql-bin
#binlog_format=mixed

注释,之后就不再产生操作日志了。

2、mysql -uroot -pxxx 登陆mysql,通过

> reset master;

命令将已有的操作日志删除。

重启相关的服务,在通过du -sh /查看,系统就有很大的剩余空间了。

如果你也用的是类似的vps服务,提醒你也要查看下对应的mysql操作日志的大小了,别让它引起整个服务宕掉。

11-17
2011

【招聘】前端开发工程师(百度)

IN:前端开发       评论: 2

所属部门: 社区搜索部

  • 工作地点:北京
  • 招聘人数:不限
  • 职位性质:技术

工作职责:

-百度各产品线Web端功能设计、开发和实现
-百度各产品线易用性改进和Web界面技术优化
-Web前沿技术研究和新技术调研

职位要求:

-计算机及相关专业本科以上学历
-精通JavaScript、Ajax等Web开发技术
-精通HTML/XHTML、CSS等网页制作技术,熟悉页面架构和布局
-熟练使用Linux系统,对算法、数据结构以及后台开发(C/C++/PHP/Java等)有一定了解
-熟悉W3C标准,对表现与数据分离、Web语义化等有深刻理解
-对Web技术发展有强烈兴趣,有良好的学习能力和强烈的进取心
-良好的沟通与表达能力、思路清晰,较强的动手能力与逻辑分析能力
欢迎大家自荐和推荐,简历请发送到 lichengyin@baidu.com
11-09
2011

前端交流会

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

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

 其中除了Qcon全球企业开发大会和Velocity Web运维和性能大会需要高达2K-3K的报名费之外,其他的交流会都是免费的。
继续阅读 »
11-09
2011

tangram最优定制版codesearch工具

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

tangram是什么

tangram是百度前端开发团队开发的一款JS框架,该框架具有一下特点:

  • 可通过定制创建最适合的轻量级版本
  • 多种机制实现扩展,良好的插件支持
  • 丰富的中文文档以及案例,容易上手
  • 全浏览器跨平台兼容
  • 平滑的版本升级体验

tangram codesearch

tangram codesearch是一个tangram方法定制的工具,他可以定制你需要的tangram方法,将没使用到的方法去除,从而减少文件的大小,提升加载速度。

但在真正开发和使用这个工具的时候,你会发现这个工具很鸡肋,为什么呢?主要有下面几个原因:

  • 项目之初你可能根本不知道你要用到哪些方法,可能只能将一些最基本的方法选定,待开发过程中慢慢去重新定制。这种方式非常耗费时间。
  • 项目之初使用全部的tangram,项目完成时统计使用到哪些方法,然后将这些方法打包。首先统计需要耗费一定的时间,其次升级时都要做这个事情很麻烦。如果有哪个方法不在使用了,可能并不会删除。
由于上面2种定制方式都带来很多问题,所以一般情况下直接使用全量的tangram,不再考虑使用定制的tangram了。
有没有办法解决这个问题呢?
如果有一种工具,可以自动分析开发的代码中使用到哪些tangram方法,然后将这些方法打包,那就可以很好的解决这个问题了。 继续阅读 »
10-21
2011

pjax发布qwrap版

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

之前在制作gplus主题的时候,使用到了ajax+history.pushState,并且把这个功能封装成了pjax,由于当时使用的JS框架是jquery,所以pjax是基于jquery写的。

最近决定写一个基于qwrap的pjax,之前一直没时间弄,昨天终于给弄好了。由于qwrap支持retouch,所以使用上和jquery区别不是很大,拿之前的代码稍微改改就可以了。

下载和使用方式

源代码地址:https://github.com/welefen/pjax

由于pjax里使用了ajax组件,qwrap核心库里是不包含ajax组件,所以需要将ajax打包进来。ajax组件可以使用https://github.com/welefen/qwrap/tree/master/resource/js/wagang/ajax,或者你也可以直接引用这个JS http://www.welefen.com/wp-content/themes/gplus/js/qwrap.js

由于qwrap里不支持live模式和核心包里没有动画组件,所以pjax for qwrap版本默认不支持动画,并且使用方式和jquery版本稍微有些差别,具体如下:

QW.pjax(selector, { //selector一般为a[href="^http://domain"]
    filter: function(){}, //filter函数,将不符合条件的a过滤掉
    container: '#container',
    cache: true,
    storage: true
})

其他使用方式(包括服务端判断方式)都和jquery版本的一样

10-10
2011

在线工具: js/css/html压缩

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

之前为了编译平台写过一个前端语言的分析、检查、压缩工具FL,实际使用中主要用它的检查和支持模版语法的HTML压缩功能。集成在编译平台里一直运行的很好。现在把剥离出来,形成一个单独的JS/css/HTML压缩工具。

javascript/css/html压缩工具地址: http://www.welefen.com/lab/compressor/index.html

目前支持的功能有:

1、使用YUI Compressor或者Google Compiler压缩javascript

2、使用YUI Compressor或者FL压缩css

3、使用FL压缩html。虽然HTML压缩是支持模版语法的,但目录没有开启。如果有人需要的话可以将这个功能开启。

继续阅读 »

10-09
2011
loading...