<table border oncontextmenu=return(false)><td>no</table> 可用于 Table
<script language="JavaScript"><!--
if (window == top)top.location.href = "frames.htm"; //frames.htm 为框架网页
// --></script>
<SCRIPT LANGUAGE=JAVASCRIPT><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
<noscript><*** src="/*.html>";</***></noscript>
onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">
12. 删除时确认
<a href=""javascript :if(confirm(" 确实要删除吗 ?"))location="boos.asp?&areyou= 删除 &page=1""> 删除 </a>
//Javascript
<script language="Javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
alert("top="+t+"/nleft="+l);
}
</script>
//VBScript
<script language="VBScript"><!--
function getIE()
dim t,l,a,b
set a=document.all.img1
t=document.all.img1.offsetTop
l=document.all.img1.offsetLeft
while a.tagName<>"BODY"
set a = a.offsetParent
t=t+a.offsetTop
l=l+a.offsetLeft
wend
msgbox "top="&t&chr(13)&"left="&l,64," 得到控件的位置 "
end function
--></script>
<script language="javascript">
function cc()
{
var e = event.srcElement;
var r =e.createTextRange();
r.moveStart("character",e.value.length);
r.collapse(true);
r.select();
}
</script>
<input type=text name=text1 value="123" onfocus="cc()">
javascript :
document.referrer
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize"></object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="/Close"></OBJECT>
<input type=button value="/ 最小化 onclick=hh1.Click()>
<input type=button value="/blog/ 最大化 onclick=hh2.Click()>
<input type=button value= 关闭 onclick=hh3.Click()>
本例适用于 IE
<script>
function look(){
if(event.shiftKey)
alert(" 禁止按 Shift 键 !"); // 可以换成 ALT CTRL
}
document.onkeydown=look;
</script>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者 <META HTTP-EQUIV="expires" CONTENT="0">
<input type=text"border:1 solid #000000">
或
<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:
1 solid #000000"></textarea>
<div>(division) 用来定义大段的页面元素,会产生转行
<span> 用来定义同一行内的元素,跟 <div> 的唯一区别是不产生转行
<layer> 是 ns 的标记, ie 不支持,相当于 <div>
<body onblur="this.focus();">
让竖条没有 :
<body style="overflow:scroll;overflow-y:hidden">
</body>
让横条没有 :
<body style="overflow:scroll;overflow-x:hidden">
</body>
两个都去掉?更简单了
<body scroll="no">
</body>
<a href="#" onFocus="this.blur()"><img src="/logo.jpg" border=0></a>
<form name="form1" method="post" action=mailto:****@***.com
enctype="text/plain">
<input type=submit>
</form>
window.opener.location.reload()
<body onload="top.resizeTo(300,200);">
打开页面的位置 <body onload="top.moveBy(300,200);">
<STYLE>
body
{background-image:url(/logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
<script language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
document.body.clientWidth; document.body.clientHeight
if (/[^/x00-/xff]/g.test(s)) alert(" 含有汉字 ");
else alert(" 全是字符 ");
<textarea rows=1 name=s1 cols=27 onpropertychange
="this.style.posHeight=this.scrollHeight">
</textarea>
<script language=Javascript>
function cc(dd,dadd)
{
// 可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + " 年 " + (a.getMonth() + 1) + " 月 " + a.getDate() + " 日 ")
}
cc("12/23/2002",2)
</script>
<HTML><script language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then
window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio" value="/style" checked>Style
<INPUT name="radio1" type="radio" value="/blog/barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide
function killErrors() {
return true;
}
window.onerror = killErrors;
// -->
</SCRIPT>
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
把如下代码加入 <body> 区域中 :
<script language=Javascript>
tim=1
setInterval("tim++",100)
b=1
var autourl=new Array()
autourl[1]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.njcatv.net"
autourl[2]="javacool.3322.net"
autourl[3]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.sina.com.cn"
autourl[4]="www.nuaa.edu.cn"
autourl[5]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.cctv.com"
function butt(){
***("<form name=autof>")
for(var i=1;i<autourl.length;i++)
***("<input type=text name=txt"+i+" size=10 value="/ 测试中 ……> = 》 <input type=text
name=url"+i+" size=40> = 》 <input type=button value="/blog/GO
onclick=window.open(this.form.url"+i+".value)><br>")
***("<input type=submit value= 刷新 ></form>")
}
butt()
function auto(url){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0]["txt"+b].value="/ 链接超时 "}
else
{document.forms[0]["txt"+b].value="/blog/ 时间 "+tim/10+" 秒 "}
b++
}
function run(){for(var i=1;i<autourl.length;i++)***("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1
onerror=auto("http://"+autourl+"")>")}
run()</script>
auto :标准光标
default :标准箭头
hand :手形光标
wait :等待光标
text : I 形光标
vertical-text :水平 I 形光标
no-drop :不可拖动光标
not-allowed :无效光标
help : ? 帮助光标
all-scroll :三角方向标
move :移动标
crosshair :十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
进入页面 <meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">
推出页面 <meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">
这个是页面被载入和调出时的一些特效。 duration 表示特效的持续时间,以秒为单位。 transition 表示使用哪种特效,取值为 1-23:
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上 22 种随机选择一种
<META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">
<meta name="ROBOTS" content=" 属性值 ">
其中属性值有以下一些 :
属性值为 "all": 文件将被检索,且页上链接可被查询;
属性值为 "none": 文件不被检索,而且不查询页上的链接;
属性值为 "index": 文件将被检索;
属性值为 "follow": 查询页上的链接;
属性值为 "noindex": 文件不检索,但可被查询链接;
属性值为 "nofollow": 文件不被检索,但可查询页上的链接。
把如下代码加入 <body> 区域中
<a href="mailto:webmaster@sina.com">webmaster@sina.com</a>
把如下代码加入 <body> 区域中
<SCRIPT>
l=Array(6,7,8,9,'a','b','b','c','d','e','f')
Nx=5;Ny=35
t="<table border=0 cellspacing=0 cellpadding=0 height="+((Nx+2)*16)+"><tr>"
for(x=Nx;x<Nx+Ny;x++)
t+="<td width=16 id=a_mo"+x+"> </td>"
t+="</tr><tr><td width=10 id=a_mo"+(Nx-1)+"> </td><td colspan="+(Ny-2)+" rowspan="+(Nx)+"> </td><td width=16 id=a_mo"+(Nx+Ny)+"></td></tr>"
for(x=2;x<=Nx;x++)
t+="<tr><td width=16 id=a_mo"+(Nx-x)+"> </td><td width=16 id=a_mo"+(Ny+Nx+x-1)+"> </td></tr>"
t+="<tr>"
for(x=Ny;x>0;x--)
t+="<td width=16 id=a_mo"+(x+Nx*2+Ny-1)+"> </td>"
***(t+"</tr></table>")
var N=Nx*2+Ny*2
function f1(y){
for(i=0;i<N;i++){
c=(i+y)%20;if(c>10)c=20-c
document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"'"}
y++
setTimeout('f1('+y+')','1')}
f1(1)
</SCRIPT>
窗口中间弹出
<script>
window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
</script>
============
<html>
<head>
<script language="LiveScript">
function WinOpen() {
msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
msg.***("<HEAD><TITLE> 哈 罗 !</TITLE></HEAD>");
msg.***("<CENTER><H1> 酷 毙 了 !</H1><h2> 这 是 <B>JavaScript</B> 所 开 的 视 窗 !</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
==============
一、在下面的代码中,你只要单击打开一个窗口,即可链接到赛迪网。而当你想关闭时,只要单击一下即可关闭刚才打开的窗口。
代码如下:
<SCRIPT language="JavaScript">
< ! --
function openclk() {
another=open('1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>http://www.ccidnet.com' , 'NewWindow');
}
function closeclk() {
another.close();
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" NAME="open" value="/ 打开一个窗口 " onClick="openclk()">
<BR>
<INPUT TYPE="BUTTON" NAME="close" value="/blog/ 关闭这个窗口 " onClick="closeclk()">
</FORM>
二、上面的代码也太静了,为何不来点动感呢?如果能给页面来个降落效果那该多好啊!
代码如下:
<script>
function drop(n) {
if(self.moveBy){
self.moveBy (0 , -900);
for(i = n; i > 0; i--){
self.moveBy(0 , 3);
}
for(j = 8; j > 0; j--){
self.moveBy(0 , j);
self.moveBy(j , 0);
self.moveBy(0 , -j);
self.moveBy(-j , 0);
}
}
}
</script>
<body onLoad="drop(300)">
三、讨厌很多网站总是按照默认窗口打开,如果你能随心所欲控制打开的窗口那该多好。
代码如下 :
<SCRIPT LANGUAGE="JavaScript">
< ! -- Begin
function popupPage(l , t , w , h) {
var windowprops = "location=no , scrollbars=no , menubars=no , toolbars=no , resizable=yes" +
" , left=" + l + " , top=" + t + " , width=" + w + " , height=" + h;
var URL = "http://www.80cn.com";
popup = window.open(URL , "MenuPopup" , windowprops);
}
// End -->
</script>
<table>
<tr>
<td>
<form name=popupform>
<pre>
打开页面的参数 <br>
离开左边的距离 : <input type=text name=left size=2 maxlength=4> pixels
离开右边的距离 : <input type=text name=top size=2 maxlength=4> pixels
窗口的宽度 : <input type=text name=width size=2 maxlength=4> pixels
窗口的高度 : <input type=text name=height size=2 maxlength=4> pixels
</pre>
<center>
<input type=button value=" 打开这个窗口! " onClick="popupPage(this.form.left.value , this.form.top.value , this.form.width.value ,
this.form.height.value)">
</center>
</form>
</td>
</tr>
</table> 你只要在相对应的对话框中输入一个数值即可,将要打开的页面的窗口控制得很好。
把如下代码加入 <body> 区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
for (t = 2; t > 0; t--) {
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(0,-x);
}
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(0,x);
}
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(x,0);
}
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(-x,0);
}
}
}
//-->
// End -->
</script>
<script language="LiveScript">
<!-- Hiding
today = new Date()
***(" 现 在 时 间 是: ",today.getHours(),":",today.getMinutes())
***("<br> 今 天 日 期 为: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
<script language="LiveScript">
<!-- hide script from old browsers
***(document.lastModified)
// end hiding contents -->
</script>
</body>
</html>
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert(" 您 没 写 上 任 何 东 西, 请 再 输 入 一 次 !")
else {
alert(" 嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert(" 这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
else alert(" 您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value=" 输 入 测 试 " onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value=" 输 入 测 试 " onClick="test2(this.form)">
</body>
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt=" 怎麽样 ! 很酷吧 ! 您也可以试试 ."+"Here goes your message the visitors to your
page will "+"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {
pos=1-width;
}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++) {
scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
}
window.status = scroller;
setTimeout("scroll()",150);
}
//-->
</script>
</head>
<body onLoad="scroll();return true;">
这里可显示您的网页 !
</body>
</html>
<html>
<body>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Back" onClick="history.back()">
<INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.html'">
<INPUT TYPE="button" VALUE="Next" onCLick="history.forward()">
</FORM>
</body>
</html>
50 、查看某网址的源代码
把如下代码加入 <body> 区域中
<SCRIPT>
function add()
{
var ress=document.forms[0].luxiaoqing.value
window.location="view-source:"+ress;
}
</SCRIPT>
输入要查看源代码的 URL 地址 :
<FORM><input type="text" name="luxiaoqing" size=40 value="http://"></FORM>
<FORM><br>
<INPUT type="button" value=" 查看源代码 " onClick=add()>
</FORM>
把如下代码加入 <body> 区域中 :
<script language="JavaScript1.2">
<!--hide
var isnMonth = new
Array("1 月 ","2 月 ","3 月 ","4 月 ","5 月 ","6 月 ","7 月 ","8 月 ","9 月 ","10 月 ","11 月 ","12 月 ");
var isnDay = new
Array(" 星期日 "," 星期一 "," 星期二 "," 星期三 "," 星期四 "," 星期五 "," 星期六 "," 星期日 ");
today = new Date () ;
Year=today.getYear();
Date=today.getDate();
if (document.all)
document.title=" 今天是 : "+Year+" 年 "+isnMonth[today.getMonth()]+Date+" 日 "+isnDay[today.getDay()]
//--hide-->
</script>
把如下代码加入 <body> 区域中
<script language="JavaScript1.2">
<!--
function extractlinks(){
var links=document.all.tags("A")
var total=links.length
var win2=window.open("","","menubar,scrollbars,toolbar")
win2.***("<font size='2'> 一共有 "+total+" 个连接 </font><br>")
for (i=0;i<total;i++){
win2.***("<font size='2'>"+links[i].outerHTML+"</font><br>")
}
}
//-->
</script>
<input type="button" onClick="extractlinks()" value=" 显示所有的连接 ">
把如下代码加入 <body> 区域中
<script type="text/javascript">
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ?
event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
</script>
<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea> 回车换行
把如下代码加入 <body> 区域中
<SCRIPT LANGUAGE="JavaScript">
<!--
function msg(){
if (confirm(" 你确认要提交嘛! "))
document.lnman.submit()
}
//-->
</SCRIPT>
<form name="lnman" method="post" action="">
<p>
<input type="text" name="textfield" value=" 确认后提交 ">
</p>
<p>
<input type="button" name="Submit" value=" 提交 " onclick="msg();">
</p>
</form>
把如下代码加入 <body> 区域中
<script ***script>
var arr=new Array()
arr[0]=" 一一一一一 ";
arr[1]=" 二二二二二 ";
arr[2]=" 三三三三三 ";
</script>
<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
<option value=a> 改变第一格 </option>
<option value=a> 改变第二格 </option>
<option value=a> 改变第三格 </option>
</select>
<table id=zz border=1>
<tr height=20>
<td width=150> 第一格 </td>
<td width=150> 第二格 </td>
<td width=150> 第三格 </td>
</tr>
</table>
不论什么脚本,在任何时间、任何浏览器上执行,都不应该超过100毫秒。如果实际执行的时间长于这个底限,一定要将进程分解成若干更小的代码段。
脚本失控基本上有以下四个方面的原因:
1. 在循环中执行了太多的操作
解决这个问题的诀窍就是用下面这两个问题来评估每个循环:
1. 这个循环必须要同步执行么?
2. 循环里面的数据,必须要按顺序执行么?
如果1和2都可以否定,那么建议使用setTimeout方式将循环体切分成小块进行异步处理
将循环中的定义变量及初始化操作放到循环外。参见:http://www.w3cgroup.com/article.asp?id=111
2. 臃肿的函数体
在JavaScript中,我们应该尽可能的用局部变量来代替全局变量!
理解JavaScript作用域链。参见:http://www.jslab.org.cn/?tag=ScopeChainAndClosure
理解原型链。参见:http://www.jslab.org.cn/?tag=prototypeChain
3. 过多的递归
使用迭代方式替代递归,采用memoization技术优化递归
斐波那契数列的递归算法优化,参见:http://www.jslab.org.cn/?tag=Memoization
4. 过多的DOM调用
在Web开发中,JavaScript的一个很重要的作用就是对DOM进行操作。可你知道么?对DOM的操作是非常昂贵的,因为这会导致浏览器执行回流(reflow)操作。而执行了过多的回流操作,你就会发现自己的网站变得越来越慢了。我们应该尽可能的减少DOM操作。
回流操作主要会发生在几种情况下:
* 改变窗体大小
* 更改字体
* 添加移除stylesheet块
* 内容改变哪怕是输入框输入文字
* CSS虚类被触发如 :hover
* 更改元素的className
* 当对DOM节点执行新增或者删除操作或内容更改时。
* 动态设置一个style样式时(比如element.style.width="10px")。
* 当获取一个必须经过计算的尺寸值时,比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值(在兼容DOM的浏览器中,可以通过getComputedStyle函数获取;在IE中,可以通过currentStyle属性获取)。
解决问题的关键,就是限制通过DOM操作所引发回流的次数:
1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入。
2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除:
1. 通过removeChild()或者replaceChild()实现真正意义上的删除。
2. 设置该元素的display样式为“none”。
修改操作完成后,将上面这个过程反转过来,建议使用第2种方式。
3.CSS部分
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改,如element.style.backgroundColor = "blue";
每次修改元素的style属性,都肯定会触发回流操作,要解决这个问题可以:
1.使用更改className的方式替换style.xxx=xxx的方式。
2.使用style.cssText = '';一次写入样式。
3. 避免设置过多的行内样式
4. 添加的结构外元素尽量设置它们的位置为fixed或absolute
5. 避免使用表格来布局
6. 避免在CSS中使用JavaScript expressions(IE only)
4.将获取的DOM数据缓存起来。这种方法,对获取那些会触发回流操作的属性(比如offsetWidth等)尤为重要。
5.当对HTMLCollection对象进行操作时,应该将访问的次数尽可能的降至最低,最简单的,你可以将length属性缓存在一个本地变量中,这样就能大幅度的提高循环的效率。
二、避免大字符串字面量对象操作,如 字符串.lenth,尽量转换为new String(字符串)后再进行操作
三、在做字符查找替换等操作时善用正则表达式
快速掌握ECMAScript正则表达式。参见:http://www.w3cgroup.com/article.asp?id=202
四、减少语句,利用运算符优先级实现if else表达式,使用三元表达式,使用连续表达式(看情况,将损失程序可读性)
利用运算符优先级实现if else表达式参见:http://www.w3cgroup.com/article.asp?id=131
五、将CSS,JS文件合并到一个文件(非BT爱好者还是不要玩了^_^)
参见:http://www.w3cgroup.com/article.asp?id=29
六、避免Javascript事件绑定出现内存泄漏
"These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model)." Microsoft GPDE Team Blog
参见:http://www.w3cgroup.com/article.asp?id=207
七、使用WEB Workers技术(支持html5的浏览器)
Web Workers为JavaScript提供了一种能在后台进程中运行的方法,Web Workers进程能够在不影响用户界面的情况下处理任务。
参见:http://www.w3cgroup.com/article.asp?id=242
用户打开页面时,首先看到就是首屏的内容,因此首屏能否快速显示,直接影响到用户体验的好坏。
JS文件的下载与解析会阻塞其它请求的下载(支持并行下载的JS除外)。 如果把JS放到首屏中,将降低首屏性能。
因此,我们建议把JS文件放到首屏之后。而一般来说,这也是可以做到的,如果有非要在首屏中出现的JS代码, 那么我们建议把这部分JS代码做为内联代码放到html文档中。
在传统浏览器中(firefox-3.1b及以上版本例外),下载JS文件会阻塞后面文件的下载,这时浏览器会由并行下载变成串行下载。因此如何让JS文件与其它文件并行下载便变得很有意义。这里有6种方法可以使JS文件与其他资源并行下载:
* XHR eval -- 通过XHR(XMLHttpRequest对象)下载script,然后用eval方法执行XHR的responseText。
* XHR Injection -- 通过XHR下载script,然后建立一个script标签并把它插入文档中(body或者head标签内),接着把script标签的text属性设置为XHR的responseText的值。
* XHR in Iframe -- 把script标签放到一个iframe里,通过iframe下载它。
* Script DOM Element -- 创建script标签并把它的src属性指向你的脚本地址。
* Script Defer -- 添加script标签的defer属性,这个在ie和firefox3.1中有效。
* 使用document.write方法在页面中写入<script src="">,这个只在ie里有效。
本规则将检查所有不能并行下载的JS文件,并给出警告。注意:如果某个JS请求是页面中的最后一个请求, 那么该JS文件将同样被视为可并行的,原因是把JS文件放到页面末尾,同样不会阻塞其它请求下载,起到的作用其实跟并行JS是一样的。
JS 文件下载会阻塞其它请求的下载(支持并行下载的JS除外), 过大的JS文件则会进一步加剧这种阻塞,同时也会对浏览器的解析效率造成很大的影响。
因此我们建议精简js代码,去掉不需要的库代码及无用函数,并让JS文件支持并行下载。
这里我们的标准是JS文件压缩前不要超过30KB,超过30KB将被认定为过大。
精简JS代码是指除去不必要的字节,比如多余的空格、换行、缩进以及注释等等。精简JS代码不仅可以节约流量,加快代码下载,还能加快浏览器的加载和执行。
下面是三个常用的精简JS代码的工具
* Closure Compiler
* JSMin
* YUI Compressor
前面在JS文件不宜过大中说过, 我们建议将过大的JS文件拆分到多个可支持并行下载的较小的文件中,然而如果JS文件过多,将会产生过多的RTT(Round-Trip Time,往返时延),也会影响页面性能。
好的开发者在设计Web程序的时候都注重模块化和可重用性,将不同模块的代码放入不同的文件中在软件工程的角度来讲毫无疑问是非常好的选择。但是这种做法将大大增加页面加载的时间。 首先,对于没有cache的浏览器来讲,浏览器需要对每一个JS文件发出一个HTTP请求,一次HTTP请求就会增加一次往返时间。其次,大部分的浏览器 在JS(支持并行下载的JS除外)加载和解析的过程中,会阻止页面其它部分的加载。
然而在实际的web开发中,也有其它的因素会决定最终JS文件的个数。首先,对那些不需要在页面加载时就执行的JS,可以让其支持并行下载和进行延迟加载。 其次,部分代码需要经常进行更新,维护多个版本,在这种情况下通常需要将这部分代码独立出来。最后,可能有一些JS文件是放在你不能控制的域名中, 比如广告、数据统计、用户跟踪等。
大部分的现在浏览器都支持对HTML代码、CSS、Javascript的压缩,这就允许数据在传送过程中使用更加紧凑的方式,从而明显地减少下载的时间。
建议用gzip压缩JS文件。使用gzip压缩JS文件可以减少约2/3的网络传输。
本规则将检查没有采用gzip压缩的JS文件。
* 没有多余CSS代码
* 最多只有一个CSS文件
* 用 gzip压缩CSS文件
* 避免使用CSS表达式
* 把CSS放到 head中
CSS文件不宜过大
一般页面的样式表代码不可能太大,我们的建议是CSS文件压缩前不要超过20K。如果超过20K,请查看规则没有多余CSS代码,检查是否有多余的CSS代码。
没有多余CSS代码
该规则将在所有内联(inline)CSS代码和外部CSS文件中找出没有被当前页面用到的样式块。
最多只有一个CSS文件
我们认为一个页面中的CSS代码完全可以放到一个文件中。如果CSS文件多于一个,请合并到一个文件中。
用gzip压缩CSS文件
建议用gzip压缩CSS文件。使用gzip压缩CSS文件可以减少约2/3的网络传输。
避免使用CSS表达式
CSS表达式只能应用于IE5~IE7浏览器中,其它浏览器都不支持CSS表达式。 使用CSS表达式会降低浏览器的渲染速度,用其它方式来代替CSS表达式将提高IE的渲染速度。
把CSS放到head中
把内联的CSS代码和<link>元素(外部CSS文件)从body中移到head中将提升渲染性能,这是因为:
* 首先,浏览器将阻塞直到所有的外部CSS文件下载完后才开始渲染。
* 其次,内联的CSS代码可能会使内容重新渲染,导致内容产生“漂移”或“闪烁”。
因此,把<link>和<style>标签都放到head中便变得有意义,不仅可以避免以上问题,还可以使到浏览器对页面进行逐步渲染。
* 最小化图片
* 小图片请求不应过多
* 控制图片数量
* 图片文件不宜过大
* 图片至少来自 2个域名
指定图片尺寸
图片是一种可代替的页面元素,浏览器可以在图片下载完成之前就开始渲染页面,前提是它知道图片的尺寸,这样才能为周围那些不可代替的页面元素布局。如果图片没有指定尺寸,或者指定尺寸与真实图片不符合, 那么在图片下载完成之后,浏览器将需要重新布局和重绘。所以,为了避免重复重复渲染,需要为页面中所有图片指定高度和宽度。
最小化图片
一般图片制作完成后,可能会包含多余的信息。页面中的图片也可能出现真实尺寸大于页面中的指定尺寸(这时图片其实被扭曲了)。
本规则将对以上2种情况进行优化:
* 压缩图片,在不影响图片质量的前提下,对图片进行最小化压缩。
* 检查图片真实尺寸是否与页面中指定的尺寸一致。
小图片请求不应过多
页面请求过多将延长用户下载页面的时间。对于多个小图片请求,可以通过Image Maps或CSS Sprites等技术来合并图片, 并且如果小图片数量很多,建议采用分屏合并的方法,按先后屏的顺序合并,若干屏合成一个图,这样既通过小图片合并减少了页面请求数,又不会产生过大的图片而影响到首屏的性能。
在本规则是针对首屏的,小于5K的图片将被认为是小图片。如果首屏中小图片数超过20个将会被认为过多。
控制图片数量
过多的图片请求将延长用户下载页面的时间。本规则将进行以下3个方面的检查:
* 图片总数是否过多。这里将根据页面高度来评判图片数量,如果图片数大于20+6h/800,其中h为页面高度,将认为过多。
* 来自mat和img域名的图片是否过多。
* 小图片是否过多
图片文件不宜过大
本规则将针对一般网页上的图片进行检查(本规则不适用于评判高清大图),主要有以下3个方面:
* 50K以上的图片都将认为过大。
* 15K~50K的图片,如果图片面积(即宽像素 x 高像素)小于(图片文件大小 * 1.25),将认为该图片过大。
* 10K~15K的图片,如果图片面积小于11440(130 x 88,这个值取自“积木标准项目-图片规范.doc”中10K图片文件的最小面积),将认为该图片过大。
图片至少来自2个域名
图片一般分为素材图片和内容图片两种,这两种图片分别来自不同的域名。因此如果发现所有图片只来自同一个域名,则可能某些图片放错了域名。
* 设置浏览器缓存
* 相同的资源从同一URL获取
* 减少 DNS查找
* 把静态资源放到无cookie的域名中
* 避免重定向
* 避免 404错误
* 减少 cookie大小
设置浏览器缓存
为静态资源设置缓存可以让浏览器下次访问该页面时直接从本地磁盘直接获取页面资源。页面中的JS、 CSS、图片、flash等都视为可缓存资源。
本规则将检查以下几种情况:
* 没有指定缓存时间的可缓存资源。
* 头部用Vary头。IE会禁止缓存任何使用了Vary头部的资源,因此要避免使用Vary头部。
* 指定的缓存时间不够长。一般图片和flash指定一年以上的缓存时间,CSS和JS文件指定一周以上的缓存时间。
* URL冲突。在Firefox中,磁盘缓存所用的哈希函数对于相差很小的URL会产生冲突。
相同的资源从同一URL获取
本规则检查页面中是否有重复资源:即两个资源,内容一样,但是URL不同。
减少DNS查找
本规则将检查以下2种情况:
* 对于整个head及body的前10%中出现的script标签,如果这些标签的域名跟页面URL的域名不同,则认为违法规则。 理由是出现在前部(这里限定为整个head及body的前10%)的JS请求本来就会阻塞后面请求的下载(除非采用了JS文件可并行下载的方法), 如果这些JS文件的URL跟页面URL不同,则为了获取这些JS文件还需再这之前进行DNS查找。这将会对页面的逐步渲染造成较大影响。
* 对于只存放了一个资源的域名,也会进行提示,原因是一般是可以做到一个域名存放多个资源的, 如果一个域名只存放一个资源,则引起的DNS查找就显得过于浪费了。
把静态资源放到无Cookie的域名中
静态资源如图片、flash、CSS和JS文件是不需要Cookie的,如果把这些文件放到有Cookie的域名中,则会产生多余的Cookie流量。
本规则将检查并提示是否有静态资源放在有Cookie的域名中。
避免重定向
重定向将产生额外的请求。
本规则将检查页面中的重定向请求。
避免404错误
产生404错误的原因是服务器找不到对应的url请求,这实质上也是产生了额外的请求。
本规则将检查页面中是否出现返回404的请求。
减少cookie大小
Cookie没必要也不宜过大。
本规则将检查以下2种情况:
* 如果某个Cookie超过1K,则认为该Cookie过大。
* 如果所有Cookie的平均大小超过400个字节,则认为平均Cookie过大。
* 首屏高度是否合适
* 避免使用iframe
首屏高度是否合适
首屏高度过大或过小都将影响用户体验。
本规则以900像素为准来判断首屏高度是否合适,并列出首屏内的所有请求。
避免使用iframe
iframe会增加额外的请求,应尽量避免iframe的使用。
本规则将找出页面中的所有iframe。
3s,作为判断一个用户忍受你网站速度的限度,如果超过3s,用户已经对这个网站产生了负面的抵触心理。
前端性能优化和web标准有什么关系,接着第一篇悟道web标准——统一思想,遵循标准,这是对你遵循web标准的一个补偿或者是对标准的一个认可。
引用:
我们当然要革命它,取代他,创造全新的页面工程师体系和页面质量,独立的页面工程师完成的页面代码,跨越平台的页面代码,只要能解析页面的设备都能够访问和浏览,手写的页面代码,整齐划一,层次分明,最低流量消耗的页面代码,程序员喜欢的页面代码,访问速度超快的页面代码,改版可重复利用的页面代码,让页面工程师抬起头来,骄傲的称自己是工程师,书写的也是计算机代码的页面代码。
前端优化正好给Web标准提供了一个检验的机会,用“实践是检验真理的唯一标准”来判断标准化到底好不好,对不对。
前端性能优化了解yahoo性能优化N条的同学应该不会陌生,安装一个YSlow评分并对照着优化就可以了,但是有没有想过为什么要这么做就可以提升速度,这些与Web标准有没有某种关联或者因果呢。
我把这些个条目分成三类,服务端运算优化,传输优化,客户端运算优化:
第一类,服务器端优化
服务器端就是对你的网站的动态语言的执行(asp,php),数据库查询,存储等速度,总的来说就是输入/输出的运算。这些跟前端没关系,但是影响着前端。YSlow里面没有,鬼知道你网站的服务器性能如何,看不出来,就自行优化服务器性能,数据库性能,多买点服务器扩容。
yslow有一条尽早刷新 Buffer (Flush the Buffer Early),貌似是不等html完成生成就传输。
提高域名的DNS解析速度。减少DNS的解析个数。这个不好归类,暂时放到这里吧。
第二类,传输优化
这类是大头,很烦,首先是字节,字节越小越好,怎么能小下来,最有效的方式就是google的方案,把首页做的极其精简,图片,html,静态文件都很小,再就是缓存,把文件放到本地缓存区读取。还有http请求数,减少文件传输中的排队等待。
字节优化:
1. 减少冗余html,结构化,语义化的html来实现,行为,表现,结构分离,独立的html文件将变得很小。
2. 压缩文本文件,css,html,js去掉注释、空格、换行等。
3. 降低图片字节,选择合适的图片类型,png-8是一个好东西,再用工具将图片进行压缩去掉,比如png-8的压缩工具。用合适的图片尺寸,不要把大图控制一下宽高就用上了。
4. gzip压缩一下,减小服务器端传输到客户端时候的字节。
6. flash文件和flash+xml的动态flash也减小字节
缓存:
服务器端配置一下,提高缓存的命中率和把不经常修改的文件缓存了。
Add Expires headers、Etags、ajax使用get方式便于缓存。
把能分离出来的css,js分离成外部文件便于缓存。
使flash和xml文件可缓存。
打通不同运营商的限制
CDN提高不同类型运营商的网络传输速度,电信,网通,铁通,教育网统统搞定。
请求数:
减少文件请求数,能合并到一起的合并一下,css,js,图片等,减小排队等待和服务器端开销。
分域提高同时加载数,优化排队等待。
避免404无效请求数。
避免重定向。
延迟加载和预载:
把暂时不用的文件等主体页面加载完了再加载,把用户稍后要看浏览的内容预先加载进来,相册浏览就是很好的例子,先用小图片放大再把大图展示出来,看本张图片时把下一张预载进来等等。
第三类:客户端优化
1. 讨厌的IE的滤镜和CSS expressions少用,小心把浏览器搞挂,CUP 100%死机。
2. CSS放到前面,js能放到后面的放在代码后面。将页面尽早展示给用户。
3. 减少iframe的使用,避免CPU扛不住。
4. 减少DOM个数,减低浏览器解析压力。
5. 使用 <link> 而不是@importChoose <link> over @import,在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
6. 提高js的执行效率,话题太大不提了
7. 缩小 Cookie,针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)
8. 还有小图片的repeat背景会提高浏览器的CPU占用。
9. 合理的DOM排序,把重要的内容代码前置,优先加载。
再就是些没对号入座的雅虎性能优化的条目。至此可以检验到页面工程师不是盖的,需要对代码、文件,http协议,缓存,服务器等精准的学习和控制,达到提供用户最最基本的体验——访问速度的体验。
Web标准的分离思想和结构化语义化html促成了以上很多条的实施,这是美工时代所不能比拟的。
2万+



被折叠的 条评论
为什么被折叠?



