Alpha Idea

<style type="text/css">
input {
	border: none;
	outline: none;
	-webkit-border-radius:3px;
	border-radius:3px;
}
input:hover {
	-webkit-box-shadow:0 0 3px #9fc0e6;
	box-shadow:0 0 3px #9fc0e6;
}
input:focus, input:active {
	-webkit-box-shadow:0 0 30px #9fc0e6;
	box-shadow:0 0 10px #9fc0e6;
}
input {
	-webkit-transition:0.5s ease all;
	-moz-transition:0.5s ease all;
	-o-transition:0.5s ease all;
	transition:0.5s ease all;
}
</style>

css, css3, transition 4,788 comments

ySlow建议js代码都放到页面底部，但是为什么大多数网站都没有这么去做？

2011年06月23号 Alpha 前端

之前在知乎上看到这样一个问题：http://www.zhihu.com/question/19699972
我想大多数刚开始研究网站性能,和ySlow的前端都或多或少有这样的疑惑，以下是我的理解：

Yahoo 建议JS代码放在页面底部是因为某些浏览器(IE6,7 Firefox1.5,2)并发连接数只有2个(!同一域名下)，使浏览器解析JS时会造成阻塞。
但大多数大型网站，会将JS放在二级域名服务器下，比如：src.xxxx.com。所以不会有太多阻塞现象。

还有一种是动态生成脚本元素也不会阻塞。
Google Analytics 之前也建议把他们的的脚本放在 < /body > 之上。
新的版本用了这种方法后，他们更希望把代码放在 < /header > 之上。

var ga = document.createElement('script'); ga.type = 'text/javascript';
ga.src = 'ga.js';
var s = document.getElementsByTagName('script')[0].appendChild(ga);

网站性能优化 2,580 comments

转几个有用的apache设置

2011年06月13号 Alpha PHP

全文十条：http://www.mangguo.org/10-useful-htaccess-snippets/
另外还有一篇：http://uicss.cn/promotion-loading-rate/

防止目录列表

Options -Indexes

通过压缩静态资源减少页面大小 (ySlow 35条rules之一的Gzip压缩)

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml 
application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

<ifmodule mod_deflate.c>
AddOutputFilter DEFLATE html xml php js css
</ifmodule>

为文件头指定Expires (ySlow 35条rules之一)

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600
</IfModule>

配置ETag (ySlow 35条rules之一)

FileETag none

防止盗链

RewriteEngine On
#将 ?mangguo\.org/ 替换成你的博客地址
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mangguo\.org/ [NC]
RewriteCond %{HTTP_REFERER} !^$
#将 /images/nohotlink.jpg 替换成“请勿盗链”图片地址
RewriteRule .*\.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]

创建自定义错误页

ErrorDocument 400 /errors/badrequest.html
ErrorDocument 401 /errors/authreqd.html
ErrorDocument 403 /errors/forbid.html
ErrorDocument 404 /errors/notfound.html
ErrorDocument 500 /errors/serverr.html

.htaccess, 网站性能优化 4,453 comments

点点网招聘页的彩蛋

2011年06月5号 Alpha 前端, 娱乐

好吧，我承认放假闲在家里太无聊了。刚看完Zakas的JS for web Dev的第三章，想休息休息，逛逛网页时发现了这个：

try{
console.info(decodeURIComponent('%7B%22%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88%E7%AE%80%E5%8E%86%E6%8A%95%E9%80%92%E7%BB%BF%E8%89%B2%E9%80%9A%E9%81%93%22%3A%22sonic%40diandian.com%22%7D'));
}catch(ex){}