LaoZhuHome Beta

国内用户体验较好网站

PPanda — Thu, 17 May 2012 08:50:45 +0000

先说我常用的吧：
果壳网：一个科普类网站，不过内容很活泼。
36氪：互联网资讯新闻类站点，类似cnbeta，不过没有cnbeta娱乐。
知乎：很专业的问答类网站
豆瓣：怎么能把豆瓣忘了呢？？

下面是搜集的

风车网：人人网旗下旅游分享类网站
网易轻博客：网易轻博客
点点轻博客：轻博客
新浪轻博客：新浪轻博客
Freebao：有facebook一样感觉的一个网站，是一个提供老外在中国吃穿住行的网站

Guang：推荐购买类网站
萝卜TV：视频图樯类型的网站
略晓：分享经验问答类轻网站
TITA：企业社交网络
趣玩：不一样的百货店
异次元软件：有意思的软件下载站，类似小众软件
下吧：设计师们，这个需要介绍吗

再找下去都找晕了，感觉都是那么的相似，相似度接近50%的网站太多了，上面列举的也只是很小的一部分，毕竟自己接触面没那么高。有建议的童鞋可以留言提供一些站点。

最后介绍一个全球都无法比拟的网站
12306：是的，你没有猜错，那就是12306！

母爱如水

PPanda — Sun, 13 May 2012 03:43:12 +0000

随机日志-小站地图为你展开

光阴

PPanda — Tue, 08 May 2012 12:40:06 +0000

看的见摸不着跑得快又没脚忽的一下不见了你哭你笑全没招

Building iPhone Apps with HTML CSS and JavaScript

PPanda — Sat, 28 Apr 2012 07:58:28 +0000

之前介绍过一篇为你的博客打造iphone版本，这种方式几乎适合所有使用wp的博主，这也是大多数博主使用的方式，但是这种方式必须使用safari打开，持有ios设备的童鞋一般很少有人用safari打开网页，也就是自己没事用safari打开测试一下；而且即使在桌面生成一个快捷图标虽然首页会正常全屏显示，但是当点击一个链接的时候还是会启用safari来打开页面，这种体验确实很不爽，但是这也是大多数手持设备版web网页采取的方式，毕竟开发周期相对较少，成本相对较低。

所以出现了sencha和jQmobile这类的框架，再配合上PhoneGap就可以做出一个安装包，甚至你可以不使用任何框架自己使用HTML+CSS+JAVASCRIPT写一个app，这里推荐一本书，Building iPhone Apps with HTML, CSS, and JavaScript，虽然是英文版的，但是看过之后可以让你了解一些客户端的机制，一些疑问也许就会解开。

你会了解Objective-C, Xcode和webApp的区别，可以自己写一个简单的甚至是helloword之类的app，如果你对客户端app开发有兴趣而且又有一定的前端开发基础，那么这本书可以让你眼界打开一些。你会体会到HTML5 + PhoneGap原来可以做这么多事。

最后放个例子吧，我花了一些时间做的一个自己博客的app，很丑是很丑了，仅仅是自己测试使用，前提ios需要越狱哦。

IPA下载

随文赠送一个android格式的版本

APK下载

/*光明与磊落干净的让我不舍得看*/

谷歌HTML/CSS规范指南

PPanda — Thu, 26 Apr 2012 09:02:55 +0000

最近工作的时候被项目中一些比较乱的代码搞的有些头大，前期的规划架构确实很重要，一个好的地基才能更好的建起一座大厦，不然说不定哪天项目可能就变成了“楼歪歪”，补救的代价远远超过了当初的精心规划。所以一起来看看谷歌给出的一些HTML/CSS规范建议吧。

1.常规样式规则

引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:）

