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编程艺术2版学习笔记

  • 2015年10月23日 19:36
  • 2.46MB
  • 下载

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

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

JavaScript DOM 编程艺术学习笔记(一):静态标记

JavaScriptDOM编程艺术学习笔记(一):静态标记对象

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

CSS-DOM9.1 style属性语法,element.style.property比如,获取文档的颜色:para.style.color这里,需要注意的是,当获取如:font-family中间有-...
  • sofia92
  • sofia92
  • 2015年12月25日 13:37
  • 647

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

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

【第五章-最佳实践】javascript DOM 编程艺术-学习笔记

平稳退化(graceful degradation):确保网页在没有Javascript的情况下也能正常工作。 分离JavaScript:把网页的结构和内容与JavaScript脚本的动作行为分开。...

javascript DOM 编程艺术 学习笔记

1.document.getElementById(string)返回的是一个对象,这个对象是怎样的? 2.document.getElementsByTagName(tag)返回的是一个对象数组,...

JavaScript DOM编程艺术学习笔记(二):动态标记

JavaScript DOM编程艺术学习笔记(二):动态标记动

JavaScript DOM编程艺术 学习笔记(七)动态创建标记

之前见到的dom方法只能用来查找元素。 绝大多数的做法是网页的结构由标记负责创建,javaScript函数只用来改变某些细节而不改变其底层结构。本章将通过创建新元素和修改现有元素来改变网页结构。...

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

javascript_DOM 编程艺术学习笔记(六) 一、元素节点的创建 var pElement = document.createElement("p");  创建了一个标签的元素节点,里面没有任...
  • ssqfzc
  • ssqfzc
  • 2015年11月18日 23:05
  • 386
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript_DOM 编程艺术学习笔记(四)
举报原因:
原因补充:

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