可以通过https://jsbench.me/测试网站完成性能测试。

一.慎用全局变量

1.全局变量定义在全局执行上下文,是所有作用域链的顶端,在局部作用域中没找到的变量都会到全局变量中去查找,所以说查找的

时间消耗比较大。

2.全局执行上下文一直存在于上下文执行栈,直到程序退出。

3.如果某个及局部作用域出现了同名变量则会遮蔽或污染全局。

下面通过代码来解析下 全局变量存储和局部变量存储 性能比较局部变量存储是运行速度更快的

二.缓存全局变量

将使用中无法避免的全局变量缓存到局部,如下图所示局部变量缓存全局变量是运行速度更快的

三.通过原型新增方法

如下图所示通过原型链添加方法是运行速度上比较快

四.避开闭包陷阱

闭包特点:

1.外部具有指向内部的引用

2.在外部作用域访问内部作用域的数据

如下图所示,调用函数foo,foo函数指向了内部fn的存在,也就是外部指向了内部的引用

当调用foo函数的时候,我们在foo所在的作用域能够访问到foo里面的name变量,也就是外部作用域访问内部作用域的数据

如下图所示闭包使用不当很容易出现内存泄露

首先,btn元素本身就是存在于dom节点上的,只不过是用btn1这个变量在函数内部存了一下,所以说onclick事件是外部指向了内部,满

足了闭包的第一条,onclick事件在被调用的时候,所在的作用域是一个独立的作用域,跟foo作用域不是一个作用域,在里面用到了foo作

用域里面的el,所以满足闭包的第二条。这样的代码有一个问题,根据我们之前GC垃圾回收的引用机制,btn这个dom对象被引用了2次,

一次是在html中,一次是在foo变量里面,如果说我们把这个dom节点从html中删除,等于减少了一次引用,但是在foo内部还有一次引用

不会消失,这就造成了垃圾无法回收,也就是我们说的内存泄露。

解决办法如下,操作完成后把btn1置为null

五.避免属性访问方法的使用

根据JS的特性,构造函数内部所有的属性和方法都是对外暴露的,尽量避免构造函数内部使用方法返回属性,而是应该直接去访问

属性,如下图所示,很明显 直接访问属性更快一些。

六.for循环优化

如下图所示,

七.选择最优的循环方法

如下图所示,如果咱们只是遍历数组的数据,foreach性能最好,其次是for,最后是for in

八.文档碎片优化节点添加

如下图所示,文档碎片节点添加运行速度更快

九.克隆优化节点操作

克隆主要是新增Dom节点,可以根据界面上已经存在相似的Dom节点,进行复制,从而减少性能的消耗如下图所示,克隆DOM节点比

创建DOM节点要快一些。

十.直接量替换new object

如下图所示:直接用变量定义数组的方式比用new Object的方式创建数组运行明显要快

浅谈JavaScript代码性能优化的更多相关文章

  1. [原创]浅谈H5页面性能优化方法

    [原创]浅谈H5页面性能优化方法 前阶段公司H5页面性能测试,其中测试时也发现了一些性能瓶颈问题,接下来我们在来谈谈H5页面性能优化,仅仅是一些常用H5页面性能优化措施,其实和Web页面性能优化思路大 ...

  2. JavaScript代码性能优化总结

    JavaScript 代码性能优化总结 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面 ...

  3. 浅谈webpack4.0 性能优化(转)

    前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...

  4. 浅谈Oracle数据库性能优化的目标

    Oracle性能优化保证了Oracle数据库的健壮性,为了保证Oracle数据库运行在最佳的性能状态下,在信息系统开发之前就应该考虑数据库的优化策略.从数据库性能优化的场景来区分,可以将性能优化分为如 ...

  5. 浅谈web前端性能优化

    前端性能优化: 一.尽可能减少前端http请求. 1.合并优化脚本文件和css文件. 2.同种类型的背景图片尽量放在一起,用css控制显示. 二.使用浏览器缓存. 如果能强制浏览器缓存在本地,将会降低 ...

  6. BizTalk开发系列(三十二)浅谈BizTalk主机性能优化

    很多BizTalk的项目都要考虑到性能优化的问题,虽然BizTalk采用多线程处理消息的,大大提高了程序效率.但默认情况下 BizTalk的主机有很多阻止参数会控制BizTalk对服务器的资源使用率, ...

  7. 浅谈Vue 项目性能优化 经验

    我优化公司的项目总结的几点: 1.先查看引入的图片大小,如果太大了,可以压缩,压缩路径:https://zhitu.isux.us/ 2.代码包优化, 待下项目开发完成.进行打包源码上线环节,需要对项 ...

  8. 【转】JavaScript代码性能优化总结

    本文作者:zifan 来自:携程设计委员会 链接:http://ued.ctrip.com/blog/javascript-code-performance-optimization-summary. ...

  9. JavaScript 代码性能优化总结

    本文转自:http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=400360237&idx=2&sn=eb00241cb3b ...

  10. 浅谈MySQL 数据库性能优化

    MySQL数据库是 IO 密集型的程序,和其他数据库一样,主要功能就是数据的持久化以及数据的管理工作.本文侧重通过优化MySQL 数据库缓存参数如查询缓存,表缓存,日志缓存,索引缓存,innodb缓存 ...

随机推荐

  1. mui消息框alert,confirm,prompt,toast

    <script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeB ...

  2. 04-时序逻辑电路设计之计数器——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线--普利斯队长精心奉献 实验目的:以计数器为例学会简单的时序逻辑电路设计 实验平台:芯航线FPGA核心板 实验原理: 时序逻辑电路是指电路任何时刻的稳态输出不仅取决于当前的输入,还与前一时刻输入 ...

  3. BZOJ 1083: [SCOI2005]繁忙的都市 裸的最小生成树

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=1083 代码: #include<iostream> #include< ...

  4. (转)iOS7界面设计规范(13) - UI基础 - 与iOS的系统整合

    突然就到了周日傍晚.你永远不会知道自己的生活在接下来的一周当中能够发生多少变化:各种不可预知性所带来的更多是快感还是焦虑与不安,冷暖自知.相比之下,白天工作当中那些需求列表与排期文档就显得那么可爱了, ...

  5. chain pattern

    16.4 纯与不纯的职责链模式 职责链模式可分为纯的职责链模式和不纯的职责链模式两种:        (1) 纯的职责链模式 一个纯的职责链模式要求一个具体处理者对象只能在两个行为中选择一个:要么承担 ...

  6. 【论文:麦克风阵列增强】An Algorithm For Linearly Constrained Adaptive Array Processing

    作者:桂. 时间:2017-06-03  15:06:37 链接:http://www.cnblogs.com/xingshansi/p/6937635.html 原文链接:http://pan.ba ...

  7. [Ubuntu 16.04 LTS ]屏幕分辨率 Unknown display

    新装完Ubuntu 16.04 LTS 通过System settings-->Displays 设置屏幕分辨率 显示"Unknown display",选择后无反应,并且屏 ...

  8. WebView 讲义

    http://reezy.me/p/20170515/android-webview/  (比较全面) 参考 https://developer.android.com/reference/andro ...

  9. struts2 二: 参数封装

    封装请求正文到对象中(非常重要) 1.静态参数封装 在struts.xml配置文件中,给动作类注入值.调用的是setter方法. struts.xml的编写: <action name=&quo ...

  10. wechat-注意事项