关闭

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

标签: javascriptjs性能优化js兼容js脚本压缩js脚本分离
190人阅读 评论(0) 收藏 举报
分类:

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)


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12622次
    • 积分:510
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条