不推荐的写法：
.example { background: url(http://www.google.com/images/example); }
推荐的写法：
.example { background: url(//www.google.com/images/example); }

#个人并认为现在还不可以放心的去掉协议头，因为在IE7,8下去掉协议头会出现两次加载的情况，一般引入的外部文件我都会加上协议头。

2.常规格式规则

使用二个空格缩进。
#一般的编辑器应该都是两个吧。

标签和属性只使用小写。
#这个还是要遵守的。

删掉冗余的行尾空格
#这个一般都会注意的吧。

3.常规Meta规则

使用utf-8编码。
#在这片神奇的土地还是有使用GBK的需求的

良好的注释
#这点很赞同，良好的注释，凸显专业气质。。。

记录行动项目（记录下一些要改，但来不及修改的地方，或指派其他同事做修改。）
#其实是代码里的GTD，好记性不如一个烂键盘，据小道统计，GTD可以小治愈一些拖延症患者。

4.常规html设计规则

选择正确的文档类型
#DOCTYPE还是很重要的。

注意HTML的语义化。
#使用标签的时候多想一下是没坏处的，还是那句话，为了凸显专业气质。。。

多媒体元素降级处理

#一个例子你就明白了，我觉得还是翻译成优雅降级比较文艺。

html、css、javascript三层分离
#这个就不多说了，俗称结构、表现、分离。

在html页面中避免使用实体引用。
如果你的文件是utf-8编码，就不需要使用像 —, ”, or ☺的实体引用。
不推荐的写法：
The currency symbol for the Euro is “&eur;”.
推荐的写法：
The currency symbol for the Euro is “€”.
#这个很少用到，知道就好。

忽略一些可选的标签
#在HTML5声明下有一些标签是可以忽略闭合的，但是我觉得还是闭合标签心里踏实啊。

样式和脚本引用可以忽略type属性。
#目前还是加上比较保险。

html格式规则

每一块、每一列表、每一表格元素都需要另起一行，并缩进每个子元素。
#这一条不遵守的童鞋眼神一定很好用。

css样式规则

尽可能验证css的合法性
#蛋疼就去验证吧

使用富有含义和通用的id和class名。
#在大一些的项目中这可太重要了，前期的随意会让后期的需求修改变得很麻烦。

id和class的命名在保持语义性的同时尽可能的短。
#短不一定就好，命名一定要大家都明白。

避免出现多余的祖先选择器。
#样式是写的越多最后写的就越少，多总结项目中的经验，然后样式就会越写越少，但功能依然不变。

简化css属性写法
#写过一段时间css的都可以无视了。

属性值出现小数点忽略0
#这个可能用的不多，写css3动画的时候会用到。

使用url()时忽略刮号中的引号。
#从firebug里复制的地址都带引号，最后还得把他们删掉，哎，讨厌。

给选择器样式名增加前缀。
#这尼玛太重要了，就像打DOTA你不插眼还在那叫唤怎么又被抓了，如果你不加合适的前缀冲突了你也会叫的。

单词使用“-”来连接
#这个我之前也是这么做的，蛋是因为不能双击选中现在我变成下划线连接单词了，我倒退了么。。。

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。
#要做到能不用就不用。

css格式规则

css属性按字母顺序书写
#这个没必要强求吧，能不排序么？

每个样式后要加分号
#好习惯凸显专业气质。

属性值前增加个空格
#有些写js的感觉了吧。

分隔选择器
不推荐的写法：
a:focus, a:active {
position: relative; top: 1px;
}
推荐的写法：
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
#确实明了了许多，可以尝试

代码乱了就是这种感觉

原文地址google的html/css规范指南

/*时间你肿么了*/

漂流瓶

PPanda — Fri, 20 Apr 2012 14:58:12 +0000

远方

PPanda — Thu, 19 Apr 2012 15:05:27 +0000

HTML5[canvas]图片变灰效果

PPanda — Thu, 19 Apr 2012 14:36:20 +0000

早上一个好基友问我grayscale.js好用不，我想好基友肯定又遇到一些奇异的设计了，在非ie下grayscale.js挺不错，但是图片多的话会极大的影响效率，我曾经用过一次图片墙，图片大概20+吧，当时测试数据好像是页面载入时间增加了7秒，而且会有概率出现浏览器假死现象，也许是之前的浏览器版本比较低吧，那时候还是火狐3.X，谷歌版本也才是个位数，现在都飙升到十位了，性能应该可以提高不少，但是随着浏览器的升级又为我们带来了HTML5这份大礼，于是我给好基友弄了这个HTML5的图片变灰效果，基于Canvas完成，不支持Canvas的就判断使用grayscale.js或者直接不理，这方面还是ie的滤镜方便啊。

先说一下思路:

前提：这里直接无视了不支持canvas的浏览器，IE也没管。
@创建一个canvas容器用来放置灰度图片
@按照原彩色图片大小重新绘制每一个像素，使其变为灰度。
@重新拼接每个像素，获取图片的dataurl赋给彩色图片src替换。

出现问题：
@图片是异步处理，在chrome下必须等到图片载入完毕才能使用灰度方法。
@在chrome版本高于18的可以直接用样式来控制灰度，和IE一样简单。
@图片较多还是会出现卡帧现象。

实际效果：

下面是demo，里面写上了注释，应该可以看懂。

Demo

/*不因渔夫引，怎得见波涛*/

IOS5.0.1解除访问限制密码

PPanda — Wed, 18 Apr 2012 15:11:11 +0000

前几天把老婆的iphone系统又搞坏的了，症状表现在所有越狱后的软件全闪退，其实我只是悄悄的按home + power键重启了一下而已，于是只好自己重新越了下狱，还好问题解决，但是我在调试的时候发现那个访问限制不知为何被打开了，试了三次提示密码错误就不敢往下试了，于是谷歌解决方案，还好被我找到鸟，目前适合于5.0.1，记录下来以作备用。

前提：需越狱，可以查看系统文件。

解决方法如下：

1.用文件查看工具（例如ifunbox）找到/private/var/keychains/
2.找到该文件夹下的keychain-2.db，首先做好备份（以防万一），然后果断删除该文件—keychain-2.db
3. 关机iphone4,重新启动。
4. 进入设置界面，发现访问限制已经关闭了，然后重新设置一个新密码，再关闭之前的错误提示也消失了，然后恭喜你，问题解决。

还想说另外一个问题，确实不知道设置了什么之后导致无法内置购买软件了，甚至对照我这边软件重装一下也是不行，所以我选择了还原设置，于是碰到了密码这个拦路虎，干掉之后重新引导设置一下，嘿，果然好了，又可以happy的购买内置服务了，对于打游戏过关老过不去的是太爽不过了。

推荐几个很爽的打飞机游戏

1.Phoenix

2.虫姬

4.怒首领蜂

还有一个是横版的也是CAVE出版的也很爽,忘了叫啥名字了

总之打飞机男生玩起来很爽的啦，试了你就知道

/*路的尽头*/

Notepad++ To Sublime Text

PPanda — Fri, 13 Apr 2012 16:28:59 +0000

去年就听一个基友推荐过Sublime Text这个软件，那个时候确实不是很好，有着很多的bug，打开大文件很慢，而且对GBK支持的很是不好，不能很好的编辑文件，于是就一直notepad++下去，一些用vim的可能会鄙视不用vim的，我觉得没有这个必要，就像别人如获至宝的妞在你眼里却一点也不感冒，或许你是一个基友，又或者你真的不感冒，总有一款适合你的软件，在经过我很长一段时间的时候之后才敢推荐这个软件给大家，因为我已经将Sublime打造成了Notepad++模式，甚至连操作习惯都被我同化，下面来说说我为什么转到Sublime Text的原因吧。

先来说说Notepad++的优点吧：

·小巧轻便

·开源免费

·代码迅速查找定位，标签函数闭合位置精确定位

·定位标记功能

·众多插件支持

·…

上述优点足以让我依赖着notepad++，但我之所以抛弃它却是因为以下两点

·不能跨平台

·界面不太优雅

于是我想着如果有一个编辑器可以跨平台，又有优雅的界面，甚至功能并不输于notepad++多少我一定会爱上它，于是Sublime Text 2来了。

该怎么形容Sublime呢，也许它就是那种你看一眼就会喜欢上的编辑器吧

·酷酷的外表

·与众不同的miniMap

·自定义插件

·非常方便的快捷键

·和notepad++一样的相同字符选择高亮

·等等…

缺点自然也是有滴，那就是太贵了，如果你想使用正式版需要支付$59!你没有看错，是59美刀啊，对于用惯了free软件的人还真是一种不适应，还好即使你不购买Sublime Text你也可以正常的使用它，只不过会在你保存文档的时候不经意间会提示你购买而已，如果你可以忽略那个提示，你可以永久使用的哦。本文开始提到的那个基友已经购买了Sublime Text，而我现在使用了他的License，吼吼，基友就是好啊，省了偶59美刀哦~

下面分享一下我使用的插件：

Clipboard History
这是一个剪贴板工具，可以剪贴很多段不同的代码，很方便，快捷键ctrl+alt+v;

GBK Encoding Support
看名字就知道是支持GBK的插件了

jQuery
使用jQuery方法使用起来挺不错

JsFormat
js美化插件，快捷键ctrl+alt+f

Pretty JSON
美化JSON格式数据

Search StackOverflow
it界的V2EX吧

SFTP
会使用一些FTP功能，这个插件是收费的，免费的用着还可以

ZenCoding
你要不装着你就别说你是做前端的。

在很长一段时间的使用之后现在已经离不开它了，你也可以试用一下，或许也会令你眼前一亮滴。

/*Normal*/

call-apply-callee-caller扫盲

PPanda — Tue, 10 Apr 2012 07:38:07 +0000

之所以写这篇文章呢正好群里和论坛里都有人问这个问题，多数人的回答都是去谷歌去百度，好吧，要想把他们解释清楚花五分钟是不够的，于是弄了一个扫盲贴再加上一个生动的列子这样就会记忆的更深刻，一个demo胜过千句废话。

原理还是不能少的：

一、call 方法

调用一个对象的一个方法，以另一个对象替换当前对象(其实就是更改对象的内部指针，即改变对象的this指向的内容)。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

参数： thisObj 可选项，将被用作当前对象的对象。

arg1, arg2, , argN 可选项，将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

二、apply方法

apply方法的第一个参数也是要传入给当前对象的对象，即函数内部的this。后面的参数都是传递给当前对象的参数。

对于apply和call两者在作用上是相同的，但两者在参数上有区别的。

对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

如 func.call(func1,var1,var2,var3)

对应的apply写法为：func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

三、caller 属性

返回一个对函数的引用，即调用了当前函数的函数体。
functionName.caller :functionName 对象是所执行函数的名称。

说明:

对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由 JScript 程序的顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。

四、callee属性

返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。
[function.]arguments.callee:可选项 function 参数是当前正在执行的 Function 对象的名称。

说明:

callee 属性的初始值就是正被执行的 Function 对象。

callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

下面是相关代码：alert比较多，可自行注释。

functionF(x,y){
this.x=x;
this.y=y;
alert( x+" + "+y);
}
functioncallDemo(s1,s2){

F.call(this,s1,s2);//参数
}
functionapplyDemo(s1,s2){
F.apply(this,[s1,s2]);//数组
}
callDemo("callDemo Para1","callDemo Para2");  //callDemo Para1 + callDemo Para2
applyDemo("applyDemo1","applyDemo2")  //applyDemo1 + applyDemo2
 /**/
 function callerDemo() {
     if ( callerDemo.caller) {
         alert("function is caller") //被调用
     } else {
         alert("this is a top function");
     }
 }
 function handleCaller() {
     callerDemo();
 }
 handleCaller();
 function calleeDemo() {
      alert(arguments.callee); //自身
 }
 calleeDemo();
 var sum = function(n){   
     if (n <= 0){
         return 1;
     }     
     else{   
         return n + arguments.callee(n - 1); //调用自身
     }  
 }
 alert(sum(50));

下面是实际应用，几行代码模仿谷歌0408跑马效果~

Demo

/*看日子在飘荡*/

设计师也需要了解的一些前端知识（转）

PPanda — Sun, 01 Apr 2012 07:52:44 +0000

看到一篇不错的文章，把工作中遇到的一些问题总结了一下。

国画中有句话，“画虎先画骨”。对应到网页上，视觉效果只是一张皮，前端代码是支撑这张皮的骨，了解骨架是怎么长的，有助于设计出更合理高效的页面。

一、常见视觉效果是如何实现的

关于文字效果

文字自身属性相关的效果css中都是有相对应的样式的，如字号、行高、加粗、倾斜、下划线等，但是一些特殊的效果，主要表现为ps中图层样式中的效果，css是无能为力的。但是css也在不断发展，在css3中已经新增了文字阴影的效果，可惜IE6、7、8均不支持。所以，一些比较特殊的文字效果，依然只能通过图片来实现。

说说文字间距

在css中其实是可以控制文字间距的，但是现实中很少会使用，一方面是很多设计师不知道css中有相应的属性，并且需要使用文字间距的场景也不多，另一方面，浏览器解析文字间距的方式也令这一属性在某些场景下无法使用，比如在文字居中的时候，实际居中的区域是包含了文字间距的（如上图），使得在视觉效果上让人无法接受，所在当需要在文字中保留一定空间的时候（比如两个字的按钮），会直接用空格来代替。

不过多知道一种实现文字间距的方法总是好的，虽然目前来看应用场景很少，但是也许某天就派上用场了。比如12号的雅黑文本看上去会感觉密密麻麻的，但是加上一点文字间距，阅读效果就会好很多。

关于字体

网页里中文文本字体一般都是宋体，不建议使用其他字体，但是其实字体是可以上传到服务器，然后页面中引用该字体，就解决了用户电脑上没有相应字体的问题。不过很少有人会这么做，为什么呢？1.浏览器是可以设置忽略网页字体，改用用户设置的字体(IE:工具->Internet选项->辅助功能)。2.服务器上的字体是需要加载的，而一个字体一般都几兆，严重影响页面载入速度。所以对于特殊字体，通常都是做成图片。

关于背景

看看通常一个按钮是怎么拼出来。

产品类的按钮我们一般都是像A这样设计（中间段是横向的重复图案），而不是像B这样，因为产品类的按钮一般都是复用的，可以用两段拼出来一个按钮，而B这个宽度就限死了。

关于渐变、圆角、投影

在css3中终于实现了渐变、圆角和投影，不过可惜的是IE6、7、8均不支持，但是已经可以在越来越多的网站中看到新css的应用，尤其是按钮，淡淡的渐变，hover上去有点淡淡的阴影，效果很好，对于不支持的浏览器，设置一个颜色近似的背景，看到的是单色、直角效果。

需要注意的是：代码实现的只能是线性渐变，从某个颜色均匀的渐变到另外一个颜色，所以高光什么的只能舍弃了。css3中还有径向渐变，不过暂时应用场景不多。

互联网发展速度很快，大大小小的新技术很多，多和前端交流吧。

关于对齐

主要是表单中文字的上下居中对齐，在ps里很简单，但是实现出来却如上图所示的，很难看，要想对齐，真是件麻烦的事情，没有好的办法。所以不是特别关键的地方，建议就随它去了。

二、前端是如何切图的

第一步拼图

为了加快页面加载速度，会把多张图片拼在一张图片上。

第二步保存为Web所用格式

网页上的图片，照片、banner类一般保存为jpg，其他的，通常都是保存为png-8或gif（除了动态图片需要用到gif，其他场景png-8完全可以替代gif）。对于保存为png-8或者gif的图片，有时候会看到图片呈现带状感（如下图右侧），失真很严重。

有两个办法，一是增加颜色的数量，但是增加数量会导致图片变大，需要在颜色数量和图片大小之间取一个平衡，而且如果图片上颜色太多，就算颜色数量增到最大256，依旧会有明显的带状感，这时候可以把图片拆开，把颜色类似的图片拼在一张图上。

三、页面布局相关

元素叠加的效果

通过外补丁(margin)、绝对定位(position:absolute)可以实现多个元素互相叠加的效果，使得设计上不受布局的局限。

固定屏幕的效果

某些特殊场景使用（如上图的“回顶部”），解决跟随的问题。

了解前端知识，不仅在沟通上更顺畅,设计上更合理，对于设计过程也有一定的帮助，比如在设计控件的时候，ps里看hover样式始终不够直观，这时可以把控件实现出来，直观的去感受，调整你的设计稿直到满意为止。虽然成本比较大，但是对于需要仔细推敲的控件来说还是值得的。

某人曾说过，好的技术能带来设计上的突破，而好的设计也能促进前端技术的发展。css3、在线编辑头像，很多技术的出现改变了设计的方式，向后多走一步吧！

随机日志-小站地图为你展开

PPanda — Sun, 01 Apr 2012 05:32:35 +0000

期待一场旅行让自己回到过去。

chromium下transition闪动问题

PPanda — Fri, 30 Mar 2012 09:17:40 +0000

前段时间页面上加了一个页面载入完毕立即触发的transition动画，加上去了以后在chromium下发现会在动画元素旁边出现一个白色区域块，如下图效果

在chrome下正常，在chromium上可以看到chrome未来的影子，希望这个bug在新版chrome下不要再出现。

至于如何解决这个问题我找了一些资料

Chrome渲染Transition时页面闪动Bug

creen blink after CSS transition on OSX

-webkit-transition lead to page blink(refresh)

我尝试了其中的方法，但都无法完美解决（不过好多了），期待chromium的更新吧，还好影响不大。

解决方法（不一定完美，可以一试）：
-webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-transform:translate3d(0,0,0);
今天打开淘宝首页的时候也发现了这个问题，而且是大区域的闪动，refresh依然存在，如下图（因为闪动次数过多所以很好截图）：

鼠标移动到右上角的网站导航上也会有瞬间闪动，因为是瞬间，很难截图，截出来不容易哇：

具体原因未知，估计跟transition有关。

其实跟代码无关，对chromium还是很有信心的，没有chromium怎么会有这么好用的chrome呢.

PS:
-webkit-transform:translate3d(0,0,0);在body使用后在chrome和chromium下会导致fixed元素无效，慎用！

/*像少年啦*/

关于js对页面加载影响的测试

PPanda — Wed, 28 Mar 2012 06:46:37 +0000

这两天在处理一个小需求，目的是当用户页面里引入一段外部js（外部js由内部生成，用户手动添加），然后根据外部js提供参数回调不同的js文件和方法（js文件和方法未知，由参数传递），回调的js文件异步在客户的页面里加载，目前已实现基本功能，之所以这么做就是为了尽可能的减小外部js对客户页面加载效率的影响。

事实上目前接触到公司的产品中也遇到了这种情况，页面里因为有较多的辅助功能而引入了比较多的js文件，本地测试开发的话基本看不出对页面加载的影响，但是在模拟的较差网络环境下页面瞬间空白的出现时间有点超过预期，虽然不仅仅是那些js文件造成的加载白屏现象，但是过多js零碎文件的引入任然拖慢了页面的加载速度，目前建议使用$LABjs管理和Combo脚本文件来优化。

鉴于这个小需求又想到了js对大型网站页面加载的影响条件，下面根据不同的情况做了不同的对比，已经尽可能的模拟同等条件下的载入效果，展示上会略有不同，已经取了平均值，数据还算是比较可靠。

第一种方式：js文件在页面元素上面加载

Demo

目前较多网站采取了这种方式，虽然这种方式会阻塞页面流的正常加载，但是也是最安全的一种方式。

第二种方式：js放到页面元素底部加载

Demo

Yslow建议的方式，会在页面元素先载入完毕再加载js文件，一些网站优化后都会把js文件放到底部加载。

第三种方式：js文件顺序依赖异步加载

Demo

一些网站会使用这种方式，这种方式不阻碍页面流的加载，但是当js文件过多时就会与“减少HTTP请求”这个条件冲突，页面载入完毕时间明显比非顺序依赖加载js文件方式要长一些。

第四种方式：另一种js文件顺序依赖异步加载

Demo

和第三种方式相同，只不过代码更加完善，更加适用于项目。可以看出页面载入时间依然较长。

第五种方式：利用$LAB.js

Demo

去年新版Twitter就是使用了$LAB.js的方式来管理页面里的js文件，使用$LAB.js的神奇之处在于即不会阻碍页面流的加载，又可以实现js并行顺序依赖加载，这种方式非常适合页面里有较多的js文件。

引入外部js大概就上面几种常用情况，但实际运用还需要根据项目需求，总结一些就是

合理Combo文件，你的服务器不会因为一个几KB或者几十KB的Combo后的js文件拖慢速度；

无阻塞加载js文件，优先保证页面元素加载。

最大化浏览器的多线程性能。

相信你的服务器，避免过度优化。

php可以使用flush();

PS：

Demo参考原型：动态加载js

/*Make A Hard Decision*/

CSS3时光流逝效果

PPanda — Tue, 20 Mar 2012 14:55:44 +0000

前几天加上了一个小效果，我叫它为时光流逝效果，最初是在苹果官网看到的，是为了介绍全新ipad可以续航10小时的一个小效果，于是我用我自己的方式把相同的效果写了一下，不是canvas，仅仅是css3而已，因为我看着还可以，于是就挂到博客上了，用来提醒自己一天的时光就这样流逝了,刚好又有童鞋问我这效果是如何实现，并希望我写一篇文章来说明一下，于是就有了这篇文章。

效果是webkit only。

素材是使用的苹果官网的svg图片，本来我想找几个好看的指针和表盘，可是很多都是主题的色调不匹配，懒得找了，就用它吧。

具体效果可以使用webkit浏览器在站点顶部右侧查看.

相关代码如下,里面所使用的方法在webkit下有效。

var date =new Date();

var hour = 30*date.getHours() + date.getMinutes()*0.5;

var minute = 360 * date.getHours() + date.getMinutes()*6 ;

var clockStyle = ‘img.hour{-webkit-animation-name:hour;-webkit-animation-duration:7s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function: ease-in-out;}img.minute{-webkit-animation-name:minute;-webkit-animation-duration:7s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function: ease-in-out;}@-webkit-keyframes hour{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(‘ + hour +‘deg);}}@-webkit-keyframes minute{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(‘ + minute +‘deg);}}img.hour{-webkit-transform:rotate(‘ + hour +‘deg);}img.minute{-webkit-transform:rotate(‘ + minute +‘deg);}’;

var style = document.createElement(“style”);

style.innerHTML = clockStyle; //

document.getElementsByTagName(“head”)[0].appendChild(style);

下面Demo时间到了。

Demo

/*积金千两，不如明解经书*/

HTML5上传预览功能

PPanda — Tue, 13 Mar 2012 14:53:15 +0000

一些时候会碰到有上传功能的页面，一般在刚出需求架构的时候就要开始设计扩展性良好的前端代码架构，也会去想设计师会把设计上传功能设计的多么精致呢，也许在设计师的眼里文件上传的样子不应该那么死板，于是乎各种版本的上传形式都蹦了出来，而前端开发需要做的就是在需求都达到的前提下尽可能的按照设计师的思路来开发页面，毕竟设计师们一个像素一个像素的作图不容易，尊重他们的设计稿也就是尊重他本人。

在一次又一次和设计师的交流中双方逐步为彼此考虑，一些复杂的效果前端也尽量去实现，而设计师也开始使用一些自身的组件来设计页面元素，如此一来前端开发在写架构的时候就可以写出更好改动的初期架构，虽然是理想状态，但也要在项目中慢慢实现。

上面为无关紧要的引申，下面正式点题，上传功能基本上每个人都用过，但是一般的处理方式都是先上传到服务器然后再显示，如果传错了服务器不但浪费了一些空间，用户还要亲自找到那张图片并删除，这样或许会丢失个别有洁癖或者当时心情不好的用户，所以现在大多数上传控件都使用了flash，支持多图和上传前预览，百度空间相册上传就是一个很好的例子(如下图)

如果要模仿这种flash效果还真不太容易，不过现在在非IE浏览器里我们可以用HTML5来模仿一下这种流程，使用了FileReader这个对象，具体效果还是看demo吧，代码都在里面。

Demo

/*两年为期*/

随机日志-小站地图为你展开

Twitter GUI psd下载

PPanda — Sun, 11 Mar 2012 14:06:26 +0000

这应该还是Twitter没有改版之前的UI，即使是之前的UI现在看来还不失为微博设计的典范，每一个特有的元素都在被模仿，现在的版本已经不支持IE6，如果你使用IE6访问twitter会自动跳转到简单的移动版,其实在去年twitter就已经不怎么鸟IE6了，那时候就使用了一些伪类样式来定义页面，现在是彻底抛弃了IE6，其实一个还在用IE6的人是不会使用twitter的。

这个psd只是让大家看看之前的twitter是什么样子，也许你从来没有使用过twitter，但你需要了解世界上有这么一个网站在诉说着信息的自由。我也只是为了查看twitter所使用的页面技术才使用twitter，就像最近一些人在谈论的less，毕竟很多新的好的技术还需要从国外传过来，多了解一些总没有什么坏处，顺便放出俺的twitter，如果你想follow就来吧，我不是发微博控，但我是个大师级潜水队员。Follow Me吧

下载一

/*托清风捎去安康*/

Facebook GUI PSD源文件下载

PPanda — Fri, 02 Mar 2012 07:06:17 +0000

估计这个源文件很多童鞋都有有见过，我也是整理文件的时候发现的，不方便访问非死不可的童鞋可以一起来看看它的架构。

下面这张psd是我见过的最专业的psd源文件之一，其细节的反馈非常到位，拿到这种效果图开发者可以在前期更好的构建页面，而不是因为一些效果的不确定而频繁去和设计师确认从而降低了开发效率，如果我拿到这种效果图我第一个反应肯定是对设计者充满了感激和崇拜，这得多么专业的修养才能做出这种让开发者都感觉舒爽的效果图，而且psd里分层十分清晰，你想找不到都难，不需要任何高保真的标注，剩下的事情就交给偶吧，设计师您辛苦鸟，这才是团队的感觉（这个“如果”要实现起来还需要一定的条件啊）。

下面是PSD源文件的下载链接，不保证长期有效。

下载一

下载二

/*空*/

LaoZhuHome Beta

国内用户体验较好网站

相关日志-小站地图为你展开

母爱如水

随机日志-小站地图为你展开

光阴

相关日志-小站地图为你展开

Building iPhone Apps with HTML CSS and JavaScript

相关日志-小站地图为你展开

谷歌HTML/CSS规范指南

1.常规样式规则

2.常规格式规则

3.常规Meta规则

4.常规html设计规则

html格式规则

css样式规则

css格式规则

相关日志-小站地图为你展开

漂流瓶

相关日志-小站地图为你展开

远方

相关日志-小站地图为你展开

HTML5[canvas]图片变灰效果

相关日志-小站地图为你展开

IOS5.0.1解除访问限制密码

相关日志-小站地图为你展开

Notepad++ To Sublime Text

相关日志-小站地图为你展开

相关日志-小站地图为你展开

call-apply-callee-caller扫盲

一、call 方法

二、apply方法

三、caller 属性

四、callee属性

相关日志-小站地图为你展开

设计师也需要了解的一些前端知识（转）

一、常见视觉效果是如何实现的

关于文字效果

说说文字间距

关于字体

关于背景

关于渐变、圆角、投影

关于对齐

二、前端是如何切图的

第一步 拼图

第二步 保存为Web所用格式

三、页面布局相关

元素叠加的效果

固定屏幕的效果

随机日志-小站地图为你展开

相关日志-小站地图为你展开

chromium下transition闪动问题

相关日志-小站地图为你展开

关于js对页面加载影响的测试

相关日志-小站地图为你展开

CSS3时光流逝效果

相关日志-小站地图为你展开

HTML5上传预览功能

随机日志-小站地图为你展开

Twitter GUI psd下载

相关日志-小站地图为你展开

Facebook GUI PSD源文件下载

相关日志-小站地图为你展开

第一步拼图

第二步保存为Web所用格式