《高性能网站建设指南》读书笔记

规则1,减少HTTP请求

这是最重要的原则,如果14条规则里只能选一条,那就是它了。可以通过多种方法减少HTTP请求,例如合并图片,合并JS和CSS等等。这一点薄荷网有很多改进的余地,首先应该把现在的JS合并了。

规则2,使用内容发布网络

内容发布网络就是CDN了,但是CDN似乎挺贵的,目前还不适合薄荷网,不过可以考虑自己弄一个网通的静态资源服务器解决有中国特色的可恶的南北互通问题。

规则3,添加Expires头

这个没什么好说的,是个建网站的人都应该知道。目前薄荷网图片,,,flash过期时间设置了3年,可以说是永久了,:) Expires有个麻烦的地方是内容更新问题,Ruby on Rails这方面处理的非常棒,它是在文件名后面自动带了

资源文件的timestamp,完美解决。 (更多…)

标签Tags:, , , , , , , , , , , , , , , , , , , , ,

js表单输入判断

(更多…)

标签Tags:, , ,

JS扩展函数集合

(更多…)

标签Tags:, , ,

js取得网页中的选中文字

(更多…)

标签Tags:, ,

google个性主页的拖拽效果的js的完整注释

可以这里下载例子:
[file]attachment/200708/_drag.rar[/file]
(更多…)

标签Tags:, , , , ,

得到对象以及鼠标在页面的绝对位置

获取页面元素的位置对我们很重要,如何获得元素位于页面的绝对位置呢?通过offsetLeft,offsetTop可以获得对象的左边距和上边距,但是不同浏览器因为对象处于的地位而会有些不同的解析,例如有些时候计算边距时没有把parent的边距计算进去,下面的函数将可以获得对象绝对的位置。

如下:
// get absolute Left position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
function getAbsoluteLeft( ob ){
if(!ob){return null;}
  var obj = ob;
  var objLeft = obj .offsetLeft;
  while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
    objLeft += obj .offsetParent.offsetLeft;
    obj = obj .offsetParent;
  }
return objLeft ;
}

// get absolute TOP position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
function getAbsoluteTop( ob ){
if(!ob){return null;}
var obj = ob;
var objTop = obj .offsetTop;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
  objTop += obj .offsetParent.offsetTop;
  obj = obj .offsetParent;
}
return objTop ;
}

获得页面的的宽高,左右边距有这些:
window.screen.width;
window.screen.height;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.scrollWidth;
window.document.body.scrollHeight;
window.document.body.clientHeight;
window.document.body.clientWidth;

通过事件来获得鼠标位置主要有这些:
e.layerX;
e.layerY;
e.pageX;
e.pageY;
e.screenX;
e.screenY;
e.offsetX;
e.offsetY;
e.clientX;
e.clientY;

//获得对象相对于父级的位置
obj .offsetLeft;
obj .offsetTop;
obj .offsetWidth;
obj .offsetHeight;

(更多…)

标签Tags:, , , , ,

禁止刷新,回退的JS

<script language="">
//
function onKeyDown()
{
if ( (event.altKey) || ((event.keyCode == 8) &&
(event.srcElement.type != "text" &&
event.srcElement.type != "textarea" &&
event.srcElement.type != "password")) ||
((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82)) ) ||
(event.keyCode == 116) ) {
 event.keyCode = 0;
 event.returnValue = false;
 }
}
document.onkeydown = onKeyDown;
function stop(){   //这个是禁用鼠标右键
return false;
}
document.oncontextmenu=stop;
</script>

标签Tags:, , ,

Js的MessageBox

  看到论坛上有人模仿alert 自己也写了一个。本来想模仿winapi里的MessageBox  ,但可惜js 不支持 阻塞模式  ,返回值只能用异步了。 支持 FF ie opera ,DOCTYPE 可以申明 也可以不申明

  存在问题:在opera 里图层不能透明  ,对于页面内有iframe的也无法使用 ,在ie里无法遮住select。 (更多…)

标签Tags:, ,

过滤HTML代码的函数包括过滤CSS和JS

(更多…)

标签Tags:, , , ,

动态CSS,换肤技术

常见的例子就是:一个站点上有多个页面样式提供浏览者选择。

同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式。

自然会想到了Cookie技术 (更多…)

标签Tags:, , , ,