javascript_DOM 编程艺术学习笔记(四)

原创 2015年11月18日 17:03:43

javascript_DOM 编程艺术学习笔记(四)


一、网页的性能优化

原网页:
<!DOCTYPE html>
<html lang="en">
<head>
<span>	</span><meta charset="UTF-8">
<span>	</span><title>js example</title><span>	</span>
<span>	</span><link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<span>	</span><h1>SnapShots</h1>
<span>	</span><ul>
<span>		</span><li><a href="images/1.jpg" onclick="popup(this.href);return false;" title="1">1</a></li>
<span>		</span><li><a href="images/2.jpg" onclick="popup(this.href);return false;" title="2">2</a></li>
<span>		</span><li><a href="images/3.jpg" onclick="popup(this.href);return false;" title="3">3</a></li>
<span>		</span><li><a href="images/4.jpg" onclick="popup(this.href);return false;" title="4">4</a></li>
<span>	</span></ul>
<span>	</span><img src="images/5.gif" alt="屌丝男" id="placeholder">
<span>	</span><p id="description" name="description">choose an image!</p>
<span>	</span><script type="text/javascript">
<span>		</span>function popup (winUrl) {
<span>			</span>window.open(winUrl,"popup","width=320,height=480");
<span>		</span>}
<span>	</span></script><span>	</span>
</body>
</html> 

1、平稳退化:确保网页没有javascript也能正常工作。

1)伪协议

<a href="javascript:popup('www.baidu.com')">百度</a>
缺点:如果是不支持伪协议的浏览器打开会失败,禁止javascript的浏览器会什么也不错,这种做法用户体验很差。

2)内嵌事件

<a href="#" onclick="popup('images/1.jpg');return false;" title="1">1</a>
缺点和伪协议一样
为啥要平稳退化?
1)增强用户体验,保证基本功能的执行。
2)便于搜索引擎搜索,增强你的网页在搜索引擎中的排名

2、分离javascript:把网页结构和内容与javascript脚本的动作行为分开

改进后的代码:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>js example</title>	
	<link rel="stylesheet" type="text/css" href="css/index.css">
	
</head>
<body>
	<h1>SnapShots</h1>
	<ul>
		<li><a href="images/1.jpg" class="popup" title="1">1</a></li>
		<li><a href="images/2.jpg" class="popup" title="2">2</a></li>
		<li><a href="images/3.jpg" class="popup" title="3">3</a></li>
		<li><a href="images/4.jpg" class="popup" title="4">4</a></li>
	</ul>
	<img src="images/5.gif" alt="屌丝男" id="placeholder">
	<p id="description" name="description">choose an image!</p>
	<script type="text/javascript" src="js/index.js"></script>
</body>
</html> 
js代码:
window.onload = function(){
<span>	</span>var links = document.getElementsByTagName("a");
<span>	</span>for (var i = 0; i < links.length; i++) {
<span>		</span>if (links[i].className === "popup") {
<span>			</span>links[i].onclick = function() {
<span>				</span>popup(this.href);
<span>				</span>return false;
<span>			</span>}
<span>		</span>}
<span>	</span>}
}


function popup(winUrl) {
<span>	</span>window.open(winUrl, "popup", "width=320,height=480");
}

3、向后兼容性:保证老旧的浏览器不会因为你的javascript脚本而死掉

js代码:
window.onload = function(){
	// 判断哪个属性是否存在,来确定浏览器是否支持这个js
	if(!document.getElementsByTagName) return false; 
	var links = document.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++) {
		if (links[i].className === "popup") {
			links[i].onclick = function() {
				popup(this.href);
				return false;
			}
		}
	}
}

4、性能考虑:确定脚本执行的性能最优

1)减少DOM的遍历次数和尽量减少标记的数量
2)合并脚本:当有多个js文件的时候,尽量合并成一个
      放置脚本:将js放在</body>之前,文档的末尾,会加快加载的速度。
3)压缩脚本。尽量精简代码,删除空格和注释。要用两个副本,工作一个副本,发布一个精简副本。加上.min后缀进行区分,当然也可以用其他的进行区分。
      压缩工具:
a、Douglas Crockford的JSMin(http://www.crockford.com/javascript/jsmin.html)
b、雅虎的YUI Compressor(https://github.com/PureKrome/YUICompressor.NET)
c、谷歌的Closure Compiler(http://closure-compiler.appspot.com/home)


javascript_DOM 编程艺术学习笔记(五)

javascript_DOM 编程艺术学习笔记(五) 一、提高js代码的适用性和扩展性 改进前的代码: js example SnapShots 1 2 3 ...
  • ssqfzc
  • ssqfzc
  • 2015年11月18日 18:11
  • 296

javascript_DOM 编程艺术学习笔记(六)

javascript_DOM 编程艺术学习笔记(六) 一、元素节点的创建 var pElement = document.createElement("p");  创建了一个标签的元素节点,里面没有任...
  • ssqfzc
  • ssqfzc
  • 2015年11月18日 23:05
  • 408

javascript_DOM 编程艺术学习笔记(一)

包含了一维数组、多维数组的定义方法,对象的定义方法,变量的作用域,函数,...
  • ssqfzc
  • ssqfzc
  • 2015年11月17日 11:18
  • 355

javascript_DOM 编程艺术学习笔记(七)

javascript_DOM 编程艺术学习笔记(七) 一、元素的样式 Document window.onload = function(){ var para = docume...
  • ssqfzc
  • ssqfzc
  • 2015年11月22日 23:09
  • 231

javascript_DOM 编程艺术学习笔记(三)

举了一个图片浏览的小例子,介绍DOM节点的一些知识
  • ssqfzc
  • ssqfzc
  • 2015年11月17日 15:24
  • 224

javascript_DOM 编程艺术学习笔记(二)

javascript_DOM 编程艺术学习笔记(二) 一、获取元素节点 1、根据id获取 document.getElementById(id名称); 2、根据元素节点名获取(是一个数组) do...
  • ssqfzc
  • ssqfzc
  • 2015年11月17日 14:29
  • 299

javascript_DOM 编程艺术学习笔记(八)

javascript_DOM 编程艺术学习笔记(八) 一、定时器 1、设置定时器 setTimeout("function",interval); 第一个参数是个字符串,是需要执行方法的名字;第二个参...
  • ssqfzc
  • ssqfzc
  • 2015年11月23日 21:37
  • 171

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 792

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014年08月11日 22:38
  • 1281

javascript_DOM 编程艺术完结篇

javascript_DOM 编程艺术完结篇         经过了两周的学习,《 javascript_DOM 编程艺术》这本书终于看完了,其中酸甜苦辣只有自己能够明白,每天早上6:50起床,在地铁...
  • ssqfzc
  • ssqfzc
  • 2015年11月29日 15:48
  • 212
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript_DOM 编程艺术学习笔记(四)
举报原因:
原因补充:

(最多只允许输入30个字)