zoukankan      html  css  js  c++  java
  • 浅谈DOM性能考虑

    浅谈DOM性能考虑

        很多人都会忽视脚本对Web应用整体性能的影响。为保证应用的流畅运行,在为文档编写和应用脚本时,需要注意一些问题。
    一、尽量减少访问DOM和尽量减少标记
        访问DOM的方式对脚本性能会产生非常大的影响。以下面代码为例:
            if(document.getElementByTAgName("a").length > 0){
                var links = document.getElementByTAgName("a");
                for(var i=0;i<links.length;i++){
                    //对每个链接做处理
                }
            }
        搞清楚这段代码做什么,自然明白问题在哪里了。首先,它取得了所有a元素,然后检查他们的个数是不是大于0;
        然后如果大于0,它会再次取得所有a元素,循环遍历这些元素并应用些操作。
        虽然这段代码可以运行,但是它不能保持最优的性能。不管什么时候,只要是查询DOM中的某些元素,浏览器都会搜素整个DOM树,从中查找出可能匹配的元素。
        这段代码居然使用了两次getElementByTAgName方法执行相同的操作,浪费了一次搜索。更好的办法是把第一次搜素的结果保存在一个变量中,然后在循环里重用该结果,比如:
            var links = document.getElementByTAgName("a");
            if(links.length > 0){
                for(var i=0;i<links.length;i++){
                    //对每个链接做处理
                }
            }
        这样一来,代码功能没有变,但搜索DOM的次数由两次降低到了一次。
    二、合并和放置脚本
        在我们制作的网页文档中,经常会看到有如下写法:
            <script src="script/functionA.js"></script>
            <script src="script/functionB.js"></script>
            <script src="script/functionC.js"></script>
            <script src="script/functionD.js"></script>
        为了提升代码的性能,推荐做法是将这四个javascript脚本合在同一个脚本中。这样就可以减少加载页面时发送的请求数量。
        脚本在标记中的位置对于页面的初次加载时间也有很大影响。传统上我们把脚本放置在<head>区域,这种做法存在一个问题。
        位于<head>块中的脚本会导致浏览器无法并行加载其他文件。
        根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间,浏览器不会下载其他文件,及时是来自不同域名的文件,所有其他资源都要等到脚本加载完毕后才能下载。
        所以,放置javascript脚本最好的位置就是在文档末尾,</body>之前。
    三、压缩脚本
        所谓压缩脚本,指的是把脚本文件中不必要的字节,如空格分注释等统统删除,从而达到“压缩”文件的目的。(有的精简程序甚至会重写你的部分代码,使用更短的变量名,从而减少整体文件的大小)
        推荐几个代表性的代码压缩工具:
        Douglas Crockford 的 JSMin    http://www.corckford.com/javascript/jsmin.html
        雅虎的YUI Compressor    http://developer.yahoo.com/yui/compressor
        谷歌的Closure Compiler    http://closure-compiler.appspot.com/home

  • 相关阅读:
    probuf了解
    rebbitmq-RPC(C#)
    获取指定数量的有序列表
    RPC(Remote Procedure Call Protocol)
    正则表达式(c#)
    02_python函数
    01_python基础
    养生茶
    测试左右移浅淡
    python类的组合
  • 原文地址:https://www.cnblogs.com/foodoir/p/5776803.html
Copyright © 2011-2022 走看看