javascript DOM 学习笔记

最新推荐文章于 2024-08-22 10:43:59 发布

meteor_730

最新推荐文章于 2024-08-22 10:43:59 发布

阅读量809

点赞数

分类专栏： WEB 文章标签： javascript 浏览器脚本文档性能优化 html

本文链接：https://blog.csdn.net/meteor_730/article/details/7458025

版权

WEB 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.平稳退化

网站访问者完全有可能使用的是不支持javascript的浏览器，或者是用户已经禁用。如果没有考虑这种情况，人们在访问网站时就有可能遇到麻烦，并因此不再来访问网站。如果正确的使用了javascript脚本，就可以让访问者在他们的浏览器不支持javascript的情况下仍能顺利地浏览网站。这就是所谓的平稳退化。虽然某些功能无法使用，但最基本的操作仍能顺利完成。

<a href="javascript:window.open("www.baidu.com");" ></a>

这条语句在支持“javascript:”伪协议的浏览器中运行正常，较老的浏览器则会去尝试打开那个链接但失败，支持这种伪协议但禁用了javascript功能的浏览器会什么也不做。总之，在HTML文档里通过"javascript:"伪协议调用的javascript代码的做法非常不好。

<a href="#" οnclick="window.open("www.baidu.com");return false"></a>

因为在上面这条HTML指令使用了return false语句，这个链接不会真的被打开。“#”符号是一个仅供文档内部使用的链接记号。在某些浏览器里，“#”链接指向当前文档的开头。把href属性的值设置为“#”只是为了创建一个空链接。实际工作全部由onclick属性负责完成。这个技巧与"javascript:"伪协议代码一样糟糕，也不能平稳退化。用户禁用了浏览器的javascript功能，这样的链接将毫无用处。

各大搜索引擎都有类似（搜索机器人）的程序，目前，只有极少数搜索机器人能够理解javascript代码。所以，如果你的javascript网页不能平稳退化，它们在搜索上的排名就可能大受损害。

<a href="www.baidu.com" οnclick="window.open("www.baidu.com");return false"></a>-----平稳退化

2. 向后兼容

可以通过对像检测的方法，使浏览器不执行此方法或者属性。

if (!documnet.getElementById) return false;

3.性能考虑

1) 尽量少访问DOM尽量减少标记

访问DOM的方式对脚本性能会产生非常大的影响。以下代码为例：

if (document.getElementByTagName("a").length > 0){
    var links = document.getElementByTagName("a");
    for (var i=0;i<links.length;i++){
      //对每个链接作点处理
    }
}

搞清楚这段代码要干什么，自然就会明白问题在哪里了。首先，它取得了所有<a>元素，然后检查它们的个数是不是大于0

if (document.getElementByTagName("a").length > 0)

然后，如果大于0，它会再次取得所有<a>元素，循环遍历这些元素并应用某些操作。

 var links = document.getElementByTagName("a");
    for (var i=0;i<links.length;i++){

虽然这段代码可以运行，但它不能保持最优的性能。不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。这段代码居然使用了两次getElementByTagName方法去执行相同的操作，浪费了一次搜索。更好的办法是把第一次搜索的结果保存在一个变量中，然后在循环里重用该结果，比如：

var links = document.getElementByTagName("a");
if (links .length > 0){ 
   for (var i=0;i<links.length;i++){ 
       //对每个链接作点处理 
   }
}








    在多个函数都会取得一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数的形式传递给函数。另一个需要注意的地方，就是要尽量减少文档中的标记数量。过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。

2)合并和放置脚本
    把多个外部JS文件合并成一个脚本文件。这样，就可以减少加载页面时发送请求数量。而减少请求数量通常都是在性能优化时首先要考虑的。


    脚本在标记中的位置对页面的初次加载时间有很大影响。传统上，我们都把脚本放在文档的<head>区域，这种放置方法有一个问题。位于<head>块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等加载完毕后才能下载。所以把<script>标签都放到文档的末尾，</body>之前，就可以让页面变得更快。
3)压缩脚本