javascript_DOM 编程艺术学习笔记（四）

最新推荐文章于 2024-08-12 09:24:46 发布

ssqfzc

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量409

点赞数

分类专栏： js基础文章标签： javascript js性能优化 js兼容 js脚本压缩 js脚本分离

本文链接：https://blog.csdn.net/ssqfzc/article/details/49905209

版权

js基础专栏收录该内容

10 篇文章 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" οnclick="popup(this.href);return false;" title="1">1</a></li>
<span>		</span><li><a href="images/2.jpg" οnclick="popup(this.href);return false;" title="2">2</a></li>
<span>		</span><li><a href="images/3.jpg" οnclick="popup(this.href);return false;" title="3">3</a></li>
<span>		</span><li><a href="images/4.jpg" οnclick="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）伪协议

缺点：如果是不支持伪协议的浏览器打开会失败，禁止javascript的浏览器会什么也不错，这种做法用户体验很差。

2）内嵌事件

缺点和伪协议一样

为啥要平稳退化?

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)

ssqfzc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_DOM 编程艺术学习笔记（四）

javascript_DOM 编程艺术学习笔记（四）一、网页的性能优化原网页：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;span&gt; &lt;/span&gt;&lt;meta charset="UTF-8"&gt;&lt;span&gt; &lt;/span&a
复制链接

扫一扫

专栏目录