Updates from 五月, 2010

  • Discuz! X1.0正式版发布

    shishirui 21:48 on 2010/05/19 | 1 Permalink | Reply

    Discuz! 一直以来是公司的核心产品,这次的X系列,更是 Discuz! 历史上的一个里程碑,希望大家支持。

    专题页面:http://www.discuz.net/topic-x1.html

     
  • 正则表达式技巧分享PPT

    shishirui 23:56 on 2010/05/14 | 2 Permalink | Reply

    我们manyou部门每两周会做一次技术交流会,这次轮到我,这是我今天为部门的同事们分享的一些关于正则表达式的使用技巧,这是分享时用到的PPT文档,在这里一起分享给大家。

    下载:正则表达式技巧分享

     
  • 监控宝招聘

    shishirui 11:11 on 2010/04/15 | 3 Permalink | Reply

    朋友的公司在招人,工作地点在北京中关村,条件很不错,感兴趣的朋友可以去尝试一下。

    监控宝:http://www.jiankongbao.com/
    联系方式:job#jiankongbao.com

    以下是职位信息:

    PHP开发工程师(高级)

    职位要求:
    有深入研究复杂问题、得到较好解决方案并最终解决问题的能力。
    精通PHP,能够编写出正确简洁并且有效的Web程序。
    对你的工作保持热情。
    熟悉HTML/CSS/Javascript/Ajax/jQuery,精通其他技术优先考虑。
    精通网络协议如HTTP,TCP/IP和DNS。
    有两年以上的PHP开发经验。

    Linux系统管理员

    职位要求:
    熟悉Linux/Unix常用服务的安装配置与使用。
    对网站安全结构,系统漏洞、入侵检测、病毒防护、防火墙等有丰富的实践经验。
    能深入探究复杂问题以及提供简洁并且务实的解决方法。
    具有服务的态度, 对于能完整地解决别人的问题感到很刺激。
    能在较大压力下工作,具有良好的团队精神和工作热情。
    对于各种主流服务器,了解性能监控和优化。

    增值业务产品经理

    职位要求:
    熟悉互联网基础服务产品,有过相关的工作经验。
    有技术专家背景优先考虑。
    自认为对互联网产品设计有特别的直觉。
    精通互联网营销规则。

     
  • Javascript常用优化方法

    shishirui 12:07 on 2010/03/06 | 0 Permalink | Reply

    对于Javascript的代码速度,我们一般可以将它分为下载时间和执行速度两部分,所以,要做优化的话,我们可以从这两部分来入手。

    一、优化代码下载速度

    1. 在单个TCP-IP包中,最多能放入的字节数是1160,所以每个js文件的字节大小,最好不要超过这个数,以便获得最优的下载时间。
    2. 合并js文件。如果一个页面中存在加载多个js外部文件的情况,则最好将它们合并为一个,这样可以有效减少HTTP请求数,从而节省下载时间。
    3. 为外部js使用不同的域名。我们知道,浏览器在下载页面时,对于同一个域名下的最大并发数是一定的(例如IE6/7在HTTP1.0下是2个,而Firefox3是6个),所以,假如前端页面的域名是www.phpblog.cn的话,外部js文件的域名可以改为js.phpblog.cn,这样做就可以使浏览器在js.phpblog.cn域名上也使用最大并发数下载,从而加快下载速度。(以上只是拿我的域名作为例子,目前我的站点还没有这样做)
    4. 浏览器缓存。在页面中引用的外部js文件是可以被浏览器缓存的,缓存时间由服务器发给客户端代理头部中的Last-modified、Etag或者Expires决定,所以缓存的时间长短,也成了优化速度的一个方面。我建议将js的缓存时间设置的较长,而如果一旦更改了js文件后,可以在引用url的js文件后加个自定义参数,来强迫客户端重新下载js。例如:

      <script src="http://js.phpblog.cn/jquery.js?var=2.0" type="text/javascript"></script>

    5. 删除代码中的注释、制表符、空格、换行,这样做可以有效减小 js文件的体积。我们可以使用现成的工具来做这件事情,例如我之前介绍过的Google Closure Compiler
    6. 替换变量名,将较长的变量名替换为较短的变量名,以减少js文件体积。这方面,用Google Closure Compiler也可以完成。
    7. 替换布尔值。我们知道,对于比较来说,true等于1,false等于0。因此,在脚本中的true、false都可以用1和0来代替,这样可以减少几个字节。
    8. 使用数组和对象字面量。例如,定义数组时,使用var o = new []而不使用var o = new Array;定义对象时,使用var o = {}而不使用var o = new Object,它们是完全等价的。

    二、优化代码执行时间

    1. 关注变量范围。在js中,变量范围是很重要的。我们可以认为变量的范围在浏览器中是一个树状层级,查找一个变量时,浏览器首先会在最近的范围中查找,如果没有找到,则会到它的父范围中查找,如果还没有找到,则再去父父的范围中查找,直到查找到window对象范围(浏览器默认的全局变量属于window对象)。这就说明,让浏览器最快的找到变量,就可以加快代码的执行速度。在js中,使用var定义的变量为局部范围变量,而不使用var定义的变量属于全局范围变量,所以,如果我们在某个方法中用到的变量,一定要将它定义成局部变量,这样就不会使浏览器一直找到window对象才获得该变量。和变量范围有关的另一个优化技巧就是,不使用with语句。因为with语句会创建另一个范围,增加了不必要的查找。
    2. 反转循环。在使用for循环时,我们经常这样用:

      for(i=0; i<100; i++) {}

      但是,你需要知道,将循环反转后,它的速度将更快:

      for(i=100; i>=0; i--) {}

      这是因为,使用常数0来做为判断依据速度更快。当然,使用while循环也可以反转(变换成do..while),具体方法,我就在这里不再赘述。

    3. 除了反转循环,我们还可以使用循环合并,来进一步提高循环的速度。关于循环合并的具体方法,我在这篇文章里已经介绍过。这里要特别说明的是,while循环也可以合并,方法和反转循环一样,也是使用do...while来替。
    4. 使用js的内置方法。例如,我们要计算一个数的阶乘,假如你不知道Math对象有个pow()方法的话,你很可能会自己写一个阶乘计算函数,但是要知道,这样做的效率是远远不如直接调用内置方法Math.pow()的,因为内置方法是用C++或C语言编译过的,速度要远远高于解释运行的js。
    5. 字符串连接优化。使用"+"来连接字符串的效率是很差的,尤其表现在一次连接多个字符串时,例如:

      var s = "a" + "b" + "c" + "d";

      因为此时js内部会进行多次连接操作,从而导致效率的下降。为了避免这个问题,我们可以使用Array.join()方法来代替:

      var a = ["a", "b", "c", "d"];
      var s = a.join();

    6. 存储常用的值。在js中,访问某个对象的属性,从效率上来说,都是非常昂贵的操作。所以可以将多次用到的值存储到一个变量里。例如,下面这个代码速度较慢:

      o1.style.left = document.body.clientWidth;
      o2.style.left = document.body.clientWidth;

      而下面的代码速度较快:

      var left = document.body.clientWidth;
      o1.style.left = left;
      o2.style.left = left;

    7. 在js中,脚本中的语句越少,执行速度越快。基于这个原则,我们可以知道,使用一个var来定义多个变量,要快于多个var定义。例如:

      var a = 1, b = 2, c = 3;

      要快于:

      var a = 1;
      var b = 2;
      var c = 3;

      同样,以下的代码:

      var s = a[i++];

      要快于:

      var s = a[i];
      i++;

    8. 节约使用DOM。在用js改变页面上任何一个元素的样式时(或者增加删除元素),都会导致浏览器重新渲染页面,这个开销是不小的。因此,在连续多次操作DOM时,我们可以先将所有变化保存到DOM碎片(fragment)中,然后再一次性操作页面DOM。例如:

      var arrText=["1","2","3","4","5","6","7","8","9","10"];
      var oFrag=document.createDocumentFragment();
      for(var i=0;i
      {
      var op=document.createElement("P");
      var oText=document.createTextNode(arrText[i]);
      op.appendChild(oText);
      oFrag.appendChild(op);

      }
      document.body.appendChild(oFrag);

    以上这些,只是我知道的一些优化方法,当然,js中的优化方法肯定不止这一些,我只能是抛砖引玉,更多的方法,还需要大家一起补充。

    转载请注明出处:http://www.phpblog.cn/archives/328

     
  • Google Wave邀请分享

    shishirui 13:42 on 2010/01/31 | 0 Permalink | Reply

    很久以前我们老大给过我Google Wave的邀请,当时玩儿了几天,后来就渐渐忘了这个东西了。今天突然想起,上去一看,wave生了小弟了,一共35个邀请,有感兴趣的朋友吗?如果有,请留下您的Gmail账户,我会在看到后第一时间发送邀请。Google Wave地址: https://wave.google.com

     
  • 使用Google的Closure Compiler来压缩javascript

    shishirui 14:43 on 2010/01/15 | 0 Permalink | Reply

    Closure Compiler是一个google出的用来压缩、检查javascript的工具。其项目地址在:http://code.google.com/closure/compiler/

    Closure Compiler的使用方法有如下3种:

    1. 在命令行下使用一个google编译好的java程序
    2. 使用google提供的在线服务
    3. 使用google提供的RESTful API

    下面我来分别介绍一下这3种方法的具体使用。

    1. 在命令行下使用一个google编译好的java程序

    这种方法最适合在linux命令行下开发的同学们。首先在 http://closure-compiler.googlecode.com/files/compiler-latest.zip 这里下载编译好的Closure Compiler,下载后,随便解压缩到一个目录,比如解压到当前用户的根目录:

    $ unzip compiler-latest.zip -d ~

    这时,除了几个说明文件外,还会有一个叫compiler.jar的文件出现,然后,我们就可以直接使用它来压缩,例如:

    $ java -jar ~/compiler.jar --js my_source.js --js_output_file my_package.js

    这样,就把 my_source.js压缩成my_package.js了。经过我的测试,压缩率较别的压缩工具来说,还是相当高的。

    如果想知道其他的可选参数,可以输入如下命令获得:

    $ java -jar ~/compiler.jar --help

    在压缩过程中,它还会告诉你的js文件中出现的错误,以及不建议使用的语法等,比如说不建议使用with语句,以及不建议使用没有大括号的if/while/for等等。

    2. 使用google提供的在线服务

    这种方法是最直观也是最容易使用的,但是缺点是麻烦,速度慢,而且不太方便压缩比较大的文件。

    使用方法为直接打开浏览器访问 http://closure-compiler.appspot.com/(可能需要翻墙) ,然后在里面的文本框中输入你想要压缩的js,然后点Complie按钮即可。

    3. 使用google提供的RESTful API

    这种方法比较灵活,但缺点也是无法压缩较大的文件(压缩本地文件时)。使用时,同学们可以使用自己擅长的语言,参考google 的 RESTful API文档编写自己的压缩器,API文档见 http://code.google.com/closure/compiler/docs/api-tutorial1.html 。原理大概就是将需要压缩的js内容或js文件所在url,以及必要的配置信息发送给google的服务器,然后接收google的响应,响应结果即为压缩后的内容。

    同学们可以在这3种方法中自己选择喜欢的方法。但我个人更喜欢使用第一种方法,因为不仅没有文件大小限制,而且速度很快。

     
  • iphone网页制作要点

    shishirui 20:19 on 2009/07/21 | 0 Permalink | Reply

    禁止页面缩放:

    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    打电话链接的写法:

    <a href="打电话给你">21-12345678</a>

    自动滚屏隐藏地址栏:

    <script type="application/x-javascript">
    addEventListener("load",function() {
    setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar(){
    window.scrollTo(0, 1);
    }
    </script>

     
  • css中类似pre的样式

    shishirui 20:22 on 2009/07/14 | 0 Permalink | Reply

    /* 不自动换行 */
    white-space: pre;

    /* 自动换行 */
    white-space:pre-wrap;

     
  • CSS的阴影效果

    shishirui 19:14 on 2009/07/11 | 0 Permalink | Reply

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

    注:IE无效

     
  • Browser-specific CSS hacks

    shishirui 18:48 on 2009/06/17 | 0 Permalink | Reply

    /***** Selector Hacks ******/

    /* IE6 and below */
    * html #uno  { color: red }

    /* IE7 */
    *:first-child+html #dos { color: red }

    /* IE7, FF, Saf, Opera  */
    html>body #tres { color: red }

    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }

    /* Opera 9.27 and below, safari 2 */
    html:first-child #cinco { color: red }

    /* Safari 2-3 */
    html[xmlns*=""] body:last-child #seis { color: red }

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:nth-of-type(1) #siete { color: red }

    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:first-of-type #ocho {  color: red }

    /* saf3+, chrome1+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    #diez  { color: red  }
    }

    /* Safari 2 - 3.1 */
    html[xmlns*=""]:root #trece  { color: red  }

    /* Safari 2 - 3.1, Opera 9.25 */
    *|html[xmlns*=""] #catorce { color: red  }

    /* Everything but IE6-8 */
    :root *> #quince { color: red  }

    /* IE7 */
    *+html #dieciocho {  color: red }

    /***** Attribute Hacks ******/

    /* IE6 */
    #once { _color: blue }

    /* IE6, IE7 */
    #doce { *color: blue }

    /* Everything but IE6 */
    #diecisiete { color/**/: blue }

    /* IE6, IE7, IE8 */
    #diecinueve { color: blue\9; }

    /* IE7, IE8 */
    #veinte { color/*\**/: blue\9; }

     
c
撰写新文章
j
下一篇
k
上一篇
r
回复
e
编辑
o
显示/隐藏评论
t
返回顶部
esc
关闭