JavaScript的性能优化

一、

1、</body>闭合之前,将所有的<script>标签放在页面底部。这能确保在脚本执行前页面已经完成渲染。

2、合并脚本。页面中的<script>标签越少,加载也就越快,相响应也更迅速。无论外链文件还是内嵌脚本都是如此。

3、有多种阻塞下载JavaScript的方法:

-使用<script>标签的defer属性;(Firefox和IE支持)

-使用动态创建<script>元素来下载并执行代码;

-使用XHR对象下载JavaScript代码并注入页面。

二、

1、访问字面量和局部变量的速度最快、相反,访问数组元素和对象成员相对较慢。

2、由于局部变量存在作用链的起始位置,因此访问局部变量比访问作用域变量更快。变量在作用域链中的位置越深,访问的时间就越长。由于全局变量总处在作用域链的最末端,因此访问的速度最慢。

3、避免使用with语句,因为他会改变执行环境作用域链。同样,try-catch语言中的catch子句也有同样的影响,因此也要小心使用。

4、嵌套的对象成员会影响性能,尽量少用。

5、属性或方法在原型链中的位置越深,访问它的速度也越慢。

6、通常来说,你可以通过把常用的对象成员、数组元素、跨域变量保存在局部变量中来改善JavaScript性能,因为局部变量访问速度更快。

三、

1、‘最小化DOM访问次数,尽可能在JavaScript端处理

2、如果需要多次访问某个DOM节点,请使用局部变量存储它的引用。

3、小心处理HTML集合,因为它实时连系着底层文档。把集合的长度缓存到一个变量中,并迭代中使用它。如果需要经常操作集合,建议把它拷贝到一个数组中。

4、如果可能的话,使用更快的API,比如querySelectorAll()和firstElementChild。

5、’要留意重绘和重排,批量修改样式时。“离线”操作DOM树,使用缓存,并减少访问布局信息的次数。

6、动画中使用决定布局,使用拖放代理。

7、使用事件委托来减少处理时间的数量。

时间: 2024-11-08 14:43:08

JavaScript的性能优化的相关文章

[转]JavaScript 的性能优化:加载和执行

原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化:加载和执行 蔡 愉晟, 软件工程师, IBM 简介: 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就

javascript的性能优化tips

谈到javascript的性能优化,有好多点,比如把script放到离body闭合标签附近,合并多个script标签等等,还有一些代码的性能,for的性能不如while的性能好,用while模拟for循环等等等. 1.从加载开始 在浏览器中,js文件的执行和下载会阻塞css和dom的渲染,这是浏览器的单线程所致,后来chrome,ff等浏览器启用了js文件的并行下载,然而js文件的运行还是会被阻塞,有的浏览器支持defer关键字. <script type="text/javascript

【转】js JavaScript 的性能优化:加载和执行

JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详

JavaScript 的性能优化:加载和执行

随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必

JavaScript的性能优化:加载和执行

随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 1.概述 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染

javascript循环---性能优化

循环是编程中是最为常见的结构,优化循环是性能优化中很重要的一个部分. 减值迭代:大多数循环使用一个从0开始.增加到某个特定值的迭代器.在很多情况下,从最大值开始,在循环中不断减值的迭代器更加高效. 简化终止条件:如前所说,属性查找或者其它O(n)的操作不应该出现在终止条件这个地方. 简化循环体:循环体是执行最多的,一定要确保没有某些可以被很容易移出循环的密集计算. 使用后测试循环:最常用的for循环和while循环都是前测试循环,而如do-while为后测试循环,可以避免最初终止条件的计算,因此

Javascript常见性能优化

俗话说,时间就是生命,时间就是金钱,时间就是一切,人人都不想把时间白白浪费,一个网站,最重要的就是体验,而网站好不好最直观的感受就是这个网站打开速度快不快,卡不卡. 当打开一个购物网站卡出翔,慢的要死,是不是如同心塞一样的感受,蓝瘦香菇,想买个心爱的宝贝都不能买,心里想这尼玛什么玩意. 那么如何让我们的网站给用户最佳的体验呢?大环境我们不说,什么网络啊,浏览器性能啊,这些我们无法改变,我们能改变的就是我们码农能创造的,那就是代码的性能.代码精简,执行速度快,嵌套层数少等等都是我们可以着手优化注意

JavaScript 前端性能优化小窍门实例汇总

在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛. 在web应用项目中,需要大量JavaScript的代码,将来也会越来越多. 但是由于JavaScript是一个作为解释执行的语言,而且它的单线程机制,决定了性能问题是JavaScript的弱点,也是开发者在写JavaScript的时候需注意的一个问题. 因为经常会遇到Web 2.0应用性能欠佳的问题,主因就是JavaScript性能不足,导致浏览器负荷过重. Javascript

javascript基础-性能优化

优化点 性能检测 基调网络 http://www.cesule.com/cesule/status/show/3496d91653a14743af2bd2e261aee204 chrome检测 优化原则 ‘两害取其轻’: 没有完美的方案.比如,优化与项目工程冲突时,择其一. 并不是每一条都需要优化,根据具体情况来.    优化前后需对比是否有效. 性能优化属于前端集成解决方案的一部分.即推进前端工业化,自动处理.使研发人员只专注于‘业务逻辑’.

【摘要】JavaScript 的性能优化:加载和执行

1.浏览器遇到js代码会暂停页面的下载和渲染,谁晓得js代码会不会把html给强奸(改变)了: 2.延迟脚本加载:defer 属性 <html> <head> <title>Script Defer Example</title> </head> <body> <script type="text/javascript" defer> alert("defer"); </scr