浅谈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

浅谈DOM性能考虑的更多相关文章

  1. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  2. 浅谈java性能分析

    浅谈java性能分析,效能分析 在老师强烈的要求下做了效能分析,对上次写过的词频统计的程序进行分析以及改进. 对于效能分析:我个人很浅显的认为就是程序的运行效率,代码的执行效率等等. java做性能测 ...

  3. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  4. 浅谈vue性能优化

    基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...

  5. 浅谈DOM事件的优化

    在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚 ...

  6. 浅谈JavaScript性能

    最近在JavaScript性能方面有所感悟,把我的经验分给大家: 说到JavaScript,就不得不说它的代码的运行速度—— 在我初学JavaScript的时候,只是觉得它是一个很强大的脚本.渐渐的, ...

  7. 浅谈前端性能优化（PC版）

    前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能.面试的时候经常会遇到问谈谈性能优化的手段,这个我分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多 ...

  8. 浅谈Apache性能调优

    做了很多WEB系统性能测试,都知道了解测试环境,服务器硬件配置,web服务器参数配置是我们开始测试前首先要做的事情. 针对并发数量来说,不同数量级的用户并发,需求的服务器和web服务参数肯定是不同的. ...

  9. 浅谈Oracle 性能优化

    基于大型Oracle数据库应用开发已有6个年头了,经历了从最初零数据演变到目前上亿级的数据存储.在这个经历中,遇到各种各样的性能问题及各种性能优化. 在这里主要给大家分享一下数据库性能优化的一些方法和 ...

随机推荐

  1. 深入学习golang(5)—接口

    接口 概述 如果说goroutine和channel是Go并发的两大基石,那么接口是Go语言编程中数据类型的关键.在Go语言的实际编程中,几乎所有的数据结构都围绕接口展开,接口是Go语言中所有数据结构 ...

  2. 致第一次安装RIME的你

    转载自百度RIME吧,作者:半月湾C 原帖地址:http://tieba.baidu.com/p/3288634121   序言 很喜欢小狼毫输入法,喜欢他的简洁,美观以及超强悍的个人定制功能.关于 ...

  3. ELK——Logstash 2.2 mutate 插件【翻译+实践】

    官网地址 本文内容 语法 测试数据 可选配置项 mutate 插件可以在字段上执行变换,包括重命名.删除.替换和修改.这个插件相当常用. 比如: 你已经根据 Grok 表达式将 Tomcat 日志的内 ...

  4. Web 开发常备工具

    工欲善其事,必先利其器.如今 Web 开发标准越来越高,Web 开发者也在不断寻找途径提升自己的技能.为使大家的开发工作更顺利进行,本文整理了 10+ 款比较优秀的 Web 开发工具,希望对你有帮助. ...

  5. 通过Web.config实现301重定向

    通过Web.config实现301重定向 IIS7以上可以通过修改Web.config实现IIS设置 现在我们通过Web.config实现301重定向 <system.webServer> ...

  6. 通信错误：(-1)[描述:无法解析路由器DDNS地址,请检查DDNS状态.] 解析办法

    EasyRadius提示:通信错误:(-1)[描述:无法解析路由器DDNS地址,请检查DDNS状态.] 出现以上问题,和easyradius没有直接的联系,主要产生原因有两种可能: 可能1:easyr ...

  7. [leetcode]Rotate Array

    in place交换 如果是k步,那么就是把后面k个放到前面了嘛. 我们先把整个数组reverse,然后把前面的reverse回来,再把后面的reverse回来 对于AB我们要通过reverse操作得 ...

  8. C# 实现字符串去重

    方法一 注:需要.net 3.5框架的支持 string s = "101,102,103,104,105,101,102,103,104,105,106,107,101,108" ...

  9. 利用闭包向post回调函数传参数

    最近在闲逛XX站的时候,打算搞个破坏,试试有多少人还是用初始密码登陆.比较懒,所以直接打开控制台来写. 所以问题可以描述为: 向后端不断的post数据,id从1~5000自增,后端会根据情况来返回值r ...

  10. 250W电源带i7+GTX1080?

    电源的科学: Q1:电源的额定功率是什么?峰值功率又是什么?A1:电源的额定功率就是电源正常工作时的功率,它的值为用电器的额定电压乘以额定电流.而峰值功率指的是电源短时间内能达到的最大功率, 一般情况 ...