Archive for 二月, 2010
xhtml向html5转变
星期三, 二月 10th, 2010 by 裕波
众所周知，xhtml的出现，从语义化的角度将原来html4的一些标签淘汰，替换成新的标签。
eg：b换成strong,i换成em。
而现在html又回来了，html5的时代将要来临，这将是一场什么将的转变？
他能平滑过渡吗？
我。。。我不得而知。
我们将如何迎接这一次大的变革。
嘿嘿
page speed 1.6 beta支持Firefox3.6
星期三, 二月 10th, 2010 by 裕波
Firefox升级到3.6以后，很多好用的插件都没有及时的更新，一直在等page speed。
哈，今天发现page speed终于发布了1.6 beta版，支持3.6版本，赶快尝试一下吧！
http://code.google.com/intl/zh-CN/speed/page-speed/download.html
小谈dataTransfer
星期二, 二月 9th, 2010 by 裕波
很久没有写blog了。在前段时间以来，我—-太懒了。
工作的环境太安逸，进步也相对较慢。
快过春节了，也算是自己的一个转折点吧，换了一份工作，希望能够让自己迅速的成长起来。
哈，废话不多说，今天在推特上看到克军说：原来从IE5开始就支持原生的拖拽了。哈哈，点进去看一下。
看了一下源文件，原来是通过dataTransfer的getData与setData来实现的。还是帖一下原代码吧。
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop</title>
<style>
img { height: 4em; }
div { margin: 1em 2em; border: black solid; text-align: center;
height: 9em; width: 12em; float: left; }
p { clear: left; }
</style>
</head>
<body>
<h1>Drag and Drop</h1>
<div ondrop="drop(this, event)" ondragenter="return false"
ondragover="return false">
<p>Good</p>
</div>
<div ondrop="drop(this, event)" ondragenter="return false"
ondragover="return false">
<p>Bad</p>
</div>
<p>
<img src="spam.gif" id=spam alt="Spam" ondragstart="drag(this, event)">
<img src="egg.gif" id=egg alt="Egg" ondragstart="drag(this, event)">
<img src="cat.png" id=cat alt="Cat" ondragstart="drag(this, event)">
</p>
<script>
function drag(target, e) {
e.dataTransfer.setData('Text', target.id);
}
function drop(target, e) {
var id = e.dataTransfer.getData('Text');
target.appendChild(document.getElementById(id));
e.preventDefault();
}
</script>
</body>
</html>
dataTransfer 对象：提供了对于预定义的剪贴板格式的访问，以便在拖曳操作中使用。
下面是相关的解释。
| 方法 | 描述 |
|---|---|
| clearData | 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。 |
| getData | 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。 |
| setData | 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。 |
从这个例子能够看出，拖动是相当简单的，不过这是利用了剪帖板的功能，但是是将可移动的元素直接剪切了，如果可以复制的话，那样会不会更好呢。
我是菜鸟，欢迎大吓指导。
Web性能优化最佳实践（1）
星期六, 二月 6th, 2010 by 陈良泳
本文翻译自：http://code.google.com/intl/zh-CN/speed/page-speed/docs/rules_intro.html
当你使用Page Speed剖析一个web页面时，它要通过许多不同的规则（rules）去评估页面。这些规则是来自前端的最佳实践，你可以应用在web开发的任何阶段。我们这里提供这些每个规则的文档, 所以不管你是否使用Page Speed这个工具（也许你仅仅是开发一个全新的网站，且并不准备对它进行测试），你任何时候都可以从本文档获益。我们给出特定的提示和建议让你可以最好的应用这些规则，并将它们融入到你的开发过程。
关于性能最佳实践
Page Speed是从前端的视角衡量性能，典型的是从页面加载时间（page load time）来衡量，它是从一个用户请求一个新页面到页面完全被浏览器渲染显示之间的时间差。 页面加载时间优化的最佳实践涉及到多个步骤，包括解析DNS名称、建立TCP连接、发送HTTP请求、下载资源、从缓存获取资源、解析和执行脚本，和在页面上渲染对象。
理想的Page Speed对页面性能的衡量，既要同时消除这些步骤、进行并行处理，还要减少它们完成的时间。最佳实践被分成五类，涵盖了页面加载优化的不同的方面：
- 优化缓存——保持你的应用的数据和逻辑同时离线
- 尽量减少往返时间——减少请求-响应周期序列的数量
- 尽量减少请求大小——减少上传的大小
- 尽量减少负载大小——减少响应、下载和缓存页面的大小
- 最优化浏览器渲染——改善浏览器的页面布局
功能列表
关于我
周裕波，web前端开发从业者，互联网爱好者。
gtalk:itchina110@gmail.com
@lovevfp