浅谈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
浅谈DOM性能考虑的更多相关文章
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- 浅谈java性能分析
浅谈java性能分析,效能分析 在老师强烈的要求下做了效能分析,对上次写过的词频统计的程序进行分析以及改进. 对于效能分析:我个人很浅显的认为就是程序的运行效率,代码的执行效率等等. java做性能测 ...
- Js之浅谈dom操作
JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...
- 浅谈vue性能优化
基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...
- 浅谈DOM事件的优化
在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚 ...
- 浅谈JavaScript性能
最近在JavaScript性能方面有所感悟,把我的经验分给大家: 说到JavaScript,就不得不说它的代码的运行速度—— 在我初学JavaScript的时候,只是觉得它是一个很强大的脚本.渐渐的, ...
- 浅谈前端性能优化(PC版)
前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能.面试的时候经常会遇到问谈谈性能优化的手段,这个我分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多 ...
- 浅谈Apache性能调优
做了很多WEB系统性能测试,都知道了解测试环境,服务器硬件配置,web服务器参数配置是我们开始测试前首先要做的事情. 针对并发数量来说,不同数量级的用户并发,需求的服务器和web服务参数肯定是不同的. ...
- 浅谈Oracle 性能优化
基于大型Oracle数据库应用开发已有6个年头了,经历了从最初零数据演变到目前上亿级的数据存储.在这个经历中,遇到各种各样的性能问题及各种性能优化. 在这里主要给大家分享一下数据库性能优化的一些方法和 ...
随机推荐
- 解决ASP.NET在IE10中Session丢失问题【转】
今天发现在IE10中登录我公司的一个网站时,点击其它菜单,页面总会自动重新退出到登录页,后检查发现,IE10送出的HTTP头,和.AUTH Cookie都没问题,但使用表单验证机制(FormsAuth ...
- eclipse快捷键调试总结【转】
http://www.cnblogs.com/yxnchinahlj/archive/2012/02/22/2363542.html (1)Ctrl+M --切换窗口的大小(2)Ctrl+Q --跳到 ...
- jquery.jqzoom.js图片放大镜
jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...
- 安装scapy遇到的问题
1. Mac平台 在mac上安装scapy可以说是困难重重,一来因为scapy实在有些小众和老旧,再加上安装说明文档都是python2.5 也没有详细说明一些安装问题. 折腾了大概三个小时之后终于解决 ...
- OsmocomBB 编译安装
工具: sudo apt-get install libtool shtool autoconf git-core pkg-config make gcc gnuarm: ## 32 bit wget ...
- 关于 Redis 访问安全性的问题
升级版本 3.0.2 版本升级到 redis-3.2.0 版本远程无法访问,比较配置文件有些变化,比如默认只能本地的机器才能访问 3.0.2 版本 # By default Redis listens ...
- 更新iOS Distribution Certificates
1. 鑰匙圈存取 -> 憑證輔助程式 -> 從憑證授權要求憑證 email:xxx@xxxx 得到 Blia_20140129.certSigningReques 2.進入開發帳號 憑證 ...
- 【转】JavaScript中的对象复制(Object Clone)
JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b. ...
- 如何做好IT运营.
定义IT管理的重点在于业务策略与 IT 部门提供的服务之间的一致性.IT 管理可建立必要的管理机制来确保可预测的 IT 服务交付,从而确保业务流程和 IT 流程之间的联系.IT 管理传统上属于CIO. ...
- 增大VM下linux的根目录空间
增大VM下linux的根目录空间 用的太久,发现VM下的系统空间不足.简单的方法是,分一个新硬盘,挂载到根目录下. 下面是直接增大根目录下空间: 1. 增大vm下的磁盘大小, VM -&g ...