JS 之性能优化

了解JS性能优化是学习前端必备的一项技能。下面就简单的列出几点:

1.注意作用域,避免全局查找。

访问全局变量比访问局部变量慢,是因为需要遍历作用域链,查找作用域链需要额外的时间。所以在一个函数中,将访问多次的全局对象或者域外变量存储为局部变量来使用。如某个方法需引用全局变量的值,则在该方法所在的对象的作用域中定义一个局部变量等于全局变量的值。

避免不必要的属性查找,将属性设置为局部变量。

function(){

  var title = document.title;

  for(var i=0;i<3;i++){

    console.log(title);

  }

}

2.优化循环

简化循环体。当循环的数量不多时,展开循环。当if-else较多时,建议使用switch语句。

3.最小化语句数

声明多个变量时,可以使用一个var关键字来声明,变量之间用逗号表示。

使用数组或对象字面量来新建数组或对象。var arr= [1,2,3,4];var map={a:1,b:2}

4.JS的执行尽量脱离DOM树,限制DOM操作的次数,优化DOM交互,尽量减少浏览器对DOM的渲染和重绘操作

最小化现场更新,现场更新就是立即对页面的显示进行更新。尽量少更新。这时候可使用文档碎片来构建DOM结构。document.createDocumentFragment()

使用innerHTML来构建大的DOM结构。但是也避免重复大量的使用。

5.使用事件代理

页面上的事件处理程序的数量和页面响应用户交互的速度之间有个负相关。所以为了减少事件处理程序,尽量使用事件委托技术。

6.JS的执行顺序

JS放HTML页面最后面时,不一定提升JS性能,但是在网速较慢的时候会快速的渲染页面。

7.JS定义行为,html定义内容,CSS定义外观,不混淆

8.减少HTTP请求数,JS压缩,HTTP压缩

9.数据尽量存储在数组里

10、代码的优化不是减少代码量,而是增加代码提高代码的可阅读性。

包括正确标记变量,封装某个重复的行为,合理的注释等。

PS:以上内容如果描述的不准确,欢迎拍砖。

时间: 2024-12-19 06:26:17

JS 之性能优化的相关文章

Babylon.js官方性能优化文档中文翻译

在这里列出Babylon.js官方性能优化文档的中英文对照,并在CardSimulate项目里对其中的一些优化方法进行实践. How To 如何 Optimize your scene 优化你的场景 Table of contents 内容列表 How To Optimize Your Scene 如何优化你的场景 Use TransformNode instead of AbstractMesh or empty meshes 使用变换节点代替抽象网格或者空网格 Changing per me

[js] 前端性能优化

原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 链接:http://www.zhihu.com/question/21658448/answer/18903129 网络性能优化,加快访问速度,浏览器并行加载数量,怎样实现原生JS异步载入,CDN加速的原理,如何将不同静态资源发布到多个域名服务器上,发布后这些静态字段的url路径改怎么批量改写,用什么工具进行项目打包,css打包后的相对路径怎么转换为绝对路径,用什么工具进行项目模块依赖管理,

js前端性能优化之函数节流和函数防抖

前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而防抖动只是在最后一次事件后才触发一次函数. 原理是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器 主要有两种实现方法: 时间戳 定时器 时间戳实现:

Node.js 应用性能优化的五个技巧

在这个由软件定义的世界里,企业往往是通过 Web 应用和移动应用程序来提供他们大部分的服务.所以对企业来说,一个非常重要的任务就是要确保用户拥有出色的使用体验.Node.js 正迅速成为时下最流行的平台之一,它被用于方便地搭建响应速度快.易于扩展的网络应用和移动应用程序.通过下图也可以看出,Node.js 正在成为新的主流. 众所周知,Node.js 是单线程服务器,新事件会触发代码的执行,进行一系列 I/O 操作,并在完成后回调.对于 I/O 密集型的应用,例如 Web 和移动应用程序,这种事

js代码性能优化的几个方法

相信写代码对于大部分人都不难,但想写出高性能的代码就需要一定的技术积累啦,下面是一些优化JavaScript代码性能的常见方法. 一.注意作用域 1.避免全局查找 使用全局变量和函数肯定要比局部的开销更大,因为要涉及作用域链上的查找,请看以下函数: 1 function demo1() { 2 var imgs = document.getElementByTagName("img"); //获取页面所有img标签 3 4 for(var i = 0; i <= imgs.len

js高效性能优化--字符串优化

1.对于js中的字符串连接,很多误区的用法就是用“+”来连接字符串,但是这种效率极其低下,因为每次连接两个字符串的时候,后台都要创建一个中间字符串(比如“”)来作为两者的中介将其连接,且连接后后台还要花费时间去释放中间变量,造成了效率底下. 最好的解决方法:就是用join(“a”)方法-------作用将数组里的所有元素以a为分隔符连接成新的字符串 2.js中没有去处头尾空白符的函数trim(),这里利用replace()函数自定义一个trim()函数,高效且有用

js高效性能优化方法总结

以下是个人对如何编写出高效性能的javascript的一些总结,希望对大家有所帮助.

新产品为了效果,做的比较炫,用了很多的图片和JS,所以前端的性能是很大的问题,分篇记录前端性能优化的一些小经验。

第一篇:HTTP服务器 因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,swf) 提到单独的服务器,用更加快速的HTTP服务器,这里选择了nginx了,nginx相比apache,更加轻量级, 配置更加简单,而且nginx不仅仅是高性能的HTTP服务器,还是高性能的反向代理服务器. 目前很多大型网站都使用了nginx,新浪.网易.QQ等都使用了nginx,说明nginx的稳定性和性能还是非常不错的. 1. nginx 安装(linux) htt

JS性能优化

下面是一些关于客户端JS性能的一些优化的小技巧: 1.[顶]关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推 荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2.如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中