`
T240178168
  • 浏览: 361832 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JS优化经验

    博客分类:
  • JS
阅读更多

1.定义局部变量。对于当前函数作用域内,如果需要使用这个作用域外部的一些变量,那么就尽量使用局部变量储存外部的变量吧,特别是对于嵌套多级的作用域查询,这个耗时也是比较严重的。还有就是获取DOM节点、NodeList、HTMLCollection等等,可以将NodeList、HTMLCollection转化为数组的形式进行操作,减少DOM即时更新所造成的性能消耗。

2.不要使用with语句。with语句会在当前作用域下面增加作用域链,造成当前作用域下面变量的遍历性能消耗更大。

3.对于闭包的使用,节省点,不要太过多了。闭包就是提供一个所谓的“封闭式”的作用域,只允许向包含它向别人访问,而不允许别人访问它。但是声明一个闭包的代价比声明普通的函数的代价是要更高的,况且还有IE下内存泄漏的危险。

4.获取字面量对象的属性和数组的项比获取变量更慢。如果你要获取一些数据的时候,使用变量比用数组、字面量对象的索引来访问来的更快。在循环中经常会需要访问数据,使用变量存储一下,来的更快。

5.在数组中不要嵌套的过深。js中没有二维数组的概念,但是可以自己编写一个二维数组,并且可以无限的嵌套下去,json很经常就是这么干的。但是嵌套的越深,访问数组中的项就更难了,级数和性能消耗成正比的。

6.少用for-in循环。众所周知,for-in用于遍历对象的属性和方法,它所要消耗比for、while、do-while更多的性能。在for-in循环中,对于每一个循环,javasript需要创建一个函数来处理每一个循环,这就带来这么两个性能问题:函数创建、销毁的过程;这个函数在创建之后,又会储存它直接上级的作用域的活动对象。

7.对于循环,合并控制循环的语句,以及控制变量变化方式。在一个控制循环的语句中,比如循环结束条件、索引的递增等等,如果可以优化这些操作,那么对于整个循环的性能是有帮助的。比如对于结束循环条件:for(var i =0;i<10;i++),每次循环的时候,都要执行:#1 i是否存在;#2 i是否 < 10;#3 i++。优化一下,使用while或者do-while:var i = 9;do { ...} while(i--),那么这样之后,每一个循环需要执行的操作:#1 i--;#2 i是否为true。这样就对循环条件的执行步骤进行了简化。

8.对于HTMLCollection,尽量定义一个数组来储存它。这样可以避免DOM即时更新所造成的影响。

9.在操作DOM节点的时候,尽量让它飘了吧。让DOM元素脱离document之后再对它进行操作,最后再重新插回document中,最小化reflow(改变了DOM元素布局性的相关的属性之后就会触发,比如:height、width等)、repaint(改变了DOM元素显示上的变化就会触发,比如:background、color等)所造成的影响。

10.改变DOM节点样式的时候,尽量改变DOM元素的class而不是style属性。原因你懂的……

规则是死的,不能泛用;规则又是活的,看你是否活学活用,用到思维里去,在你编写代码的时候就可以随手写出符合这些规则的代码。
0
31
分享到:
评论

相关推荐

    雅虎之网页性能优化

    介绍雅虎团队网站优化经验:总结性能优化的34 条黄金守则

    Javascript优化技巧(文件瘦身篇)

    在《Javascript 高级程序设计》有篇章节着重阐述了优化 Javascript 代码的重要性。相信有很多的 Javascript 开发人员在开发的同时或多或少的会接触到此类的问题。 在大部分情况下,代码的优化并不是实际开发中...

    JavaScript高效图形编程

    JavaScript高效图形编程内容简介:《Javascript高效图形编程》是一本具有很强实操性的Javascript图书,全书共分10章,涵盖的主要内容有:Javascript的面向对象机制、Javascript性能优化、...

    JavaScript脚本性能的优化方法

    JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的...

    SQL查询安全性及性能优化

    SQL优化经验  大表缺索引---必要字段上建立索引  索引碎片--维护阶段定期检测索引是否有碎片,如果过多就要对索引重新组织和重建  索引失效或者没有使用索引,例如:  or语句使用了没有索引的字段  对有...

    JavaScript高程第3版)非扫描高清版

    内容主要涉及JavaScript的语言特点、JavaScript与浏览器的交互、更高级的JavaScript技巧,以及与在Web应用程序中部署JavaScript解决方案有关的问题,如错误处理、调试、安全性、优化/混淆化、XML和Web服务,最后介绍...

    Node.js背后的V8引擎优化技术

    V8是Chrome背后的JavaScript引擎,因此本文的相关优化经验也适用于基于Chrome浏览器的JavaScript引擎。V8引擎在虚拟机与语言性能优化上做了很多工作。不过按照LarsBak的说法,所有这些优化技术都不是他们创造的,...

    SmartSoftHelp最专业的SqlServer优化工具,最专业的c#代码生成器

    2.web应用优化(json,sql ,web前端html,css,js压缩格式化代码,web客户端性能提升) 3.数据库性能优化,数据库参数设置,查询,数据库连接字符串优化,SQL耗时优化,SQL格式化,SQL美化 4.服务器高并发性能优化( ...

    牛叉广告管理优化大师(NiuXams)v1.30

    结合了牛叉软件多年来的广告管理优化系统研发经验,精心打造的功能强大、性能卓越的网站广告管理、广告智能投放系统。系统化管理网站内的所有广告资源,模块化结构,化繁为简,只需简单堆砌,在线操控广告变的简单、...

    几个优化WordPress中JavaScript加载体验的插件介绍

    本文根据作者的使用经验介绍几个相关插件,并说明如何在某些特殊页面仍然在页头加载 JavaScript。 下面先简单介绍几个相关的优化 JavaScript 的 WordPress 插件及特点,然后演示如何处理一些特殊情况。 一. 优化...

    JavaScript模式【英文版】.pdf

    如果您是一名有经验的开发者,正在寻找与对象、函数、继承以及其他特定语言分类,那么本书中的抽象方案和代码模板将是十分理想的指南,无论您正在使用Javascript编写客户端、服务端,抑或是桌面应用程序。...

    Flarum中文优化论坛PHP源代码.rar

    界面使用 Mithril 构建,Mithril 是一个高性能的 JavaScript 框架。更少的等待,更多的交流。  精美的响应式布局,如果 Flarum 的桌面版界面没有打动你的心,那么他的移动版一定会的。Flarum was born to be ...

    Javascript 高级程序设计第3版(完整源代码书上每个例子都有)

    以及与在Web应用程序中部署JavaScript解决方案有关的问题,如错误处理、调试、安全性、优化/混淆化、XML和Web服务,最后介绍应用所有这些知识来创建动态用户界面。 本书适合有一定编程经验的开发人员阅读,也可作为...

    JS学习资料

    网上有人分享经验,说到学习前端开发技术JavaScript很实用的一些书籍,从入门到高级,一一列举,很不错。整理了一下发上来。 名称: JavaScript+DOM编程艺术.pdf 概述: “本书理应奉为经典。文笔清晰,采用了优秀...

    优化 JavaScript 代码的方法小结

    优化 JavaScript 代码 作者: Gregory Baker, GMail 软件工程师 和 Erik Arvidsson, Google Chrome 软件工程师 需要的经验: JavaScript 相关工作知识 客户端脚本能让你的应用更加地动态和活跃, 但是浏览器对代码的...

    提升网页加载速度和体验以及图片优化的方法

    下面我就个人经验,来简单介绍一下图片优化的方法,首先我们了解一些图片方面的知识: 1. 矢量图与位图。 矢量图:缩放、旋转不失真的图像格式,不管你离多近去看都看不到图形的最小单位。存储的文件较小,但是很...

    单页Web应用 JavaScript从前端到后端

    剩下三分之一的内容讲解单页Web应用的服务器端开发和其他与单页Web应用相关的知识,如Node.js、MongoDB、CDN、搜索引擎优化、数据分析、错误日志以及各个层级的缓存等。本书两个附录分别介绍JavaScript的编码规范和...

    优化JavaScript脚本的性能的几个注意事项

    JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的...

Global site tag (gtag.js) - Google Analytics